Static websites are gaining popularity among web developers these days.
They have several advantages. Consists of HTML files, which means they can be quickly deployed to web servers. Static websites are very scalable – have a small web server usage footprint, and do not require databases.
Summary
In this tutorial, we will build a static website using Markdown syntax for content and an Eleventy (11ty) static site generator to generate static HTML files.
Prerequisites: you will need Nodejs runtime installed on your dev machine to follow the steps in this tutorial. At the bottom of this page, we share the link to the full project source code on GitHub.
A static website will have 5 pages, a lean CSS design, tags, a dynamic sitemap and a dynamic RSS feed.
Initialize the project
Create a dedicated working directory go to it and run the below npm commands.
npm init -y
npm install @11ty/eleventy --save
npx @11ty/eleventy
output: [11ty] Wrote 0 files in 0.03 seconds (v3.0.0)
The first command creates a file package.json that serves as a descriptor/metadata file for our project.
The next line installs the 11ty npm package. The third command runs the Eleventy static site generator in the directory, to test.
You see that 11ty generated exactly 0 HTML files.
This is because we have no Markdown files or any other files available in a directory yet. Let’s create a page called about.md and add the following Markdown syntax code
# About
This is a lean static web site, powered by [11ty static site generator](https://www.11ty.dev/).
It's created as an example source code for tutorial.
## Useful links
- [Blog posts](/blog/)
- [About](/about/)
Now you can run 11ty again, and this Markdown file will be converted to an HTML file. By default, an HTML file will be created in _site directory.
npx @11ty/eleventy --serve
[11ty] Writing ./_site/about/index.html from ./about.md (liquid)
[11ty] Wrote 1 file in 0.11 seconds (v3.0.0)
[11ty] Watching…
[11ty] Server at http://localhost:8080/
Notice, this time we added --serve flag, which tells 11ty to not only generate static files but also start a local web server so we can test the newly generated static website.
Structure
Next, we will define the structure of our static website project.
Add a file called .eleventy.js to your directory. This is a configuration file for 11ty generator where we specify the structure of our project.
// 11ty setup
module.exports = function(eleventyConfig) {
return {
dir: {
input: 'content',
includes: '_includes',
output: 'dist'
},
markdownTemplateEngine: 'njk',
htmlTemplateEngine: 'njk',
dataTemplateEngine: 'njk'
};
};
In dir object, within this JSON file we define 3 directories: the input directory – where our website files should be located. Files in this directory will be converted by an 11ty generator.
The output directory defines where the generator will create HTML files.
And includes element defines the directory for files that we use for creating web page layouts.
The last 3 elements instruct 11ty to use njk or Nunjucks to be used as a templating language.
As we configured 11ty to look for source files in a content directory – therefore we need to create this directory in the project. Move the about.md file we created earlier to this dir.
Next, we create index.md which will be our home page. Then we create blog-post-a.md, blog-post-b.md, blog-post-c.md pages to represent blog posts. Add any example Markdown text in them – this can change it later.
You can use this random Markdown text generator to create some example content.
Your directory structure should now look like this
/
└── 11ty-static-website
├── content
│ ├── about.md
│ ├── index.md
│ └── blog
│ ├── blog-post-a.md
│ ├── blog-post-b.md
│ └── blog-post-c.md
├── .eleventy.js
└── package.json
Run the same 11ty build command as before and you should see the below results
npx @11ty/eleventy --serve
[11ty] Writing ./dist/about/index.html from ./content/about.md (njk)
[11ty] Writing ./dist/index.html from ./content/index.md (njk)
[11ty] Writing ./dist/blog/blog-post-a/index.html from ./content/blog/blog-post-a.md (njk)
[11ty] Writing ./dist/blog/blog-post-b/index.html from ./content/blog/blog-post-b.md (njk)
[11ty] Writing ./dist/blog/blog-post-c/index.html from ./content/blog/blog-post-c.md (njk)
[11ty] Wrote 5 files in 0.17 seconds (v3.0.0)
[11ty] Watching…
[11ty] Server at http://localhost:8080/
Includes
11ty site generator allows us to create templates of website pages.
The concept of layouts lets one webpage include other web pages as layouts. We are going to create a header, footer, and base layout for our site.
Create the _includes a directory within the contents folder. In this directory create a file called base.njk with the following template.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<!-- charset / viewport -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ title }}</title>
<meta name="description" content="{{ description }}">
<link rel="canonical" href="{{ page.url }}">
</head>
<body>
<!-- content -->
<main id="content">{{ content | safe }}</main>
</body>
</html>Every web page that references this template will be wrapped with this layout. A template is created in Nunjucks templating syntax – remember earlier we added this in 11ty configuration.
The items within {{}} are Nunjucks variables.
We are going to create them within the actual Markdown pages. Some variables as {{ page.url }} are provided to us by 11ty itself.
Now we have to reference this template. Open index.md file and add the following very top of the Markdown page
---
layout: base.njk
title: Minimal static 11ty website
description: Minimal static 11ty website which serves as skeleton project for larger web projects
---
Notice the layout value, as well as the title and description variables.
Now if you run the 11ty generator again and check the index HTML pages generated – you will have HTML markup from the template in index page. But not in others.
Next Steps
At this stage, we have our project structured and all content pages created. With simple templating.
But we still need to add CSS styling to web pages. And add some dynamically generated files like sitemap and RSS feeds.
In the next part of the tutorial, we will cover CSS styles, more advanced templating, dynamically generated sitemap, and RSS feed.
You can find the full source code for the finished 11ty static website project on GitHub.
Post Your Comment