DEV Community

hayden-angello
hayden-angello

Posted on

Getting Started with 11ty

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:

Image description

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

The result should be something like this:
Image description

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
Image description

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

When done, it should look like this

Image description

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
![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
Enter fullscreen mode Exit fullscreen mode

Top comments (0)