Steps to Create From Scratch

Build a Blog from Scratch with Eleventy: "Demo"

Watch > "6 minutes to Build a Blog from Scratch."

Create the Site Index File

Create index.html

Emmet: html:5

Run the Develop Server

npx @11ty/eleventy --serve

Create the Posts

Create posts/

Create posts/post-1.md

Create the layout Layout

Create _includes/layout.html

Emmet: html:5

Create posts Directory Data File

Create posts/posts.json

{
  "layout": "layout.html",
  "tags": "post"
}

Display posts Collection on Home Page

Add to index.html:

## Blog Posts

{% for post in collections.post %}
{{ post.data.title }}
{% endfor %}

Create Linked List of Posts

Modify previous for loop:

<ul>
{% for post in collections.post %}
<li><a href="{{ post.url }}">{{ post.data.title }}</a></li>
{% endfor %}
</ul>

Create netlify.toml

[build]
  # Directory (relative to root of your repo) that contains the deploy-ready
  # HTML files and assets generated by the build. If a base directory has
  # been specified, include it in the publish directory path.
  publish = "_site"

  # Default build command.
  command = "npm run build"

Push to Github

Create a repo and push project to Github (instructions outside the scope of these steps).

Deploy to Netlify

1. Create a Netlify account, use GitHub login for fastest deply
2. Select "Create from Git"
3. Link to Github and select your repo
4. If you run Eleventy locally you can drag your _site folder to drop.netlify.com to upload it without using git.
5. Netlify will recognize the values in netlify.toml and you can deploy! 🎉