FredBainbridge

Hosting my blog in Azure

Operation Goodbye Wordpress.

Notes on my blog migration.

Requirements

My main motivation for migration my website was primarily to get off the WordPress platform. I found myself spending as much or more time maintaining the site as opposed to creating content and after getting hacked a few times I decided enough was enough, time to make a change. My requirements were as follows:

  • Easy to maintain static website. I want whatever ends up being published to be nothing more than html and css files.
  • Post should be authored using Markdown. I have soured on any and all WYSIWYG Wordpress / Joomla editors.
  • Entire site should be source controlled. I want to be able to easily manage revisions and backups using a GIT repository.
  • Must handle syntax highliting easily. I like to post code snippets, but hate formatting hassles.
  • Continuous integration between source control and published content. This is just cool and I think a good practice, So I want it.
  • Must be able to be hosted in Azure. This is easy. Everything can be hosted in Azure.

Hugo

I choose to use Hugo to accomplish this task. I evaluated Jekyll as well but it quickly fell out of favor with me due to its Ruby dependencies. Hugo does port nicely to Windows, but for added fun I used Ubunto Bash on Windows with the latest Windows 10 Insider Preview. A Hugo site is easy to maintain, posts are written in markdown, syntax highliting is handled easily and source control is easy with a simpel git repository. THis takes care of my requirements.

Export from WordPress

And as an added bonus there is a WordPress plugin that will export an existing Wordpress site into a Hugo friendly format. Including all graphics / media. It works really well for the most part. Some of the generated markdown files needed to be cleaned up because Wordpress editots can inject a ton of junk into a even the simplest post. I inspected each post after exporting from Wordpress to make sure everything was in order.

Notes on Hugo

Once you get the hang of Hugo you realize it is super simple and incredibly powerful. But, if you have no experience with it, it can be challenging. Some tips:

  • Read the documentation, it is suprisingly good.
  • Use the latest version, not the one that is avaiable using apt-get, etc. Download the binary from the Hugo site.
  • Don’t modifify the templates directly. Copy the files you want to modify to the same path under /Layouts and then modify the copies. When building the site Hugo will look for all files in /Layouts first before looking into the Themese folder. i.e. create a Layouts/Partials \and Layout/_default folders and store your theme customizations there.
  • Use /layouts/shortcodes for client side code code you want to display. Then reference the html like so: {{ MyJavaScript .}}. I am not sure how to imped client side script into the Markdown file. I am sure its possible, but using shortcodes works great too.
  • Use /layouts/partials for custom HTML. Then include it on a page/post using {{ partialCached "twitterWidget.html" .}}

Hosting on Azure

This is pretty straight forward and simple because the site is static! No database or application layer needed. You just need a Web App and a basic competency using GIT.

  • Commit the static content that Hugo created to a GIT repository.
    • Explore your options with this documantation.
    • I choose to use link my visualstudio.com service to my azure subscription. VisualStudio.com among other things is a git repository. Very similiar to GitHub but instead of having all public repositories by default visualsudio.com has a all private repositories. To link an Azure subscription to a VisualStudio.com subscription, from portal.azure.com search for “Team” and then select Team Project.
      Team Services
  • Create an App Service plan in Azure.
  • Create a Web App for your App Service.
    • Configure your custom domain.
  • Configure the deployment options to use your GIT repository. Here again.
  • That’s it. If you have your development options configured when you check in your code your site will update with the changes. THis is a simple example of Confinuous Integration.
    Azure WebApp Build
  • There are lots of pages out there on how to host static on Azure.

Dealing with the WWWW (DNS stuff)

I just wanted fredbainbridge.com as the address, but still wanted www.fredbainbridge.com to work. This is simple DNS trickery and Azure handles this pretty seemlessly.

  • Create a CNAME record on your subdomain (wwww.fredbainbridge.com in my case) that points to [yourwedsite].azurewebsites.com. Do this at your hostname provider. (1and1/godaddy/etc)
  • Register the subdomain in your Azure Web App. Be sure to select CNAME (www.example.com or any subdomain).
    I really cannot express how happy I am to be off of WordPress.

Share