January 14, 2020

Create a Blog Post with Hugo

In this post, I will present you a short introduction on how to create a blog post, from the the installation of Hugo to publishing your article.

SUAM Project

For the SUAM project, there are two main repositories responsible for content publishing, suam-team/raw for static content and Hugo config, and suam-team/blog which contains public/ directory for HTML. We have deploy.sh for executing and pushing content from a markdown file to a HTML file.

Let’s Play!

  1. Install the latest version of Hugo. The most painless way is to use a binary from Hugo Releases and make it available in PATH.
  2. Clone the suam-team/raw with all submodules to your workspace. The recommended command to fetch all submodules in parallel is:
$ git clone --recurse-submodules -j8 [email protected]:suam-team/raw.git suam
  1. Create a post with the command below. The post will be available on content/posts/my-post.md.
$ hugo new posts/my-post.md
  1. The current theme required us to add some post metadata in the post header. The parameters below are required but you can add more, see this sample post for reference.
---
title: "Create a Blog Post with Hugo"
date: 2020-01-14T01:15:59+07:00
author: "P"
draft: false
description: "A short introduction on how to create a blog post with Hugo"
---
  1. You can see a live draft version on your machine with hugo server -D. Hugo will generate HTML pages from our markdown files and make it available on http://localhost:1313/blog/
  2. Publishing your content must be done in the following steps:
    1. Run ./deploy.sh <commit-msg> to automatically generate HTML pages to public/, add and commit changes, and push the changes to suam-team/blog.
    2. Add and commit changes on your current workspace and push it to suam-team/raw

All Done!

Congratulation! You’ve just learned on how to contribute with our SUAM blog!