By day I am an embedded software developer. I worked mostly in two-way digital radio communications systems such as DMR, P25.
In my spare time I also tinker with other technologies outside of the embedded software domain. This tinkering and the curiosity to learn has been and continue to be a rewarding journey, it has taken me down many rabbit holes but equally enlightened by them.
About a year ago, I wanted to record these experiences and the knowledge that I have accumulated so I started blogging. As an embedded software person, creating and maintaining a blog site was another learning curve. At the time I looked at WordPress and even that felt fairly involved. I was more interested in content creation than maintaining a CMS site and so I outsourced that responsibility by going with WordPress.com.
While WordPress.com is a great platform, in my case (in term of flexibility and value for money in the long run) it did not seem like the best option. So I started looking at alternatives.
In this blog post, we will go through the process of getting a blog site up and running using Jekyll.
Jekyll - a static site generator
During my search for an alternatives I came across the concept of static site generator (SSG). Here is a good explanation of what is a static site generator. There are many SSG options out there, but I chose to go with Jekyll for how easy it was for me to get things up and running.
Installing Jekyll
The first step is to install Jekyll on our development machine. You can follow the installation instruction based on your machine’s operating system here.
Check that the installation was successful by verifying the installed version for the following:
- ruby
- gem
- jekyll
Create a new Jekyll site
Creating a new site is as simple as running jekyll command with the option new and passing in a name for the site.
We can preview the newly created site by executing bundle exec jekyll serve
Jekyll uses themes to change the look and feel of a site. There are plenty of themes out there, some are paid while some are free. For my blog site I liked the look and feel of startbootstrap-clean-blog-jekyll. You can find more details on how to install the template on their GitHub page
Adding and Editing Site Content
Blog posts goes into the _posts folder. The file can be added manually, but we can also use the jekyll-compose plugin as well. To add the plugin:
- Add
gem 'jekyll-compose', group: [:jekyll_plugins]to the Gemfile. - In a console terminal run
bundleagain to install the gem above.
Now all we need to do is run bundle exec jekyll post "Hello World" to create a new post named hello-world.md.
We can also create stand-alone pages as well by running bundle exec jekyll page "Misc".
Deploying To Azure Static Web App Using GitHub Actions
In this section we will be using GitHub Actions to deploy the site to production using a CI/CD workflow.
The blog site’s source code will be hosted on GitHub. At this point let’s assumed everything has been commited and pushed to a GitHub repository. If you are not familiar working with GitHub, check out their documentation for creating a new repository here.
In order to get the blog site out there into the wild, it needs to be published to a server somewhere. For this we will create a static web app resource via the Azure portal to host the site. The documentation on how to create a static web app can be found here.
Link A Custom Domain To Azure Static Web App
By default, when we create a static web app resource, an auto-generated domain name is associated with the site. It will be something like https://some-generated-domain.azurestaticapps.net. However, we would probably prefer the site to be associated with something like myblogsite.com or www.myblogsite.com. These are custom domain names which we can easily map to the generated domain name. The documentation on how to map custom domains to a static web app can be found here.
A CI/CD Demo
Let’s create a new post and push it to GitHub.
When a new commit is pushed to GitHub, a build pipeline is triggered as defined by the GitHub action, and once the build is done we should see our new post published to the blog site.
That is it. We now have a build and deploy pipeline where everytime we push some changes to GitHub, the site is rebuilt and published to the Azure Static Web App.