Your Web News in One Place

An Interest In:

Web News this Week

Search Archive

Some of Our Sources

View All Sources

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
August 5, 2020 03:09 am GMT

Adding blog functionality to a static Eleventy (11ty) website

In a previous article I covered setting up a simple site with Eleventy.

This article will show you how to add blog functionality (display a list of posts in reverse chronological order).

Lets get started by creating a project folder and installing Eleventy if you havent already done so:

mkdir eleventy-blogcd eleventy-blognpm init -ynpm install --save-dev @11ty/eleventy

Next well setup the default layout by creating an _includes folder with a default-layout.njk file:

---title: "Eleventy Blog"---<!doctype html><html lang="en">  <head>    <meta charset="utf-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>{{ title }}</title>  </head>  <body>    {{ content | safe }}     </body></html>

Each of the blog posts will be saved as a individual markdown file in a folder called blog.

Here is an example of a blog post markdown file for reference saved as /blog/hello-world.md:

---layout: default-layout.njk tags: ['blog']title: Hello Worlddate: 2020-01-01teaser: This is the first blog post titled "Hello World"!---# Hello WorldThis is the first blog post!
  • layout: Specifies the layout file to be used.
  • tags: Creates a content collection with all other files that also contain a blog tag.
  • title: Displayed in the list of blog posts well create next and in the <title> tag.
  • date: Will be used to sort the blogs posts from newest to oldest.
  • teaser: Optional short teaser text that will be displayed underneath the title in the blog feed.

Blog posts can also be created in HTML markup instead of markdown if you prefer /blog/hello-world.html:

---layout: default-layout.njk tags: ['blog']title: Hello Worlddate: 2020-01-01teaser: This is the first blog post titled "Hello World"!---<h1>Hello World</h1><p>This is the first blog post!</p>.

Now we can create a index.njk file that will load our collection of blog posts:

---layout: default-layout.njkpagination:  data: collections.blog  size: 10  alias: blog---<ul>  {%- for post in collections.blog | reverse -%}    <li>      <h3><a href="{{ post.url | url }}">{{ post.data.title }}</a> | {{ post.date }}</h3>      {% if post.data.teaser %}        <p>{{ post.data.teaser }}</p>      {% endif %}     </li>  {%- endfor -%}</ul>
  • data: Gets all posts in the blog collection (tags: ['blog']).
  • size: Limits the number of blog posts displayed to 10.
  • alias: Used to construct the URL for individual blog posts e.g: /blog/hello-world/.

Let's run Eleventy and check that everything is working as expected:

npx @11ty/eleventy --serve

In the browser you should see a list of the blog posts you created:

Alt Text

Youll notice the date isnt formatted in a way that is particularly easy to read.

To format the date in a more readable format well install the eleventy-plugin-date plugin:

npm install --save-dev eleventy-plugin-date

We then need to load the plugin in the config file .eleventy.js (create in the project root if you havent already):

const pluginDate = require("eleventy-plugin-date");module.exports = function (eleventyConfig) {  eleventyConfig.addPlugin(pluginDate);};

Then change the date output in index.njk as follows and it will be displayed in a more readable format:

{{ post.date | readableDate }}

That concludes the setup of basic blog functionality with Eleventy I hope you found it useful.


Original Link: https://dev.to/michaelburrows/adding-blog-functionality-to-a-static-eleventy-11ty-website-2fbk

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To