Create a Blog

In this post we’ll create a free static website with Hugo, push our project to Azure Repo’s, build and release the site to Github Pages using Azure DevOps.

Install Hugo

Depending on your preferred theme, you may have to install a specific version, or the “extended” version of Hugo.

To install Hugo, follow the official installation guide and check the hugo version:

hugo version

Create Your Site

Run the following commands to create a new site, using the ananke theme:

hugo new site blog
cd blog
git init
git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke
echo 'theme = "ananke"' >> config.toml
echo 'resources/_gen/' >> .gitignore
echo 'public/' >> .gitignore
hugo new posts/my-first-post.md
git add .
git commit -m "Created new website"

Your project structure will look as follows:

➜ tree -a -L 1
.
├── .git
├── .gitignore
├── .gitmodules
├── archetypes
├── config.toml
├── content
├── data
├── layouts
├── resources
├── static
└── themes

8 directories, 3 files

Run a local server to see your website at http://localhost:1313/.

hugo server -D

Push Project to Azure Repo’s

Log in at Azure DevOps here, create a new repository within a project:

Copy the SSH command that “pushes an existing repository from command line”, and execute it in the root of your hugo project:

git remote add origin Menziess@vs-ssh.visualstudio.com:v3/Menziess/blog/blog
git push -u origin --all

Hosting the Website

We’ll need another repository (at Github) to host our static webpages.

Log in at Github here, and create a public repository named username.github.io, where username is your Github username:

It’s menziess.github.io in my case, we’ll use that as an example. You’ll notice that the domain of this blog is exactly the same as my repository name. Initially you will receive a 404 error when you visit your page, as the Github pages repository is still empty.

Update the base url of the config.toml file in your hugo project:

baseURL = "https://menziess.github.io"

Continuous Delivery

Finally, in your Azure repository, create a build pipeline by clicking on “Set up build”. It will be used to publish your site whenever you push any changes to the master branch:

Select “Starter pipeline”, and copy paste the following code:

trigger:
  - master

pool:
  vmImage: ubuntu-latest

steps:
  - checkout: self
    submodules: true

  - script: |
      sudo snap install hugo --channel=extended      
    displayName: Install hugo extended

  - script: |
      git submodule add https://github.com/$(user)/$(repo).git public
      rm -rf public/*      
    displayName: Add submodule to push generated site to

  - script: hugo
    displayName: Build static site

  - script: |
      cd public
      echo Changed directory to $(pwd)
      git checkout master
      git add --all
      git -c user.name=$(user) -c user.email=$(email) commit -m "commit $(date +"%Y_%m_%d_%I_%M_%p")"
      git push -f https://$(token):x-oauth-basic@github.com/$(user)/$(repo).git master      
    displayName: Push generated site to github.io

Next, visit your github tokens page here, and generate a github token. Make sure you check the “repo” box, and copy the token:

Go back to your Azure build pipeline and click on “Variables”. Create a new variable called token, and paste your github token in the value field. Also make sure to tick the “Keep this value secret” box:

Create three additional variables:

1. user: your github username (menziess)
2. email: your email address used for signing up at Github (menziess@email.com)
3. repo: your repo url without https:// (menziess.github.io)

Now “Save and run” the pipeline, and commit the newly created yml pipeline directly to the master branch.

There’s a known issue that prevents the page from being published if you’ve pushed the website in a single commit. Simply make a small modification in one of the files in the github repository (using the github web editor), and commit directly to the master branch.

After about 30 seconds, the website should be published: https://menziess.github.io/

Make sure to leave a message below if you face any issues!