Update readme instructions for css and images

The instructions should be changed to properly reflect the way css and
images are handled in the configuration.

At the moment the instructions reference css and png files being
handled via templateFormats, but in reality they're configured to be
located in special css and img directories and handled via
addPassthroughCopy().
This commit is contained in:
Andrei Stoicescu 2021-06-03 20:10:08 +03:00
parent c10b171a40
commit 2145a3169c

View File

@ -6,16 +6,16 @@ A starter repository showing how to build a blog with the [Eleventy](https://git
## Demos ## Demos
* [Netlify](https://eleventy-base-blog.netlify.com/) - [Netlify](https://eleventy-base-blog.netlify.com/)
* [GitHub Pages](https://11ty.github.io/eleventy-base-blog/) - [GitHub Pages](https://11ty.github.io/eleventy-base-blog/)
* [Remix on Glitch](https://glitch.com/~11ty-eleventy-base-blog) - [Remix on Glitch](https://glitch.com/~11ty-eleventy-base-blog)
## Deploy this to your own site ## Deploy this to your own site
These builders are amazing—try them out to get your own Eleventy site in a few clicks! These builders are amazing—try them out to get your own Eleventy site in a few clicks!
* [Get your own Eleventy web site on Netlify](https://app.netlify.com/start/deploy?repository=https://github.com/11ty/eleventy-base-blog) - [Get your own Eleventy web site on Netlify](https://app.netlify.com/start/deploy?repository=https://github.com/11ty/eleventy-base-blog)
* [Get your own Eleventy web site on Vercel](https://vercel.com/import/project?template=11ty%2Feleventy-base-blog) - [Get your own Eleventy web site on Vercel](https://vercel.com/import/project?template=11ty%2Feleventy-base-blog)
## Getting Started ## Getting Started
@ -25,7 +25,6 @@ These builders are amazing—try them out to get your own Eleventy site in a few
git clone https://github.com/11ty/eleventy-base-blog.git my-blog-name git clone https://github.com/11ty/eleventy-base-blog.git my-blog-name
``` ```
### 2. Navigate to the directory ### 2. Navigate to the directory
``` ```
@ -40,7 +39,7 @@ Specifically have a look at `.eleventy.js` to see if you want to configure any E
npm install npm install
``` ```
### 4. Edit _data/metadata.json ### 4. Edit \_data/metadata.json
### 5. Run Eleventy ### 5. Run Eleventy
@ -49,30 +48,33 @@ npx eleventy
``` ```
Or build and host locally for local development Or build and host locally for local development
``` ```
npx eleventy --serve npx eleventy --serve
``` ```
Or build automatically when a template changes: Or build automatically when a template changes:
``` ```
npx eleventy --watch npx eleventy --watch
``` ```
Or in debug mode: Or in debug mode:
``` ```
DEBUG=* npx eleventy DEBUG=* npx eleventy
``` ```
### Implementation Notes ### Implementation Notes
* `about/index.md` shows how to add a content page. - `about/index.md` shows how to add a content page.
* `posts/` has the blog posts but really they can live in any directory. They need only the `post` tag to be added to this collection. - `posts/` has the blog posts but really they can live in any directory. They need only the `post` tag to be added to this collection.
* Add the `nav` tag to add a template to the top level site navigation. For example, this is in use on `index.njk` and `about/index.md`. - Add the `nav` tag to add a template to the top level site navigation. For example, this is in use on `index.njk` and `about/index.md`.
* Content can be any template format (blog posts neednt be markdown, for example). Configure your supported templates in `.eleventy.js` -> `templateFormats`. - Content can be any template format (blog posts neednt be markdown, for example). Configure your supported templates in `.eleventy.js` -> `templateFormats`.
* Because `css` and `png` are listed in `templateFormats` but are not supported template types, any files with these extensions will be copied without modification to the output (while keeping the same directory structure). - The `css` and `png` directories in the input directory are going to be copied without modification to the output, because they're passed to `addPassthroughCopy()`.
* The blog post feed template is in `feed/feed.njk`. This is also a good example of using a global data files in that it uses `_data/metadata.json`. - The blog post feed template is in `feed/feed.njk`. This is also a good example of using a global data files in that it uses `_data/metadata.json`.
* This example uses three layouts: - This example uses three layouts:
* `_includes/layouts/base.njk`: the top level HTML structure - `_includes/layouts/base.njk`: the top level HTML structure
* `_includes/layouts/home.njk`: the home page template (wrapped into `base.njk`) - `_includes/layouts/home.njk`: the home page template (wrapped into `base.njk`)
* `_includes/layouts/post.njk`: the blog post template (wrapped into `base.njk`) - `_includes/layouts/post.njk`: the blog post template (wrapped into `base.njk`)
* `_includes/postlist.njk` is a Nunjucks include and is a reusable component used to display a list of all the posts. `index.njk` has an example of how to use it. - `_includes/postlist.njk` is a Nunjucks include and is a reusable component used to display a list of all the posts. `index.njk` has an example of how to use it.