Moving to Gatsby on Azure

The last time I switched blogging platforms was almost a decade ago when I started using WordPress instead of hosting my own blog site. However, it’s time to explore some cool new technology, and switch back to a self-hosted website.

Selecting a New Blogging Framework

Part of the reason is that I want to maintain my content in version control, and have a better sense of “ownership” over my content. But, another aspect is also that I want to learn more about Server-Side-Rendering with React and TypeScript, and leveraging Static Websites on Microsoft Azure.

After doing some research, I found a framework that looked right: Gatsby. There are even a lot of starters that exist to make the framework easy to get started with quickly.

I reviewed the blogging starters, and looked at their demo pages, but eventually settled on one that I liked: Gatsby Casper. I selected this because it was based on the very popular open-source publishing framework called Ghost, and it uses Markdown files for storing the content for the individual blog posts. I’m familiar with this format already as it is ubiquitious in software projects for creating documentation that lives next to the code.

Porting WordPress Content

The next step was to keep my WordPress posts and port them to the new framework. I could have created the .MD files by hand and filled them with content by copying/pasting, but some of my posts had images, and the thought of downloading each image individually seemed daunting.

I found that there is an existing project for exporting wordpress to markdown. To use it, I had to export the content from WordPress, and then use the resulting XML as input to the node script.

This generated some markdown files that were a good start, but not a perfect fit (check out the params for the script to tweak for your own purposes). I had to add additional details into the frontmatter to satisfy the requirements of the Gatsby starter I’m using. This took a while, but was significantly faster than a manual export would have been.

Hosting on Azure Static Website

Eventually I was done with my minor tweaks (like updating some logos, styling, and images on the theme), and it was time to publish my website to Azure.

This is fairly simple to do without setting up a CI/CD pipeline (though I might eventually do this anyway as I like the idea of publishing content from editing/committing markdown files directly from Github). I added the Azure extension to VS Code, and created an Azure storage account in the Azure Dev Portal.

Once it was created, I enabled the Static Website option on the storage account.

Now I was ready to create a production build and deploy it. I ran this command:

 npm run build

And once everything was finished, a public folder appeared next to the src folder in my local repo. In Visual Studio Code I right clicked on this folder and selected Deploy to Static Website—then it’s just a matter of filling out the wizard that pops up.

In just a few clicks, the ~200 generated files were uploaded and my website was available from the URL published in Azure. Next time I’ll be setting up the website to use my custom domain name and putting everything behind a Microsoft CDN (for HTTPS termination more than anything).