Alex Hedley - Migrated Blog

A couple of weeks ago I finally decided to migrate my Blog to Statiq Web.

Statiq Web is a powerful static web site generation toolkit suitable for most use cases. It's built on top of Statiq Framework so you can always extend or customize it beyond those base capabilities as well.

It's predecessor was Wyam.

I wanted to use a .NET tool to create my blog as you know my passion for .NET, so the journey began.

My blog(s) have existed in a number of formats. The first one was made in about 2010 using Classic ASP and a Microsoft Access. I'd been learning this on 599CD so was putting it into practice. A few years later I started a Wordpress blog at https://alexhedley.wordpress.com/. This contained a majority of my iOS and Android journey. I used gist to host a lot of the code as it has support for that. Then I moved over to Jekyll Now as I started hosting on GitHub. As these were already in Markdown it was just a couple of attribute changes and they were ready. Next I tackled my original blog. I'd exported the data from the db as json and was hosting it as a simple AngularJS app just so it wasn't lost, hadn't really put any effort into styling and as there were only a few posts I manually converted the posts needed to md. Next was the fun one! Wordpress. I exported my existing data following the steps on Export Your WordPress.com Site. I then needed a way to convert this output to Markdown. I tried this a few years back and couldn't get it working but when I looked again I found: wordpress-export-to-markdown. It has a nice little guided tour of steps and then I got my output. The images were also included so this meant just moving them over to the new repo. Some of the attributes were different so an update to those and I was good to go.

I've got all the data now I need to setup the Statiq.Web project. There's a Quick Start on the main page.

dotnet new console --name MySite

cd MySite

dotnet add package Statiq.Web --version 1.0.0-beta.57

Check for the latest version: nuget - Statiq.Web

Update Program.cs

using System.Threading.Tasks;
using Statiq.App;
using Statiq.Web;

return await Bootstrapper
  .Factory
  .CreateWeb(args)
  .RunAsync();

mkdir input

touch index.md

Title: My First Statiq page
---
# Hello World!

Hello from my first Statiq page.

Testing

dotnet run

dotnet run -- preview

http://localhost:5080

Theme

cd src

git submodule add https://github.com/statiqdev/CleanBlog.git theme

If you want to make any changes to the theme you might want to copy this locally.

Settings

appsettings.json

Update the "LinkRoot": "/blog", if you're not hosting on your github.io root.

Next step was adding extra functionality. I ❤ Mermaid and wanted a way to support this. Now came the issue, I found another blog generating it from a separate md file and converting it to a picture, this was all done as a build step. As it's a static site this really should be the way I do it, but then when you link it to your page you have to know the filename before it's generated and it won't preview before hand. I instead opted for adding the js and doing it dynamically, see Mermaid for more info on how.

In other SSG I've used a tab group to display information, for example in MFractor, see Open Android Manifest (Source). It uses the Content tabs feature of Material for MkDocs.

To use this just add the nuget then in the page you wish to add the tabs syntax.

<?# TabGroup ?>
<?*
tabs:
  - name: Tab One
    content: |
    ...
  - name: Tab Two
    content: |
    ...
?>
<?#/ TabGroup ?>

I prefer this over others as it's really easy to see what is happening. docfx uses a md syntax which keeps it consistent but then previewers have a hard time with this.

Another really handy plugin is IncludeCode. This could be used instead of hosting as a gist or including large amounts of code in the post. You could also reference code from a single place and only have to update it once.

<?# IncludeCode "./../_head.cshtml" /?>

src/input/_head.cshtml

I was getting decent analytics on my WP site and prob had it on others so I've added that here too. Just a few lines of code in your src/input/_scripts.cshtml

Another thing I wanted to do was keep the commit history of when I wrote the posts, so I did this manually with:

GIT_COMMITTER_DATE="Mon 20 Aug 2018 20:19:19 BST" git commit --amend --no-edit --date "Mon 20 Aug 2018 20:19:19 BST"

Finally as usual I needed a way to build and deploy so I used GitHub Actions and GitHub Pages, there are links below and you can see the source of this blog for exact steps.

There are other updates I'm planning on adding like Search, a Header image etc, so check those out in the future.

Migrated Blog

Mermaid

Plugins

Links

Config

Deploy

Legacy