The 56K.Cloud Automated Website

By Brian Christner | February 22, 2018

The 56K.Cloud Automated Website

It is an Automated static generated website to be precise. Wow, now that is a mouth full. It sounds much more complicated than it is. Our website’s goal is to showcase our DevOps skills and passion. We chose a toolset that enables us to deliver our content via CI/CD (Continuous Integration / Continuous Delivery). We decided on four base requirements:

  1. Maintained by Git
  2. Stored in GitLab
  3. Utilize a static site generator
  4. Automated deployments

Netlify to the rescue

We selected Netlify as the platform to deliver 56K.Cloud content. Netlify is built for developers by developers. Something that has been missing in the website development world is a developer workflow for deployments. Tada, this is where Netlify comes to the rescue.

They allow you to plugin your favorite static website generator (Jeykll, Hugo, etc.). Commit changes to your Git Repository, and Netlify automatically builds and deploys the website to a very fast CDN. Very similar how we do DevOps we can now deploy our website the same way. How cool is that?

The Netlify Architecture

56K.Cloud Netlify website Architecture

The 56K wesbite consists of the following components:

Let’s take a look at each component individually to understand their purpose and how they tie into the pipeline.

Git

Git itself needs no introduction as Git is now the standard way to maintain software. Wikiepedia says “Git is a version control system for tracking changes in computer files and coordinating work on those files among multiple people” Fair enough. It should be the standard way to track software period.

Hugo CMS

Static website generators are much leaner than the likes of CMS websites like WordPress. For example, WordPress renders each visitor request and stores the content of each page in a database. When a user clicks from the home page to a second page, WordPress has to request the content from the database and then render each page of content. This adds latency in each step and in turn slows down the user experience.

Hugo Static Website Generator is a fantastic piece of kit. Hugo utilizes the Go programming language which makes it blazing fast. It is easy to run the full Hugo website locally. Hugo enables us to make changes and updates the changes in real-time as it watches all files for modifications.

Next, we use GitLab as our software repository for our website. The software repository in GitLab connects to Netlify. When we commit new changes to our site they are automagically passed to Netlify to build, test, and deploy.

I recently stumbled upon Netlify while looking for Static Site Generators automation. Low and behold it appears lots of sites already use it like Kubernetes, Serverless.com, and here’s Hugo’s Showcase. Like I mentioned previously one of the big reasons we decided to use it is it functions just like a development workflow. It also helps it comes with top-notch features out of the box as well as SSL, CDN; Preview builds, post-build script injection, and automated workflows.

Content Creation process

This is where the magic happens. Our entire website is in GitLab. GitLab enables us to check out the website, run it locally, make changes, and commit it back. For the blog, we write the articles in Markdown which I prefer to write in a text editor and watch the live changes locally.

We create a Git branch which is a copy of the primary repository but contains the changes we are adding. Once we are done writing our content, we submit the branch, and it automatically goes into preview mode. Preview gives us a URL which is not public so we can verify it looks OK, spelling is right, etc. before we merge it into the master branch of the website.

Website Deployment Process

Once we are happy with the outcome of the changes, we can merge the branch into our master branch of the website. Once we kick off the merge process Netlify again re-builds and tests the site but this time distributes the website to a Global CDN (Content Delivery Network) optimizes the images, and injects our Google Analytics code as the last step. That was easy!

Next Steps

This is the first version of 56K.Cloud website so expect gradual improvements in speed, user experience, and content over the coming weeks and months. Eventually, we would like to open up the blog to user-submitted content as well.

Find out more about 56K.Cloud

We love Cloud, Containers, DevOps, and Infrastructure as Code. If you are interested in chatting connect with us on Twitter or drop us an email: info@56K.Cloud We hope you found this article helpful. If there is anything you would like to contribute or you have questions, please let us know!