Instructions

Part 1: Install Eleventy

1. Open terminal in VSCode.
2. Open terminal
3. Type npm init
4. Type npm install @11ty/eleventy
5. Go to package.json and locate the scripts element
6. Replace "test": "echo \"Error: no test specified\" && exit 1" with "start": "eleventy --serve", "build": "eleventy"
   • Rewrites the command that enables launching a local server with hot reload (automatic updates to live server while making changes to the code)
7. In the root folder, create .eleventy.js
   • helps to customize many elements of the repo such as input and output folders.
8. In .eleventy.js type module.exports = function (eleventyConfig){ return { dir: { input: "src", output: "public", }, }; }; which makes the src folder the one where the codes is edited and public folder the one that is deployed.

Part 2: Create a Site

9. In root directory, create a folder called src. This will be a directory.
10. Inside src, create a file called index.html.
11. Add some boilerplate HTML content.
12. Back in the command line, run the start command npm start. Click the local host:8000 link that appears.
13. Return to the code editor. Inside the src folder, create the file css/style.css. This will create a folder with a stylesheet.
14. Inside style.css add some boilerplate CSS of choice.
15. Go back to index.html and a link to the stylesheet in the head element like so: <link rel="stylesheet" href="css/style.css">. While this would have applied the stylesheet, at the time of the video tutorial and writing this, Eleventy requires one more step.
16. Go to .eleventy.js (the config file) and add right below module.exports = function (eleventyConfig){ add the following two lines eleventyConfig.addPassthroughCopy("./src/css/"); eleventyConfig.addWatchTarget("./src/css/");. If the file doesn't update, killing the terminal and starting up another server could fix it.

Part 3: Templates

16. In the src directory, create another directory called _includes/base.njk which will hold all website files. 16.5 If Nunjucks Emmet isn't working on your editor, download a Nunjucks extension and on the settings.json add code. You can also try changing the language the editor autodetects to HTML instead. Check this tip.
17. On base.njk, add some boiler plate HTML. Link the stylesheet on the head element like before. Inside the body tags, the following:

<header> <h1>{{ title }}</h1> </header> <main> <article> {{ content | safe }} </article> </main> <footer> <p>&copy; 2021 Arima Mary</p> </footer>. Additionally, change the text inside the title tag inside the head tag for {{ title }}.

18. Go to index.html and change it's extension to Mardown such that the file becomes index.md. Then, add the following at the top of the file,

---

title: Base Eleventy Project

layout: base.njk

---

and replace the rest of the content inside the content inside the body tag with Markdown syntax. This is YAML frontmatter. The first line adds a title to the page and the second applies the layout described in base.njk plus stylesheet.

19. In the src directory, create the folder pages and the file page.njk separately.

20. Inside page.njk, paste the following: --- layout: base.njk ---

{{ content | safe }}

21. Inside pages directory, create the files page-one.md and page-two.md.

22. In both pages, add the following content:

--- title: Page (One/Two) ---

This is the (first/second) page

23. To add a layout to all files without repeating the frontmatter in the pages directory, create a file called pages.json and add the following:

{ "layout": "page.njk", "tags": "pages" }

The tags property allows to use the directory as a collection.

24. Back in index.md, add the following to display the pages collection as a list.

{% for page in collections.pages %} - [{{ page.data.title }}]({{ page.url }}) {%- endfor %}

This uses a combination of Markdown syntax link for link: {{ page.data.title }} and URL: {{ page.url }}

If the live page doesn't update. Try killing it and restarting using npm start in the terminal.

Extra: How to add an image.

25. Inside the src directory, create a folder called images and add a stock image.

26. Inside inside.md add the Markdown syntax to display and image like so, ![text](URL).

27. In .eleventy.js after the addWatchTarget for src/css folder add,

eleventyConfig.addPassthroughCopy("./src/images/");

This should display your image of choice. If it doesn't, check the public folder to see if the image folder was created inside the src directory. If not, kill the serve and restart 11ty with npm start. Hope it works!