From 2145a3169ca212ed3e3f3203a972bc51947517b4 Mon Sep 17 00:00:00 2001 From: Andrei Stoicescu Date: Thu, 3 Jun 2021 20:10:08 +0300 Subject: [PATCH] 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(). --- README.md | 38 ++++++++++++++++++++------------------ 1 file changed, 20 insertions(+), 18 deletions(-) diff --git a/README.md b/README.md index fb7724c..a9c1c97 100644 --- a/README.md +++ b/README.md @@ -6,16 +6,16 @@ A starter repository showing how to build a blog with the [Eleventy](https://git ## Demos -* [Netlify](https://eleventy-base-blog.netlify.com/) -* [GitHub Pages](https://11ty.github.io/eleventy-base-blog/) -* [Remix on Glitch](https://glitch.com/~11ty-eleventy-base-blog) +- [Netlify](https://eleventy-base-blog.netlify.com/) +- [GitHub Pages](https://11ty.github.io/eleventy-base-blog/) +- [Remix on Glitch](https://glitch.com/~11ty-eleventy-base-blog) ## Deploy this to your own site 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 Vercel](https://vercel.com/import/project?template=11ty%2Feleventy-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) ## 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 ``` - ### 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 ``` -### 4. Edit _data/metadata.json +### 4. Edit \_data/metadata.json ### 5. Run Eleventy @@ -49,30 +48,33 @@ npx eleventy ``` Or build and host locally for local development + ``` npx eleventy --serve ``` Or build automatically when a template changes: + ``` npx eleventy --watch ``` Or in debug mode: + ``` DEBUG=* npx eleventy ``` ### Implementation Notes -* `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. -* 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 needn’t 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 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: - * `_includes/layouts/base.njk`: the top level HTML structure - * `_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/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. +- `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. +- 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 needn’t be markdown, for example). Configure your supported templates in `.eleventy.js` -> `templateFormats`. +- 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`. +- This example uses three layouts: + - `_includes/layouts/base.njk`: the top level HTML structure + - `_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/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.