Hugo Website

What is Hugo?

Hugo is one of the most popular open-source static site generators. With its amazing speed and flexibility, Hugo makes building websites fun again.

1. Create two repos on your GitHub

• Create a your-project (e.g. hugo-website) repository on GitHub.

This repository will contain Hugo’s content and other source files.

• Create a yourusrname.github.io GitHub repository.

This is the repository that will contain the fully rendered version of your Hugo website.

2. Add website content in your-project (e.g. hugo-website)

# Add a new repo `hugo-website`on your GitHub
git clone git@github.com:yourusrname/hugo-website.git&& cd hugo-website
git init

# Add a theme (e.g. docsy) as a submodule
git submodule add https://github.com/google/docsy.git themes/docsy
echo 'theme = "docsy"' >> config.toml
git submodule update --init --recursive

# Commit in your repo
git add .
git commit -m 'initial commit'

3. Enable website search

vim hugo-website/config.toml 

 # Enable Lunr.js offline search
offlineSearch = true

Ref

4. Enable Emoji

vim hugo-website/config.toml 

# Add  
enableEmoji = true

5. Add resources using Hugo’s short codes

• Short codes are simple snippets inside your content files calling built-in or custom templates.

6. Insert videos

<div class="parent">
      <div class="child" style="position: relative; padding-bottom: 50%; height: 0; overflow: hidden;">
      <iframe src="https://gym.openai.com/videos/2019-10-21--mqt8Qj1mwo/BipedalWalker-v2/original.mp4" style="position: absolute; top: 0; left: 0; width: 40%; height: 40%; border:0;" allowfullscreen title="BipedalWalker-v2"></iframe>
      </div>
      <div style="position: relative; padding-bottom: 50%; height: 0; overflow: hidden;">
      <iframe src="https://gym.openai.com/videos/2019-10-21--mqt8Qj1mwo/MountainCarContinuous-v0/original.mp4" style="position: absolute; top: 0; left: 0; width: 40%; height: 40%; border:0;" allowfullscreen title="MountainCar"></iframe>
      </div>
</div>

7. Deploy to yourusrname.github.io

• Make sure your website works locally
  • hugo server
  • open your browser to http://localhost:1313.
• Prepare a deploy.sh file

vim ./deploy.sh

# Write the below in ./deploy.sh
set -e
printf "\033[0;32mDeploying updates to GitHub...\033[0m\n"

# Build the project.
#hugo #-t docsy # if using a theme, replace with `hugo -t <YOURTHEME>`
hugo -t docsy

# Go To Public folder
cd public

# Add changes to git.
git add .

# Commit changes.
msg="rebuilding site $(date)"
if [ -n "$*" ]; then
	msg="$*"
fi
git commit -m "$msg"

# Push source and build repos.
git push origin master

• Deploy your website to your yourusrname.githu.bio

git submodule add -b master git@github.com:yourusrname/yourusrname.github.io.git public


./deploy.sh "v0"

• The public folder will be pushed to yourusrname.github.io
• Check your website yourusrname.github.io

Reference

• Host on GitHub

Error

• If you acidentally delete (e.g. rm -rf public) the folder which Hugo uses to place the rendered flies, you probably will encounter this error when you try to git push:
  • fatal: in unpopulated submodule 'public'
  • Ref

# remove public dirctory
rm  -r public/

# remove files from the working tree and from the index
git rm -r --cached public

# re-add public as submodule 
git submodule add -b master --force git@github.com:yourusrname/yourusrname.github.io.git public

• ← Previous
Next →