ptnega's technical blog

How to deploy a Hugo blog using Github Pages

on December 27, 2015

In this post, I’m gonna show you how to use Github Pages to run your Hugo blog.

Assume that you have successfully built your blog locally and push the source to a repository on Github.

Check out the link to my post on How to install Hugo (Linux && Windows) if you haven’t installed Hugo on your machine:

https://ptnega.wordpress.com/2015/12/28/how-to-install-hugo-on-linux-and-windows/

If you haven’t got it on your machine, clone the repo to start working:

git clone https://github.com/ducphanduyagentp/ptnega-site.git

Now I will guide you step by step to build your site on Github Pages.

1. Build your blog in the working directory

In the config.toml file, there is an option called “baseurl”. In this post, we need to use it to run our site properly.

By default, your Github Pages are run at:

http://your-user-name.github.io/your-repo-name

This will absolutely your base URL for your Hugo blog. Add this line to the top of config.toml

baseurl = “http://your-user-name.github.io/your-repo-name”

For example:

baseurl = “http://ducphanduyagentp.github.io/ptnega-site”

Now, it’s easy to build your site to a specific directory. This directory contains all the file you need to push to your repository to run your blog.

At the top level of your working directory, use this command:

hugo

By default, your site will be built in the public/ directory. If you want to build it in a directory of your choice, use this command instead:

hugo -d your-build-directory

2. Create gh-pages branch in the repository

gh-pages is the branch of your repository which contains source codes from public/ in the previous step. Using git to create this branch. Note that this branch need to be orphaned

git checkout –orphan gh-pages

Now you’re switched to gh-pages branch. Simply copy all the file from public/ folder in the previous step to your working directory (which is now in gh-pages branch).

For your convenience, you can clean up the branch before copying neccessary files.

3. Push source codes to gh-pages branch

Now, everything is ready to be push to your repository.

# Add all the changes to commit

git add -A

# Commit the changes

git commit -m “Build gh-pages”

# Push everything to your repository

git push origin gh-pages

Now, your blog is online at, for example:

http://ducphanduyagentp.github.io/ptnega-site/

If you encounter any problem during the deploying process, feel free to leave a comment here and I will answer your question.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: