my blooooooooooooog #

Forked and mod­i­fied upon 11ty/eleventy-base-blog

• Netlify
• GitHub Pages
• Remix on Glitch

Deploy this to your own site #

These builders are amaz­ing—try them out to get your own Eleventy site in a few clicks!

• Get your own Eleventy web site on Netlify
• Get your own Eleventy web site on Vercel

Getting Started #

1. Clone this Repository #

git clone https://github.com/11ty/eleventy-base-blog.git my-blog-name

2. Navigate to the di­rec­tory #

cd my-blog-name

Specifically have a look at .eleventy.js to see if you want to con­fig­ure any Eleventy op­tions dif­fer­ently.

3. Install de­pen­den­cies #

npm install

4. Edit _data/metadata.json #

5. Run Eleventy #

npx eleventy

Or build and host lo­cally for lo­cal de­vel­op­ment

npx eleventy --serve

Or build au­to­mat­i­cally when a tem­plate changes:

npx eleventy --watch

Or in de­bug mode:

DEBUG=* npx eleventy

Implementation Notes #

• about/index.md shows how to add a con­tent page.
• posts/ has the blog posts but re­ally they can live in any di­rec­tory. They need only the post tag to be added to this col­lec­tion.
• Add the nav tag to add a tem­plate to the top level site nav­i­ga­tion. For ex­am­ple, this is in use on index.njk and about/index.md.
• Content can be any tem­plate for­mat (blog posts need­n’t be mark­down, for ex­am­ple). Configure your sup­ported tem­plates in .eleventy.js -> templateFormats.
  • Because css and png are listed in templateFormats but are not sup­ported tem­plate types, any files with these ex­ten­sions will be copied with­out mod­i­fi­ca­tion to the out­put (while keep­ing the same di­rec­tory struc­ture).
• The blog post feed tem­plate is in feed/feed.njk. This is also a good ex­am­ple of us­ing a global data files in that it uses _data/metadata.json.
• This ex­am­ple uses three lay­outs:
  • _includes/layouts/base.njk: the top level HTML struc­ture
  • _includes/layouts/home.njk: the home page tem­plate (wrapped into base.njk)
  • _includes/layouts/post.njk: the blog post tem­plate (wrapped into base.njk)
• _includes/postlist.njk is a Nunjucks in­clude and is a reusable com­po­nent used to dis­play a list of all the posts. index.njk has an ex­am­ple of how to use it.