DEV Community

GigiFitiany
GigiFitiany

Posted on

11ty 101

11ty Hello World

Alright, so I was very happy with house easy this part of the process. I was able to navigate through the tutorial about making a hello world style blog, but still making sure to go through the syntax plugin highlight first.

Here is a quick screenshot of me completing the process.

Image description

I then went on to run the npx @11ty/eleventy --serve and was pleasantly greeted with the result I was hoping for! I was prompted to open up the local host site and was show this result.

Image description

This was about the extent of my success with this part of the lab. I am currently trying to get my repo push to github, but to no avail. I am hoping by the time you get to the end of this lab I will have figured it out!

Template Blogpost

I was able to fork and clone the repo that was suggested to us for this part of the lab. I edited the first blog post as well as editing the few minor details to make it "Gigi's blog" how fancy!

Image description

Image description

Image description

Once again, github my mortal enemy has failed me and I am having authorisation issue :( CURSE YOU GITHUB!!!

HAX11ty

This one was by far the easiest to work through! All that was needed was to use the template and use yarn to run it. Yarn was where I ran into my biggest problem. My computer was not loving me and yarn was a big pain to get working. No worries though, I am resilient as it turn out and this is what I ended up with.

Image description

Comparing HAX11ty to 11ty

I found the main difference was that the HAX option was a lot more user friendly. Instead of having to set up and install 11ty, the HAX option had it almost automated into the program which was a very nice addition. Overall, my experience with HAX11ty was much more pleasant.

I am going to provide a link to my github and by the time you come to grade this I am hoping that I will have everything pushed-- the github gods permitting.

Resources:

https://www.11ty.dev/
https://www.11ty.dev/docs/plugins/syntaxhighlight/

My Github

Top comments (0)