Summary
To be able to create blog posts without having to set everything up in my source code, I wanted to find a way to use a CMS to update my site and write blog posts.
I decided that I would make use of my existing skillset and try to learn templating languages such as Nunjucks and Handlebars to create my new site.
I used a static-site generator called eleventy to build my site, pairing Nunjucks with Markdown. Hosted with Netlify and utilising Netlify-CMS, I'm hosting my site for free and making use of CI/CD to automatically build and update my website.
I hate copying code, so I spent 5 days copying code
Inspired by @JamesJingYi's blog post on the new Apple Card, I decided that I wanted to try my hand at blogging and thought that my new website would be a great place to do so.
I recently updated my site, using just HTML and SASS, so if I was going to write blog posts, I'd just simply have to make a new HTML file, copy the head, footer and navbar in, line up the links and I'd be ready to go. However, for some reason I find setting the links in the navbar a really arduous task. Did I set up the right links? Do they go to the right place? Did I miss any?
I recently discovered a static site generator (ssg) called eleventy, which allows you to use handlebars, nunjucks, pug, markdown, etc. to build your website with templating! This basically means you write your navbar once and the ssg does all its magic to make it work (if you are able to write it properly unlike me).
I discovered that I could set this up with continous integration/continuous delivery (I still don't really understand what these words mean) and have my website build automatically whenever I do a git push! I then discovered I could use netlify to host the site from my gitlab project and that I could use netlify cms to write markdown to create my blog posts!
Feeling very excited and ambitious, I managed to get my new site working in about 5 days. I have layouts written in nunjucks, content written in markdown (which then uses the nunjucks layouts to render), as well as components that are frequently used (such as my pink cards) as eleventy shortcodes.
How does it work?
Following the instructions to get set up with eleventy, I found a few examples, such as this one by Keeping Up to Date.
I then started by trying to recreate my projects page. I created a base-layout.njk which contained my head and footer tags which are consistent throughout my site. I created an index.njk file (which used the base-layout.njk layout) that pretty much contained the pink background with my name on it, as well as a loop that would look for markdown files tagged 'project' and display them.
It worked!
With each individual project being a markdown file, I needed to find a way to render them differently to the main project page. To do this, I created another nunjucks layout. Using eleventy's front data matter, in the markdown file for each project, I could specify things like the title of the page the background image and the nunjuck layout would then be able to grab all of this info and render it, without me having to create a new layout for each single project page (woohoo!).
Obviously this was all very easy and I didn't run into a single problem and everything was straight-forward and it all worked straight away.
spoiler: it didn't
I ran into quite a few problems and struggled a bit with learning nunjucks and the way that eleventy expects me to work. I also couldn't figure out for the life of me how to use paired shortcodes, which would have two arguments taken from it's child elements, they would always come through as a single argument. I also ran into issues trying to get my favicon on all my pages.
I think some of these issues stem from my lack of knowledge of templating and static site generators, so I'm not 100% proud of my code, but it works on my machine.
Improvements
There's a few more things I want to improve, specifically on the blog section. I'd love to get the date and tags appearing on my blog list! I also should try and learn more templating and static site generators. I think I'll try and make another site with eleveny and see how it compares, knowing what I do now.