2023-05-12

How to build a simple Eleventy blog site

Being honest I got AI to write this so that I have content to test out on the site. Elevetny is really easy to use, I orginally built this site in HTML & CSS and then recomplied it all using Eleventy so that its would have a blog.

The best way to work out how to create an Eleventy site just watch this youtube video : 6 Minutes to Build a Blog from Scratch with Eleventy

But if you wantt to read on, to create an Eleventy website, you can follow these steps:

Step 1: Set up the project

Create a new directory for your Eleventy blog project.
Open a command prompt or terminal and navigate to the project directory.
Initialize a new Node.js project by running the following command:
```
npm init -y
```
Install Eleventy as a development dependency by running the following command:
```
npm install --save-dev eleventy
```

Step 2: Configure Eleventy

Create a new file named .eleventy.js in the root directory of your project.
Add the following code to the .eleventy.js file to configure Eleventy:

module.exports = function (eleventyConfig) {
  eleventyConfig.addPassthroughCopy("assets"); // Copies the "assets" folder to the output directory

  return {
    dir: {
      input: "src", // Directory where your source files are located
      output: "dist", // Directory where the generated site will be outputted
    },
  };
};

Create a new folder named src in the root directory of your project. This folder will contain your site's source files.

Step 3: Create the blog posts

Inside the src folder, create a new folder named _posts.
Create a new Markdown or HTML file for each blog post in the _posts folder. Name the files using the following format: YYYY-MM-DD-post-slug.md (e.g., 2023-01-01-my-first-post.md).
Add the necessary content to each blog post file using Markdown or HTML syntax.

Step 4: Create the blog layout

Inside the src folder, create a new file named index.njk. This will be the layout file for your blog.
Add the following content to the index.njk file as a basic example:

<!DOCTYPE html>
<html>
<head>
  <title>My Blog</title>
</head>
<body>
  <h1>My Blog</h1>

  
</body>
</html>

Step 5: Build and view your blog

Open a command prompt or terminal and navigate to the root directory of your project.
Run the following command to build your Eleventy site:
```
npx eleventy
```
This command will generate your blog as HTML files and output them to the dist directory (or the directory specified in the configuration).
After the build process completes, you can preview your blog by opening the generated HTML files in a web browser.

That's it! You now have a simple blog built with Eleventy. You can further customize your blog's layout, add CSS styles, and explore Eleventy's features to enhance your blog's functionality.