Getting Started with 11ty

What is 11ty?

11ty is a static site generator. It is capable of rendering sites from many different language. Notably, it can use markdown. In this posting, I will be demonstrating 3 methods of creating an 11ty blog.

Getting Started

11ty Setup + Hello World Blog

In your terminal, run npm install @11ty/eleventy-plugin-syntaxhighlight --save-dev

Once this is successful, in the terminal run a mkdir "filename". For the sake of this example, I named mine "11ty Work". After the creation of this folder, run cd filename in the terminal. From there, run echo '# Page header' > README.md
npx @11ty/eleventy

Once this has been done, it can be run by running this command: npx @11ty/eleventy --serve

Once you have successfully opened the "Page Header" screen shown below:

you can open the file via VS Code and make changes.
Here is an example of what can be rendered when changes are made:

Using Template 1 for a Template Blog

The first thing you are going to want to do is use the linked template. This will give you the basic information you need to start building your site.

You can clone the repository that the template makes onto your machine. This will allow you to make any edits.

Run a npm install
Once cloning is complete, you should cd into the file that the code exists in. From there, run a
npx @11ty/eleventy --serve

In your browser, go to localhost8080

If everything has been successful, you should open something similar to the image above.

To edit to your liking follow these steps:

• In the terminal, close the site by entering "control c"
• Open the file in Visual Studio Code by typing code .
• Navigate to the drop down labelled "posts"
• Edit the information in the .md files to your liking

Using HAX11ty to Build the Same Blog

Like before, use the linked template to make a repository. You will need to do another git clone on your terminal and cd into the cloned work. Again, enter code . to open the cloned work in Visual Studio. It should be noted that HAX11ty is going to require yarn to work properly.

• Run yarn install and yarn start

If all is successful, you will be able to edit the code in Visual Studio.

After making desired edits, your blog may look something like this:

Problems with Yarn? Using another Template to demonstrate 11ty

Once more, use the linked template to make your repo. Clone the repo, and cd into the cloned work. Open the file in VS code.

• Run npm install --save-dev @11ty/eleventy
• Run npx @11ty/eleventy --serve

Comparing First Experience with HAX11ty

HAX11ty is much more visually appealing. Both are rather simple to access and understand; although the yarn command with HAX11ty did create some challenges. Overall, however, HAX11ty does have the stronger UI.

Repos

The following repos demonstrate how I completed the discussed works.

1. Hello World Blog
2. Template Blog
3. HAX11ty Work

Sites

The following sites demonstrate my work further

1. Hello World Site

Helpful Information

• Open VS Code From Terminal

• 11ty Documentation