published: 22nd of April 2020
Last year I migrated codingpackets.com to a rails stack hosted on a digital ocean droplet. You can read about that here I really love rails and was completely happy with that choice however, I am tired of managing infrastructure for what is essentially a static site. Therefore I decided to move to building codingpackets.com with a static site generator and hosting it on AWS.
11ty is a relatively new static site generator. I love ruby and initially was going to use jekyll but at the moment I am digging into node so went with 11ty instead. The following sage quote rings true once again.
The only way to learn a new programming language is by writing programs in it.
- Dennis Ritchie
11ty is a real pleasure to work with. Things feel natural and are where you think they would be. Even though im a node noob, I found it relatively straight forward to feel productive and not spend hours and hours reading through docs to get things done.
11ty has the option to use a variety of templating languages. The default being nunjucks. Nunjucks is a templating engine built for javascript that is inspired by jinja. so it was a very smooth transition with not a lot to learn.
All the components are still the same on the site. It was a pretty straight forward port, the main thing I had to change was converting the templates over from erb to nunjucks. Apart from that I still used Bootstrap, Font Awesome and Highlight JS.
Bootstrap (version 4.4.1 at the time of writing). It is a NIGHTMARE to try and build a site without a CSS framework like bootstrap. There are so many considerations around browser vendors/versions and desktop/tablet/mobile sites. For those out there that do this for a living, I salute you. Bootstrap gives you a nice out of the box experience but it is also pretty painless to customize.
Font Awesome (version 5.13 at the time of writing) provides really nice icons. There is a free and a pro version, I am just using the free icons of which there are a lot to choose from. The icons at the page footer are from Font Awesome.
highlight.js (version 9.18.1 at the time of writing) provides the syntax highlighting for the code blocks on the site. This is a really awesome project, it supports highlighting for 185 languages in 89 styles. I am currently using the xt256 style.
The site is now hosted on AWS with S3 for file storage and Cloudfront CDN that puts content close to the users. I am have written a separate post outlining the process to build and setup the components to build the site which you can find here.
Why not github pages or netlify or similar? I thought about these options, but I am currently learning my way through AWS so using their services made sense to me.
I am yet to see the cost over a month, but will update this post once I get the bill. The cost calculator estimates that it will be < $5 USD a month. Considering I was paying $5 a month for the DO droplet and I have no infrastructure to manage that's not too shabby.
I have been dabbling with node for a few years and duck hunted my way through javascript over the last 8 years so I have the basics down ok.....
I have been going through this udemy course to sharpen my skills which I found to be easy to follow and pretty well written and presented: The Complete Node.js Developer Course (3rd Edition) its worth checking out if you are looking to learn node.
11ty is a great static site generator and I would highly recommend checking it out if you plan on building out a static site. Hosting on AWS was also pretty straight forward and looks to be pretty low cost.