- AWS S3 web hosting
- GitHub - File repository
- Travis CI - Build/Deploy automation
- Hugo - Static sight generator
How It Works
Content is first created on my local machine using VSCode, my IDE of choice. When I need to preview my content changes I invoke the local Hugo server in my Terminal window. My terminal of choice is Bash on Ubuntu on Windows 10. Hugo will ingest the markdown files, apply templates, construct layouts and generate static HTML.
When I’m satisfied with my changes, I commit to my GitHub repo using terminal and push changes. After the push, the associated Travis CI build invokes the Hugo binary, compiles the static HTML and uploads the files to an S3 bucket that is configured for website hosting.
Using these simple steps I am able to add and update content on the static cloudshock.io site without pushing code from my local development environment to the cloud. Further, since the process is automated I can easily initiate an update from ANY system in the world as long as I have access to my Github account.
Why is This Useful?
Automation of repetitive tasks is a life saver for small organizations. When you automate you remove the tendency for silos of skills and implementation to exist. Using this CI/CD pattern it’s possible for a second or third content creator, who has no prior knowledge of this configuration, to make and deploy changes to the website.
Additionally, using off the shelf community tools such as Hugo and Travis CI provide a repeatable process that doesn’t require hours of developer time to maintain. If I, alternatively, hand scripted the build/deploy process I am on the hook for maintenance and support when something goes wrong. Community tools are often associated with a wide variety of community support via platforms like Stack Overflow.
Last, by using this stack for a static website I am saving money by not running an EC2 instance 24⁄7 in order to keep a CMS system like Wordpress online. Because content is identical regardless of visitor, I can easily serve pre-compile pages. I only need compute cycles when content changes, and only for a brief period of time.
Getting Set Up
Visual Studio Code
Visual Studio Code (VS Code) is an open source code editor managed my Microsoft. It is available on Windows, Linux and macOS as freeware. The product is maintained by the open source community and supports a multitude of languages.
VS Code is very similar to tools like Atom and Sublime. In my opinion VS Code has one major advantage over Atom in that VS Code executes plugins on a separate thread from the editor window. Thus, when a plugin crashes it does not take down the editor as well.
Bash on Ubuntu on Windows
Installing the Linux subsystem on Windows is easy and avoids the overhead of installing a virtual machine. However you will need a copy of Windows 10.
The official installation guide can be found here: Windows 10 Installation Guide
Hugo static site generator
Hugo is a cross platform site generator written in GO. It can be installed under Linux using either the package manager or via the latest binary from Github.
The official instructions are here GETTING STARTED FUNDAMENTALS - Install Hugo
Hugo + Travis
Hugo project builds can be automated and deployed by Travis CI. If you are using an open source GitHub repository you can set up the CI/CD via TravisCI.Org
This article by Chris Hager describes how to set up your travis.yml file to build and deploy your site to GitHub pages, another cheap alternative to Wordpress. With minor modification you can substitute an AWS S3 deployment for this step.
Chris’ instructions can be found here: Continuous Deployment: Hugo + Travis CI → GitHub Pages
Travis CI deployments to S3 instructions can be found here Travis CI - S3 Deployment
Amazon S3 Webhosting
At minimum you will need to create and set up an AWS S3 bucket to host your website. Additionally, you can set up a custom domain via Route 53 and configure SSL using AWS Certificate Manager and CloudFront. I will cover these deployment topics in a later article.
For now, follow these instructions to set up an S3 bucket as a website. Example: Setting up a Static Website
Implementing the Site
I strongly recommend bookmarking the Hugo Docs. Here you’ll find all the command line (CLI) commands you’ll need. You will also find more in depth explanations of how functions, variables, and templates work.
Hugo Training Video
Also check out this great series of how-to Hugo videos from Giraffe Academy. Introduction to Hugo | Hugo - Static Site Generator
Don’t forget to check out the GitHub repo for this site which includes a working example of the entire process end-to-end. brianwaustin/cloudshock.io