Over the years I’ve used my personal website as a platform for learning. At one point I had it running on FunnelWebBlog and later on Umbraco. Both of these were traditional monolithic web apps that required hosting and a database (as would something like WordPress). Content Management Systems like these always have their quirks when customizing and theming and can be challenging to export/import content when you change platforms.
Recently I started on the Microsoft DevOps certification path and needed a project to use while learning the tools. This seemed like the perfect time to re-evaluate the BenSwayne.com project!
My goal in learning DevOps was to have my website automatically build, test and deploy whenever I committed changes to the github repo. I wanted to use Azure DevOps Pipelines to help me gain familiarity with the Microsoft DevOps toolset.
While I was at it, I took the opportunity to reevaluate what platform I used to author my website. Traditional CMS’s are really not necessary for a simple personal website and add a lot of overhead. Also personal websites often go through ups and downs in change frequency over the years as career and family demands fluctuate. One of the principles of modern devops culture is to have everything you can automated and version controlled - “everything as code”. I wanted my personal website content “as code”, in version control, so that it would survive changing platforms, changing hosting providers, or whatever unforseen change in the future.
Enter Static Site Generators! Static site generators consume content usually from the filesystem, such as markdown text files, and render them using some kind of theme into static html files. All the inputs for the static site generators are version controlled (in your repo) and hosting is cheap and fast as all you have for outputs is a bunch of static files.
I chose to start exploring Jekyll primarily because this is what powers GitHub Pages which I am likely to use in a professional capacity at work some day (for generating repo/project documentation that lives in github).
Project Requirements/Goals
- Version Control: GitHub
- IDE: Visual Studio Code
- Website Generator: Jekyll
- CI/CD: Azure DevOps Pipelines
- Build Agent: Docker Image
GitHub for Version Control
GitHub is definately one of the most popular version control systems in use today. I had used other git based version control platforms before (Atlassian BitBucket). But particularly in light of Microsoft’s acquisition of GitHub in 2018 and tight integration with Azure Devops, I wanted to start using GitHub as my primary version control platform.
Visual Studio Code IDE
Visual Studio Code (VSCODE) is fast becoming the #1 IDE for modern cross platform development and can be used on Windows, Mac or Linux. VSCODE has built in git support and an extensible design that allows you to switch your terminal between a traditional windows Command Prompt, PowerShell, or Bash (using the windows subsystem for linux).
As part of my learning, I wanted to gain familiarity with Visual Studio Code as my primary IDE for this project.
Jekyll Static Site Generator
Jekyll is a simple, blog-aware, static site generator for personal, project, or organization sites. Written in Ruby by Tom Preston-Werner, GitHub’s co-founder, it is distributed under the open source MIT license.
– Wikipedia
Azure DevOps Pipelines
Azure has ingested what used to be Visual Studio Team Services, added more cloud capabilities and produced what is now known as Azure DevOps Pipelines. There are lots of other CI/CD platforms out there, but I wanted to do this the Microsoft way (as I’m pursuing the Microsoft DevOps certification path).
Docker Build Agent
You can build your project in a native Ubuntu image directly, but I wanted to build my project inside a docker image. This is probably not strictly necessary for a personal website built with Jekyll, but again I want to build my comfort with Docker in general. Building with docker also makes it easier to switch from one CI/CD platform to another if you ever wanted to.