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
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:
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)
The result should be something like this:
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
Here 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
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
When done, it should look like this
Resume Website
The link for the final repository is here
The template can be found here
For this website, open in a code editor and edit the
data, here I am adding my contact info

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

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
Top comments (0)