Getting Started with 11ty
Published: 2022-02-28 02:44:15

Using a static site generator such as 11ty can be a very powerful tool to get a website up and running quickly and efficiently. A static site generator can make a website with all of the required files and structure to have a running website. Using 11ty we are going to make 3 websites.

#Hello World Website:
The link to my repository can be found [here](https://github.com/hayden-angello/11tyHelloWorld)
In the command prompt type in 
```echo '# Page header' > README.md
npx @11ty/eleventy```

In a code editor, edit the README.md file to contain "Hello World" as such:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wict7ayjh0eo8kfmfw6u.png)
 

Then to run any 11ty site enter
```npx @11ty/eleventy --serve```

To view your work the terminal will output this while the website is running, copy and paste the local address into your browser, followed by /README (http://localhost:8080/README)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/edakuqvuqfb7gxzzesqu.png)

The result should be something like this:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/btxzloa511i189p7t1kc.png)
 

Now that we have a grasp on how to get a 11ty site up and running we can go through 2 more examples.

#Blog Site using 11ty
The link for my repository can be found [here](https://github.com/hayden-angello/11tyblog)

[Here](https://github.com/11ty/eleventy-base-blog) is a basic blog template that you can adapt to your personal needs. Open the folder in a code editor and you can navigate through the different files that can allow you to make the blog your own. In this screenshot I am editing the firstPost.md file to add one of my previous blog posts
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bj8in0dmv9lixeg4kvzx.png)

When you are ready to run it and check your progress, in a command prompt, run ```npx @11ty/eleventy --serve``` and then copy the local address into your browser
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mq49mfb6y1e199jy72aa.png)
  
 When done, it should look like this

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xrw9v2zrfvp7cvaxqpjv.png)

#Resume Website
The link for the final repository is [here](https://github.com/hayden-angello/11tyResume)

The template can be found [here](https://github.com/trey/resume-template)

For this website, open in a code editor and edit the ```src``` data, here I am adding my contact info
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v7o2z964mx6zqrbqbd5w.png)


Like the other ones, when you are ready to run it run ```npx @11ty/eleventy --serve``` and then copy the local address into your browser
The result is as such 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ulcu6kwys48inaxtxobn.png)

That's it for the basics of 11ty, a lot of it comes from playing around with the different file structures to create your own website. 

GH Pages:
None of these would work I have no idea why, they work locally but I can't get them to publish on GH. Coming soon