Getting Started with 11ty

What is 11ty?

11ty is a static site generator that can generate content pages written in multiple languages, including markdown. It basically tries to render html from other file types in your directory. In this post, we will be creating 11ty blogs using 3 different methods!

Hello World style 11ty Blog

In the first method, we will be using straight syntax from the 11ty website to create a baseline hello world style blog post. Firstly to install, this code can be run in terminal:
npm install @11ty/eleventy-plugin-syntaxhighlight --save-dev

Once 11ty is installed, I created a new folder on my laptop to host our files for the blog. After navigating to the folder from terminal, we can run up the 11ty pages.
echo '# Page header' > README.md npx @11ty/eleventy

If run correctly, you should see a message like this:
Writing _site/README/index.html from ./README.md (liquid) Wrote 1 file in 0.03 seconds (v1.0.0)

Once our files have been set up, we can run it by coding
npx @11ty/eleventy --serve
This message will pop up:

From here, you can copy the local host url with the addition of /README/ at the end of the file path. Pasted into a browser, it should look like this!

Once you have your baseline file, you can insert your content and create your page! I opened the folder I made in VSCode and chose to insert one of my other blog posts about JavaScript. Below is how it turned out!

Using Templates for a Blog

One way that you can create your own 11ty blog site is from using a template! There are plenty of public Github repositories available for your use, I chose to use this one https://github.com/11ty/eleventy-base-blog

In Github, I selected to use that template and created a new repository to host this new blog site. This template has markdown pages in "posts" folder titled firstpost.md, secondpost.md, etc. These are the files that I edited as my blog posts!

In this image from my VSCode, you can see that I am in my firstpost file, with my JavaScript blog content in it. Once your posts are edited, you can run npm run start in terminal.

Similar to the first method, you will need to copy the local host url and paste it into your web browser. Mine looked like this!

HAX 11ty Blog

For our third and last method that we will be demonstrating, we will be using another template but it simplifies how we can deploy in a static form. To start, you will need yarn installed on your machine. You can use the template and create your own repository. [https://github.com/elmsln/hax11ty]

In this template, you can add your own blog files into the directory, or edit the current ones to your liking. I chose to edit the current files to add in my blog posts. To run, you can use yarn install then yarn start to load your site. Mine looked like this!