Menu

Subscribe

Build a personal website with Hugo

Introduction to HUGO and GitPage

Hugo is one of the most popular open-source static generator and is written in GO. It is simple and easy to deploy.

Github Pages is a static web hosting service provided by Github which provides convenient deployment directly through Github repository.

The following intruction is suitable on Mac.

STEP 1: Installation

install Hugo

open your terminal, run the following command:

brew install hugo

check the hugo version, run the following command:

hugo version

Install Git

install git with the following command:

pip install git

check the git version, run the following command:

git --version

STEP 2: build your site locally

First step is to go to the directory where you want to store your source code. Here is the sample command in terminal:

cd /Users/jinq/Desktop/duke-2020-fall/biostats

hugo new site mysite

then you should see a directory called “mysite” on your directory.

The file /directory we will work with:

  • config.toml: configuration file of your website
  • content: store all contents on your website such as blog, resume, posters.
  • static: store all static file such as your background, logos, css, js.
  • themes: the theme of your website which you can boostrap from hugo website
  • public: generated after execute “hugo” command, the static file you pushed to Github repository

Choose a theme

pick a theme you like from the hugo wesite or from Github. I used the theme which was based on “casper” theme. run the following command:

cd mysite

cd themes

git clone https://github.com/vjeantet/hugo-theme-casper

Edit config.toml

Now let’s set up some configuration file. Open you text editor and a configuration example as following:

baseURL = "https://[your github username].github.io/"
languageCode = "en-us"
title = "title of your site"
theme = "the theme you choose"
paginate = 3
Copyright = "© Qiuhao Jin 2021"
pluralizelisttitles = false
cover = "images/cover.png"

[params]
description = "description of your website"
author = "authornane"
authorlocation = "location name"
bio = "description of your biography"
cover = "images/cover.png"
logo = "images/logo.png"

githubName = "github username"
linkedinName = "linkedin username"
email = "your email"
hideHUGOSupport = false



[[menu.main]]  # here are the buttons on the menu
name = "Home" # Button will display as "Home"
weight = 100 # the weight decides the position of the button (higher or lower)
identifier = "home"
pre = "<br />"
url = "/"

[[menu.main]]
name = "Contact"
weight = 0
identifier = "contact" # this button will refer to a markdown file named "contact" in the content folder
pre = "<br />"
url = "/contact"

[[menu.main]]
name = "Blog"
weight = 0
identifier = "blog" # this button will refer to a markdown file named "blog" in the content folder
pre = "<br />"
url = "/blog"

[permalinks]
post = "/:slug/"
[sitemap]
ChangeFreq = ""
Filename = "sitemap.xml"
Priority = "-1"

Create your first blog

create your first markdown file in the content folder by running:

cd mysite
hugo new blog.md

In order for the file to display on your site, you need to Delete “draft=true” in your markdown file

Test the site locally

run the following command:

cd mysite
hugo server

go to http://localhost:1313/

STEP3 Deploy to Git Pages

you should see there are static files in your public folder underneath mysite directory.

Create your Github Repository

  1. Go to Github repository and click on “New” to create a new Repo

  2. Don’t initiate with a README.md, click on “Create Repository”.

  3. Go back to Terminal and commit all the files in your public folder:

    cd public
git init
git add.
git remote add origin https://github.com/[your own repo].github.io.git
git commit -m "first commit"
git push origin master

Check your website

  1. after successfully commit your change, go to your respository and click on “Settings”
  2. when you see the green box, clicked on the published link

Update your website

  1. pull from your repository to update your local branch.

    git pull origin master

  2. add your new blog in “content” directory

  3. update your config.toml file accordingly.

  4. run the following command

    git add.
git commit -m "added new blog"
git push origin master

The End

you can check your website on Github now! This blog is inspired by Yuanyuan Ge.