Update the doc to refer the official doc
This commit is contained in:
parent
d776885d15
commit
4e9df8e0c0
4 changed files with 24 additions and 51 deletions
16
README.md
16
README.md
|
@ -10,22 +10,16 @@ This project has two branches:
|
||||||
|
|
||||||
* **large-media-sample:** A photo gallery that uses Netlify Large Media feature. You can go to a [static/images](https://github.com/netlify/netlify-photo-gallery/tree/large-media-sample/static/images) folder to see how large media assets are managed with Git. This branch is deployed as [https://netlify-photo-gallery.netlify.com/](https://netlify-photo-gallery.netlify.com/) demo page.
|
* **large-media-sample:** A photo gallery that uses Netlify Large Media feature. You can go to a [static/images](https://github.com/netlify/netlify-photo-gallery/tree/large-media-sample/static/images) folder to see how large media assets are managed with Git. This branch is deployed as [https://netlify-photo-gallery.netlify.com/](https://netlify-photo-gallery.netlify.com/) demo page.
|
||||||
|
|
||||||
## How to play with this
|
## How to deploy your own photo gallery to play with it
|
||||||
|
|
||||||
1. Deploy to Netlify with "Deploy to Netlify" button. This will create a new Netlify site and copy the repo to your GitHub account.
|
1. Deploy to Netlify with "Deploy to Netlify" button. This will create a new Netlify site and copy the repo to your GitHub account.
|
||||||
|
|
||||||
[](https://app.netlify.com/start/deploy?repository=https://github.com/netlify/netlify-photo-gallery)
|
[](https://app.netlify.com/start/deploy?repository=https://github.com/netlify/netlify-photo-gallery)
|
||||||
2. Clone a newly created repo to your local computer with `git clone`.
|
2. Clone a newly created repo to your local computer with `git clone`.
|
||||||
3. `netlify link` to link the local repo and the Netlify site.
|
3. Follow the step of [Enabling Netlify Large Media](https://www.netlify.com/docs/large-media/#enabling-netlify-large-media) to enable Large Media for the newly deployed site.
|
||||||
* Make sure to install Netlify CLI if you haven't: `npm install netlify-cli -g`.
|
4. Tweak the LFS settings with the `git lfs` commands. The following example tracks `jpg` and `png` files. Tracking them is required for this photo gallery, so you can start tracking them:
|
||||||
4. Check if the Large Media local setup has finished already.
|
|
||||||
* You can check it with `netlify lm:info` command.
|
|
||||||
* Make sure to install netlify-lm-plugin plugin if you haven't: `netlify plugins:install netlify-lm-plugin`.
|
|
||||||
5. Run `netlify lm:setup` to setup the Large Media for this repository/site.
|
|
||||||
* It will create a `.lfsconfig` file, make sure you track this file.
|
|
||||||
6. Tweak the LFS settings with the `git lfs` commands. The follow example contains `jpg` and `png` files, and expects that both of them are tracked by LFS:
|
|
||||||
* To track jpg files: `git lfs track *.jpg`.
|
* To track jpg files: `git lfs track *.jpg`.
|
||||||
* To track png files: `git lfs track *.png`.
|
* To track png files: `git lfs track *.png`.
|
||||||
* To track all files under `static/images`: `git lfs track static/images/**`.
|
5. Explore more for how to configure the tracking in [the documentation](https://www.netlify.com/docs/large-media/#large-media-file-tracking-configuration).
|
||||||
7. Run `git push origin master` to push your changes to GitHub. It'll be automatically deployed to Netlify utlizing Large Media.
|
7. After making sure you `git add` changes, run `git push origin master` to push your changes to GitHub. It'll be automatically deployed to Netlify utlizing Large Media.
|
||||||
8. Try transformations with image files. For example, you can tweak the layout file with `layouts/photos_s/list.html`.
|
8. Try transformations with image files. For example, you can tweak the layout file with `layouts/photos_s/list.html`.
|
||||||
|
|
|
@ -4,9 +4,9 @@ title = "Netlify photo gallery"
|
||||||
|
|
||||||
[menu]
|
[menu]
|
||||||
[[menu.main]]
|
[[menu.main]]
|
||||||
identifier = "contribute"
|
identifier = "top"
|
||||||
name = "show contribute guide"
|
name = "top"
|
||||||
url = "/contribute/"
|
url = "/"
|
||||||
[[menu.main]]
|
[[menu.main]]
|
||||||
identifier = "photos_m"
|
identifier = "photos_m"
|
||||||
name = "photo gallery (masonry)"
|
name = "photo gallery (masonry)"
|
||||||
|
|
|
@ -3,10 +3,25 @@ title: "All the cool photos live here"
|
||||||
date: 2019-02-11T18:25:55-08:00
|
date: 2019-02-11T18:25:55-08:00
|
||||||
---
|
---
|
||||||
|
|
||||||
This is a photo gallery demo project for Netlify Large Media made with the photos from [Unsplash](https://unsplash.com/) and Hugo.
|
This is a photo gallery demo project for Netlify Large Media made with the photos from [Unsplash](https://unsplash.com/) and [Hugo](https://gohugo.io/).
|
||||||
|
|
||||||
You can browse the code for this site on [GitHub](https://github.com/netlify/netlify-photo-gallery/). This project has two branches:
|
You can browse the code for this site on [GitHub](https://github.com/netlify/netlify-photo-gallery/). This project has two branches:
|
||||||
|
|
||||||
**[master](https://github.com/netlify/netlify-photo-gallery/)**: A photo gallery that _doesn't use_ Netlify Large Media feature. You can go to [README](https://github.com/netlify/netlify-photo-gallery/blob/master/README.md) to see how you can deploy this with your Netlify account and start using Large Media feature.
|
**[master](https://github.com/netlify/netlify-photo-gallery/)**: A photo gallery that _doesn't use_ Netlify Large Media feature. You can go to [README](https://github.com/netlify/netlify-photo-gallery/blob/master/README.md) to see how you can deploy this with your Netlify account and start using Large Media feature.
|
||||||
|
|
||||||
**[large-media-sample](https://github.com/netlify/netlify-photo-gallery/tree/large-media-sample)**: A photo gallery that uses Netlify Large Media feature. You can go to a [static/images](https://github.com/netlify/netlify-photo-gallery/tree/large-media-sample/static/images) folder to see how large media assets are managed with Git. This branch is deployed as [https://netlify-photo-gallery.netlify.com/](https://netlify-photo-gallery.netlify.com/) demo page.
|
**[large-media-sample](https://github.com/netlify/netlify-photo-gallery/tree/large-media-sample)**: A photo gallery that uses Netlify Large Media feature. You can go to a [static/images](https://github.com/netlify/netlify-photo-gallery/tree/large-media-sample/static/images) folder to see how large media assets are managed with Git. This branch is deployed as [https://netlify-photo-gallery.netlify.com/](https://netlify-photo-gallery.netlify.com/) demo page.
|
||||||
|
|
||||||
|
### How to start using this?
|
||||||
|
|
||||||
|
If you want to try deploying your photo gallery, please go to the [README](https://github.com/netlify/netlify-photo-gallery/blob/master/README.md) for how to do it.
|
||||||
|
|
||||||
|
If you want to contribute to the existing photo gallery site _that you have an access to (note: you don't have an access to https://netlify-photo-gallery.netlify.com/ unless you work for Netlify!)_, you can check out [Contributing to a repository with Large Media enabled](https://www.netlify.com/docs/large-media/#contributing-to-a-repository-with-large-media-enabled) documentation for how to prepare.
|
||||||
|
|
||||||
|
Here is how to add some photos to the gallery:
|
||||||
|
|
||||||
|
1. Add some images in `static/images` folder, and the info to `data/photos.json`
|
||||||
|
* You can check which files/suffix are currently tracked by checking `.gitattributes` file
|
||||||
|
2. Once it's done, you can `git add`, `git commit`, then `git push` to push them to Netlify/Large Media!
|
||||||
|
3. By running `git lfs ls-files`, you can double check which files are managed by Large Media.
|
||||||
|
|
||||||
|
With Netlify Large Media, you can do a cool thing like image transformation. You can see the [documentation](https://www.netlify.com/docs/image-transformation/) for more detail.
|
|
@ -1,36 +0,0 @@
|
||||||
---
|
|
||||||
title: "Contribute"
|
|
||||||
date: 2019-02-11T18:16:19-08:00
|
|
||||||
---
|
|
||||||
|
|
||||||
## Before starting
|
|
||||||
|
|
||||||
This contribution guide only works **after** you enabled the Large Media feature for the site. To enable the Large Media feature, please take a look [README](https://github.com/netlify/netlify-photo-gallery/blob/master/README.md).
|
|
||||||
|
|
||||||
## How to contribute
|
|
||||||
|
|
||||||
### Initial setup
|
|
||||||
|
|
||||||
1. Install the latest version of Netlify’s CLI with `npm install netlify-cli -g`
|
|
||||||
2. Install Git LFS if you haven’t already: https://git-lfs.github.com/
|
|
||||||
* You can check to see if you have it installed with `git lfs version`
|
|
||||||
3. Install CLI plugin for Large Media: `netlify plugins:install netlify-lm-plugin`
|
|
||||||
4. Run `netlify lm:install` to setup the local environment
|
|
||||||
* This command will install things like Netlify's Git Credential helper, if it's not installed already
|
|
||||||
* Watch for the banner upon completion, then run the designated command to use Large Media in your current shell
|
|
||||||
5. Clone the repository of your photo gallery
|
|
||||||
* By default, if the setup is done correctly, this will clone/download all the original assets too
|
|
||||||
* If you _don't_ want to download assets, you can add `GIT_LFS_SKIP_SMUDGE=1` in front of the `git clone` command
|
|
||||||
6. Link the repository to Netlify site by running: `netlify init`
|
|
||||||
|
|
||||||
### Actually playing with it
|
|
||||||
|
|
||||||
1. Add some images in `static/images` folder, and the info to `data/photos.json`
|
|
||||||
* You can check which files/suffix are currently tracked by checking `.gitattributes` file
|
|
||||||
2. Once it's done, you can `git add`, `git commit`, then `git push` to push them to Netlify/Large Media!
|
|
||||||
3. By running `git lfs ls-files`, you can double check which files are managed by Large Media.
|
|
||||||
|
|
||||||
### Caveats
|
|
||||||
|
|
||||||
* Maybe there is a new Netlify Git Credential helper released, please run `netlify lm:install` to update things
|
|
||||||
* Above is "how to contribute to the sites that are already using Netlify Large Media", so "how to use Large Media with my site" will be a bit different (see README or official doc for more information)
|
|
Loading…
Add table
Reference in a new issue