Getting Started with 11ty
Tags: tutorial
Published: 2022-02-28 01:36:25

##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`

![11ty Setup](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5efc40v0fwjkos1g4ow0.png)

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


![page hearder](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e02w6tbogqmpxf7twkll.png)

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

![hello world blog](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4wnv2scdssitzha5u5vp.png)


###Using [Template 1] (https://github.com/11ty/eleventy-base-blog) 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**

![11ty basic work](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1759zqeyslznqfnfw5cz.png)

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 

![Edits made](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a0i7i1xvpxza9ql36ssc.png)
###Using [HAX11ty](https://github.com/elmsln/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: 

![hax11ty](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kt6ink8225nwf3exwxb8.png)

###Problems with Yarn? Using another [Template](https://github.com/vktrwlt/pugsum) 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] (https://github.com/TaylorMorini/Hello-World-Blog)
2. [Template Blog](https://github.com/TaylorMorini/11ty-Lab-1-)
3. [HAX11ty Work] (https://github.com/TaylorMorini/11ty-lab-hax11ty)

####Sites
The following sites demonstrate my work further
1. [Hello World Site] (https://taylormorini.github.io/Hello-World-Blog/)
 

#####Helpful Information
- [Open VS Code From Terminal] (https://www.freecodecamp.org/news/how-to-open-visual-studio-code-from-your-terminal/)

- [11ty Documentation] (https://www.11ty.dev/docs/plugins/syntaxhighlight/)