Skip to content
Set up simple eleventy Design System site
1. Copy eleventy file, package.json and rollup.config.js files into the root folder
.eleventy.js
(optimize eleventy.js file to use necessary files and folders based on your site's structure and architecture if necessary).
module.exports = function (eleventyConfig) {
// Markdown configurarion
const md = new markdownIt({
html: true
});
// Copy `src/fonts/` to `_site/fonts`, `src/images/` to `_site/images`
eleventyConfig.addPassthroughCopy({
"src/fonts": "fonts",
"src/images": "images"
});
// site crawler
eleventyConfig.addPassthroughCopy('robots.txt');
// site icon
eleventyConfig.addPassthroughCopy('favicon.ico');
// sitemap
eleventyConfig.addPassthroughCopy('sitemap.xml');
// web.config
eleventyConfig.addPassthroughCopy('web.config');
// Markdown rendering onfigurarion
eleventyConfig.addPairedShortcode("markdown", (content) => {
return md.render(content);
});
return {
dir: {
// site content pages
input: "pages",
data: "../src/_data",
// site structure pages (path is realtive to input directory)
includes: "../src/_includes",
layouts: "../src/_includes/layouts",
// site final outpuut directory
output: "_site",
},
};
};
package.json
(Optimize package.json file to use necessary files and folders based on your site's structure and architecture if necessary.
{
"name": "your-name",
"version": "0.0.1",
"description": "your website's description",
"scripts": {
"watch:js": "rollup --config rollup.config.js --watch",
"watch:eleventy": "npx @11ty/eleventy --serve",
"watch:sass": "npx sass --no-source-map src/scss/index.scss:_site/css/ds-core.css --watch",
"build:js": "rollup --config rollup.config.js",
"build:eleventy": "npx @11ty/eleventy",
"build:sass": "npx sass --no-source-map src/scss/index.scss:_site/css/ds-core.css",
"start": "npm run watch:eleventy & npm run watch:sass & npm run watch:js",
"build": "npm run build:eleventy & npm run build:js & npm run build:sass"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@11ty/eleventy": "^1.0.0",
"rollup": "^2.52.2",
"rollup-plugin-import-css": "^2.0.1",
"rollup-plugin-terser": "^7.0.2",
"sass": "^1.38.1"
},
"dependencies": {
"@cagov/ds-accordion": "^2.0.3",
"@cagov/ds-back-to-top": "^2.0.2",
"@cagov/ds-base-css": "^1.0.19",
"@cagov/ds-feature-card": "^2.0.0",
"@cagov/ds-icons": "^0.0.1",
"@cagov/ds-link-grid": "^3.0.0",
"@cagov/ds-link-icon": "^2.0.0",
"@cagov/ds-page-alert": "^2.0.2",
"@cagov/ds-page-navigation": "^2.2.0",
"@cagov/ds-site-footer": "^2.0.0",
"@cagov/ds-site-header": "^2.0.0",
"@cagov/ds-site-navigation": "^3.0.0",
"@cagov/ds-skip-to-content": "^2.0.0",
"@cagov/ds-statewide-footer": "^2.0.0",
"@cagov/ds-statewide-header": "^2.0.0",
"@cagov/ds-step-list": "^3.0.0",
"markdown-it": "^12.3.2"
}
}
Optimize rollup.config.js file to use necessary files and folders based on your site's structure and architecture if necessary.)
import { terser } from "rollup-plugin-terser";
export default [
{
input: 'src/js/index.js',
output: [
{
file: '_site/js/ds-core.min.js',
format: 'iife',
plugins: [terser()]
}
],
onwarn: function (warning) {
// should intercept warnings but doesn't in some rollup versions
if (warning.code === 'THIS_IS_UNDEFINED') { return; }
// console.warn everything else
console.warn(warning.message);
}
}
];
2. Create necessary folder structure and architecture add structure include files
Add nunjucks includes which are site's shell structure files into /src/_includes/ folder. Copy and paste the source code from each corresponding structural component from the Design System website
/src/_includes/analytics.njk
/src/_includes/head-js-css.njk
/src/_includes/skip-to-content.njk
/src/_includes/statewide-header.njk
/src/_includes/site-header.njk
/src/_includes/site-navigation.njk
/src/_includes/site-footer.njk
/src/_includes/back-to-top.njk
/src/_includes/statewide-footer.njk
3. Add layouts files such as base.njk and additional layout options files Into /src/_includes/_layouts/ folder
/src/_includes/_layouts/base.njk
(optimize base.njk structure and bode accordion to your website's needs if necessary)
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>{{ title }}</title>
<meta name="Author" content="Office of Digital Innovation" />
<meta name="Description" content="California Design Sistem" />
<meta name="Keywords" content="California Design System" />
{% include "../head-js-css.njk" %}
{% include "../analytics.njk" %}
</head>
<body>
{% include "../skip-to-content.njk" %}
<header class="header-container">
{% include "../statewide-header.njk" %}
{% include "../site-header.njk" %}
{% include "../site-navigation.njk" %}
</header>
{% block content %}
{{ content | safe }}
{% endblock %}
<div class="footer-container">
{% include "../site-footer.njk" %}
<footer>
{% include "../back-to-top.njk" %}
{% include "../statewide-footer.njk" %}
</footer>
</div>
</body>
</html>
/src/_includes/_layouts/landing.njk
Landing page layout option
{% extends "./base.njk" %}
{% block content %}
<div id="page-container" class="page-container-ds">
<div id="main-content" class="single-column landing">
<main id="body-content">
{{ content | safe }}
</main>
</div>
</div>
{% endblock %}
/src/_includes/_layouts/page.njk
Regular page layout option:
/src/_includes/_layouts/page.njk
{% extends "./base.njk" %}
{% block content %}
<div id="page-container" class="page-container-ds">
<div id="main-content" class="single-column">
<main id="body-content">
{{ content | safe }}
</main>
</div>
</div>
{% endblock %}
4. Run npm install
In your terminal run this command:
npm install
5. Install Design System components
In your terminal run these commands:
npm i @cagov/ds-statewide-header
npm i @cagov/ds-site-header
npm i @cagov/ds-statewide-footer
npm i @cagov/ds-site-footer
npm i @cagov/ds-back-to-top
npm i @cagov/ds-link-icon
npm i @cagov/ds-page-navigation
npm i @cagov/ds-site-navigation
npm i @cagov/ds-skip-to-content
npm i @cagov/ds-base-css
npm i @cagov/ds-icons
npm i @cagov/ds-accordion
npm i @cagov/ds-feature-card
npm i @cagov/ds-link-grid
npm i @cagov/ds-page-alert
npm i @cagov/ds-step-list
6. Add import paths to DS components' scss and js files into global index.scss and index.js
/src/scss/index.scss
Optimize your index.scss file if necessary. Please note, that there are optional custom.scss and colorscheme.scss imports are added.
/* base css */
@import "../../node_modules/@cagov/ds-base-css/src/themes/_cagov.scss";
/* structural */
@import "../../node_modules/@cagov/ds-site-footer/src/index.scss";
@import "../../node_modules/@cagov/ds-site-header/src/index.scss";
@import "../../node_modules/@cagov/ds-statewide-footer/src/index.scss";
@import "../../node_modules/@cagov/ds-statewide-header/src/index.scss";
/* components */
@import "../../node_modules/@cagov/ds-feature-card/src/index.scss";
@import "../../node_modules/@cagov/ds-icons/src/icon-font.scss";
@import "../../node_modules/@cagov/ds-link-grid/src/index.scss";
@import "../../node_modules/@cagov/ds-step-list/src/index.scss";
/* navigation */
@import "../../node_modules/@cagov/ds-site-navigation/src/index.scss";
@import "../../node_modules/@cagov/ds-skip-to-content/src/index.scss";
/* optional custom */
@import "custom.scss";
/* optional color scheme */
@import "colorscheme.scss";
/src/js/index.js
Optimize your index.js file if necessary
/* Design System JS */
import '../../node_modules/@cagov/ds-accordion/dist/index.js'; /* css is included in the JS */
import '../../node_modules/@cagov/ds-site-navigation/src/index.js';
import '../../node_modules/@cagov/ds-page-navigation/dist/index.js'; /* css is included in the JS */
import '../../node_modules/@cagov/ds-page-alert/dist/index.js'; /* css is included in the JS */
import '../../node_modules/@cagov/ds-link-icon/dist/index.js'; /* css is included in the JS*/
import '../../node_modules/@cagov/ds-back-to-top/dist/index.js'; /* css is included in the JS */
7. Add index.html landing page
/pages/index.html
Please note, that you can use any available layout option
---
title: Your website page title
layout: landing.njk
---
<h1>Welcome to the Design System website</h1>
8. Build the site
Use following command in your terminal
npm run build
9. View your site locally
Use following command in your terminal
npm run start
http://localhost:8080/
Want to print your doc?
This is not the way.
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.