Skip to content
Web Development
Web Development
Web development process
Set up simple eleventy Design System site
More
Share
Explore

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"
}
}
⁠
⁠
rollup.config.js
⁠
⁠
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',
Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.