Get started
With the GOV.UK Eleventy Plugin, start writing documentation rather than spend time building a website.
You can use this plugin to create and publish documentation and other simple websites for users in government.
This plugin includes the following features:
-
a set of layouts that use
govuk-frontend
components and styles -
includes
markdown-it-govuk
to ensure pages uses the same typography and styles as those used on GOV.UK -
support for an extended Markdown syntax
-
full configuration of your website’s header and footer
-
site search
-
SCSS compilation (for any files with the
.scss
extension)
Requirements
Node version manager is recommended if you are working across multiple projects that use different versions of Node.js.
Installation
To install both Eleventy and this plugin, in your terminal type:
npm install @11ty/eleventy @x-govuk/govuk-eleventy-plugin
Next, add an eleventy.config.js
file to the root directory of your project. This file is used to configure Eleventy.
const govukEleventyPlugin = require('@x-govuk/govuk-eleventy-plugin')
module.exports = function(eleventyConfig) {
// Register the plugin
eleventyConfig.addPlugin(govukEleventyPlugin)
return {
dataTemplateEngine: 'njk',
htmlTemplateEngine: 'njk',
markdownTemplateEngine: 'njk',
dir: {
// Use layouts from the plugin
layouts: 'node_modules/@x-govuk/govuk-eleventy-plugin/layouts'
}
}
};
To generate a site, type the following command:
npx eleventy --serve
Once all the files have been generated, a preview URL will be shown which you can enter into your browser’s address bar:
[11ty] Copied 14 files / Wrote 0 files in 1.11 seconds (v2.0.0)
[11ty] Watching…
[11ty] Server at http://localhost:8080/
Whenever you add a new page, or edit an existing one, the browser will automatically refresh with any of your changes applied.
Create your first page
You’re now ready to start adding pages to your site.
Pages are made up of 2 parts: a front matter and its contents.
A front matter starts and ends with ---
and is written using a key/value data format called YAML. In most cases, you will only need 2 bits of information: layout
and title
. For example:
homepage: true
layout: page
title: My first page
This is my first page, built using Eleventy and `@x-govuk/govuk-eleventy-plugin`.
Create a file named index.md
file to the root directory of your project, and add the above content.
The first page in your site should also have a homepage
value set to true
1. This is used to work out the structure of your site if it has nested pages.
Open the preview URL in your browser to see this new page appear using GOV.UK styles.
Choose a layout
This plugin provides 5 different layouts, each with different options you can provide in the front matter:
-
Page – Simple layout designed for maximum flexibility of content.
-
Page with sub navigation – Layout with sub navigation.
-
Post – Layout for date-based content, such as blog posts or news items.
-
Collection – Layout for a paginated list of pages.
-
Product page – Layout for a product or marketing page based on the Product Page Example.