Brian's Website

Made a Base Template with CSS, Header, and Footer

This makes a template that will be used for most pages. This also adds CSS, a header, and a footer to all pages that use the template.

  1. Made folder /src/css
  2. Made simple.css file and added Simple CSS from https://cdn.simplecss.org/simple.css.
  3. In .eleventy.js added a passthrough for CSS under module.exports, above return:
// Passthroughs
eleventyConfig.addPassthroughCopy('./src/css/');
  1. Made folder /src/_includes/layouts.
  2. Made layout file base.njk in /layouts and added HTML5 boilerplate.
  3. In the <head></head> of base.njk in <title></title> replaced Document with Brian's Website.
  4. In the <body></body> of base.njk, added <header></header>, <main></main>, and <footer></footer>.
  5. In <main></main> added {{ content | safe }}.[1]
  6. In index.md, added front matter:
---
title: Home
layout: /layouts/base
---
  1. Made folder /_includes/partials.
  2. In /partials made header.html with <h1>Brian's Website</h1>.
  3. In /partials made footer.html with "Made with ☕ and ⌨️ by Brian"
  4. Included header.html and footer.html in base.njk with {% include "partials/FILENAME.html" %}.

Footnotes

  1. To make code with curly brackets display correctly and not make an error, put the code between {% raw %} and {% end‌raw %}. ↩