This post outlines how I initially built this website, using a couple of services and open source projects, all in the cloud and (almost) completely for “free” (excluding the domain name (you could use github pages for free) and provided you stay in the free tier).
Tools I use:
An overview of the services
Hugo
is a static website generator, I had heard about this project a couple of years ago and came across it again recently and was really happy with the way it has developed. So I decided to test this and see how easy it is to set up a page.
This service makes it, as they state, fun again to develop a website. One big advantage is that it is SEO optimised by default compared to SPA frameworks like Angular.
Till now I can only agree with their statement as it was very easy (as a Web-developer) to set up this website.
Github
is used only to store the source code. You can choose any of your favourite VCS provider.
Forestry
is used to allow editing of the content via a simple CMS web interface.
AWS
is used to host the website. Since it is a static website any CDN provider can be used in place here. Since forestry integrates very nicely with AWS (yes, it 2 clicks and adding your Bucket, Access Key and Secret 😲) and because i am a AWS fan I decided to use this.
Piecing them together
Create your custom website
install hugo and generate a new site
brew install hugo
hugo new site homepage
Install the theme as a submodule
git submodule add https://github.com/laozhu/hugo-nuo themes/hugo-nuo
follow instructions here to configure an example site: https://github.com/laozhu/hugo-nuo#getting-started
commit all files (see example .gitignore) and push to github
Create content for your website
signup at forestry and import your github repository. This will create your project and allows you to directly change the contents on your website if you followed the instructions to create the example site.
Setup hosting
I used this aws cloudformation stack to create everything on the aws front. This requires you have a domain setup and validated on Route 53 with a Domain Zone setup.
Setup Deployment
On forestry go to Settings -> Deployment and enter your user access key and secret as well as the S3 bucket.
Go to Settings -> General and make sure to switch Deploy to github on
This automatically deploys your changes to S3 on every change you make in forestry (or the github repository) Pretty sweet if you ask me 🤓