Almost free blog on azure using Jekyll static site

I was always wanted to setup my own blog site to write technical articles from daily work I do, but I was never a fun of PHP like tools like WordPress, because it leads to PHP, MySQL and similar stuff coding and I am Microsoft guy (mostly SharePoint).

I am also a fan of Markdown, so I was looking for an cool developer like option to write posts in Markdown format and store nicely somewhere cheap.

Static site generators

While websites envolving into very huge systems, performance becomes a headache. This led to interesting approach called static sites. That means sites only have HTML with content already in place without calling databases to fetch it. While generators here generates HTML files in some pipeline from templates and data sources.

There is a cool site to compare and find best tools to generate static sites: Static site generators

I tried Hugo and Jekyll as these are fast and simple ones, but Jekyll is more blog-aware and cleaner, despite the fact that you need to install Ruby. Also super cool guy Waldek Mastykarz shared his config files for Jekyll, that I used to build mine, in his GitHub Repo.

To get started for yourself, use Jekyll setup guide, then put Waldek config on top of it and finish by setting up configs, data, templates and posts.

Azure Blob Storage static website

If you never heard about Azure Blob storage, you can read about it in MSDN - Blob storage overview.

It has really cool feature Static Website.

Basically, it does there things:

  • Use blob storage container named $web and store static files like HTML, CSS, etc.
  • Returns an endpoint of that files as it would be a web server.

What is even more cool, you can use Azure CDN and assign custom domain and then use Azure certificates to enforce your site to use https without buying certificate by yourself.

How much does it cost

The funny part about this, is that costs are calculated in a blob storage rates, which means usages of gygibites of data, but when we only store static website that weights typicaly several megabytes, then the costs is something around ZERO:

Automate things

I do like to automate stuff and play around with devops things. So my full setup currently looks like this:

  • I use Visual Studio Code to create posts in Markdown format.
  • Commit and push changes to GitHub in my private repo.
  • There is my custom domain that I own.
  • I have configured blob storage static website with Azure CDN, custom domain and https setup.
  • Then there is Azure DevOps build pipeline and release, that:
    • triggers after new commit is pushed to GitHub repo
    • regenerates static files using Jekyll
    • copies that files to blob storage container
    • purge CDN
  • It tooks like 15 minutes while CDN cache is updated, but a new changes then appears on site.

To regenerate static files I use this YAML pipeline:

# Ruby
# Package your Ruby project.
# Add steps that install rails, analyze code, save build artifacts, deploy, and more:
# https://docs.microsoft.com/azure/devops/pipelines/languages/ruby

trigger:
- master

pool:
  vmImage: 'ubuntu-latest'

steps:
- task: UseRubyVersion@0
  inputs:
    versionSpec: '>= 2.5'

- script: |
    gem install jekyll bundler
    bundle install --retry=3 --jobs=4
  displayName: 'bundle install'
 
- script: |
    bundle install
    bundle exec jekyll build
  displayName: 'jekyll'
 
- task: CopyFiles@2
  displayName: 'Copy Files to: $(Build.ArtifactStagingDirectory)'
  inputs:
    SourceFolder: '_site'
    TargetFolder: '$(Build.ArtifactStagingDirectory)'

- task: PublishBuildArtifacts@1
  inputs:
    pathtoPublish: '$(Build.ArtifactStagingDirectory)'
    artifactName: site

To release, I use only two tasks, to copy files and purge CDN:

Happy bloging!