Hugo Website on Github

Publish your website on Github

Github pages with Hugo

Github allows you to publish a Website for your projects called Github pages. You can publish Github pages per project and once per username/organization.

What this means is that you can publish/host your own website on https://<USERNAME|ORGANIZATION>


Install Hugo by following the official instructions. For Ubuntu users the recommended way is to use the snap package:

$ snap install hugo --channel=extended

Next, follow the official step-by-step instructions to publish your pages to github.

Development notes

Serve locally from source repo:

$ cd ~/workspace/github/blog-source-repo
$ /snap/bin/hugo server --watch

Serve drafts:

$ /snap/bin/hugo server --watch --buildDrafts

When ready to publish:

$ cd ~/workspace/github/
$ rm -rf *

Next, from Hugo source repo re-publish:

$ cd ~/workspace/github/blog-source-repo
$ hugo -d ~/workspace/github/

Back to the target repo:

$ cd ~/workspace/github/
$ git add --all
$ git commit -m "rebuilding site `date`" -a
$ git push origin master

Automation script


# If a command fails then the deploy stops
set -e

# cleanup generated content from earlier runs
rm -rf public/*

printf "\033[0;32mDeploying updates to GitHub...\033[0m\n"

# Build the project.
hugo -t beautifulhugo

# Go To Public folder
cd public

# Add changes to git.
git add .

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

# Push source and build repos.
git push origin master


Image handling (jpg)

Convert all images in hugo’s static/img directory to jpeg:

$ cd ~/Pictures/braindump
$ find resized/ -type f -delete
$ for file in `find orig -type f`; do convert -resize 700x $file resized-jpg/${file%.*}.webp; done
$ ./ resized-jpg

Image handling (webp)

WebP is a modern image format that provides superior lossless and lossy compression for images on the web.

Convert single image to .webp:

$ cwebp -q 60 input.webp -o output.webp
$ cd static/img
$ for file in `find -type f -not -name '*.webp'`; do cwebp -q 60 $file -o ; done 
$ find -type f -not -name '*.webp' -delete

# find jpg/ -type f -delete
# for file in `find orig -type f`; do ./ -s 600 $file jpg/$file; done

# find png/ -type f -delete
# for file in `find webp -type f -name '*.webp'`; do convert $file png/${file%.*}.png; done


Free image galleries:

List of free galleries: