Deploying Wyam To GitHub Using Visual Studio Online

Published on Tuesday, October 3, 2017

Here goes nothing! This blog is built with Dave Glick's Wyam static site generator and deployed from a git repo in Visual Studio Online to GitHub Pages. Here's how to set up something similar.

Prerequisites

  • A Visual Studio Online repository for your blog source.
    • You could have also VSO pull the source from GitHub or somewhere else instead, but I haven't covered that here.
  • A GitHub repository which will serve the compiled output via GitHub Pages.
  • Cake so you can test it out locally. Install it via Chocolatey: choco install cake.portable

Kick-starting Wyam with Cake

Create a file called build.cake in the root of your repo with these contents:

#tool nuget:?package=Wyam
#addin nuget:?package=Cake.Wyam

var target = Argument("target", "Default");

Task("Build")
   .Does(() =>
   {
       Wyam(new WyamSettings
       {
           Recipe = "Blog",
           Theme = "CleanBlog",
           UpdatePackages = true
       });
   });
   
Task("Preview")
   .Does(() =>
   {
       Wyam(new WyamSettings
       {
           Recipe = "Blog",
           Theme = "CleanBlog",
           UpdatePackages = true,
           Preview = true,
           Watch = true
       });        
   });

Task("Default")
   .IsDependentOn("Build");    
   
RunTarget(target);

Add a file called config.wyam like so:

#recipe Blog
#theme CleanBlog

Settings[Keys.Host] = "yourname.github.io";
Settings[BlogKeys.Title] = "MegaBlog";
Settings[BlogKeys.Description] = "Blog of the Gods";

Create a folder called input and add a folder called posts inside that. Now create input/posts/fist-post.md:

Title: Fist Post! A song of fice and ire
Published: 10/30/2017
Tags: ['Fists']
---

This post is about fists and how clumpy they always are.

Great! Try running it using Cake. Because Wyam targets an older version of Cake at the time of writing, I'm adding the --settings_skipverification=true option so that Cake doesn't complain.

cake --settings_skipverification=true -target=Preview

Open a browser to http://localhost:5080 and see the results. The Preview target watches for file changes so it can automatically recompile & refresh your browser whenever you save changes.

Automating Deployment

  1. Install the Cake build task from the Visual Studio Marketplace into VSO.
  2. In Visual Studio Online, create a new, empty build for your repo, selecting an appropriate build agent.
  3. Add the Cake Build task.
  4. Select the build.cake file from the root of your repo as the Cake Script.
  5. Set the Target to Default.
  6. Optionally add the --settings_skipverification=true option to Cake Arguments.
  7. Add a new PowerShell Script build task, set Type to Inline Script and add these contents:
param (
  [string]$Token,
  [string]$UserName,
  [string]$Repository
)

$localFolder = "gh-pages"
$repo = "https://$($UserName):$($Token)@github.com/$($Repository).git"
git clone $repo --branch=master $localFolder

Copy-Item "output\*" $localFolder -recurse

Set-Location $localFolder
git add *
git commit -m "Update."
git push
  1. Create a new GitHub Personal Access token from GitHub's Developer Settings page, or by clicking here. I added all of the repo permissions to the token.
  2. In VSO, add arguments for the script, replacing TOKEN with your token and replacing the other values as appropriate:
-Token TOKEN -UserName "ReubenBond" -Repository "ReubenBond/reubenbond.github.io"
  1. Up on the Triggers pane, enable Continuous Integration.
  2. Click Save & queue, then cross your fingers.

Hopefully that's it and you can now add new blog posts to the input/posts directory.