How to create a blog using Github Pages and Hugo in 10 minutes

August 11, 2023 · Rich

Ah, the age-old tradition of starting a blog. Whether you’re doing it to share your favorite cat photos, write about your ever-so-exciting daily life, or discuss something actually serious, you’re in luck!

Let’s dive into the realm of Hugo and GitHub to create a blog that even your grandma would be proud to share on Facebook.

Initial setup

Step 1: Set up 2 Github repos like a Pro

Why one when you can have two? That’s right, folks!

test_blog: Where blogs and dreams live.
test_site.github.io: Sounds techy, right? It’s the repo for showing off! One trhing to remember, it has to come with the suffix github.io in order to be published in Github properly.

And clone both repos to your local, because we will need to edit.

Step 2: Install Hugo (Not the Boss)

Sorry, not the fashion brand.

Hugo is a static site generator that simplifies the creation of websites. Installing it on your system is the first step in creating your new site.

brew install hugo

Step 3: Create a Hugo site (No, Nnot a dating profile)

Time to initialize our blog love child. Naming it blog (Because we’re creative like THAT) inside the first repo.

cd test_blog
hugo new site blog

Step 4: Add themes (Or how to dress your blog)

Let’s beautify your blog with the PaperMod theme, one of the many themes Hugo offers.
Note: you can find detailed installation guide here: https://github.com/adityatelange/hugo-PaperMod/wiki/Installation

Install: Because copying others’ fashion sense is fine online!

git clone https://github.com/adityatelange/hugo-PaperMod themes/PaperMod --depth=1

Edit: Here’s where you make it your own without breaking anything (hopefully). All the themes are configured in hugo.yaml or hugo.tomlfile. There are a lot of things you can config, below are the most important ones. You can add copy all other configs from theme page: https://github.com/adityatelange/hugo-PaperMod/wiki/Installation#sample-configyml

baseURL: 'https://test_site.github.io/'
languageCode: 'en-us'
theme: "PaperMod"

This will create the first blog post in the folder

hugo new posts/test.md

Step 6: Test website (Yes, you have to test it)

Preview your masterpiece:

hugo server

Step 7: Connect 2 repos (because they should talk)

Get these repos connected. It’s like setting up a playdate, but for code.

Move to the test_site.github.io repo, edit readme file, and push to Github. You will need to have 1 commit for this to work properly.

cd test_site.github.io
git add .
git commit -m 'inital commit'
git push

Then move back to the location where you

cd ..
cd test_blog\blog
git submodule add -b main https://github.com/xxxxx/test_site.github.io.git public

Step 8: Final Testing (Because Once Wasn’t Enough)

Double-check, triple-check, and then generate!

hugo server

Generate static files. This command will automatically generate a lot of files inside public folder.

hugo -t PaperMod
cd public 
git add .
git commit -m 'generate static files'
git push origin main

Now, all local work are done.

Step 9: Publish the website in Github

Now go to the repo within Github, find settings > pages, and voila! Your webpage is now hanging out at test_site.github.io.

Step 10: You Did It! (Probably)

Congrats on your new blog! Now go out there and blog like no one’s reading (because let’s be honest, it might take a while before they do).

Happy blogging, you absolute legend!

Publish a new post

Step 1: Write a blog post (Or a novel, who’s judging?)

Look at you, the next Shakespeare of the blogging world!

Create the Post: There are 2 ways to do this, you can choose either one
- 1. Simply create an MD file under the /content/posts/ folder.
- 1. Use Hugo to create. It’s like magic, but geekier.
```
hugo new --kind post posts/test.md 
```
Push Draft Versions: Feel like saving your progress? Do it just like you’re writing code because, well, you are.

git add .
git commit 
git push

“Commit early, commit often,” they say. Who are “they”? No idea, but they seem to know their stuff.

Step 2: Publish the Blog (Cue fanfare 🎺)

Finished your magnum opus? Excellent! Let’s turn those words into webpages.

Generate Static Files: The public folder isn’t going to update itself (if only, right?). Time to give it some fresh content.

hugo -t PaperMod

Publish with Hugo: Feel that? That’s the rush of publishing! Let’s wrap this up with a snazzy sequence of commands.

cd public 
git add .
git commit -m 'add blog'
git push origin main

Conclusion: You Did It (Again)!

Behold your blog post, live and in pixels! You’ve written, you’ve coded, you’ve conquered. Go on, share it with the world, or at least with your cat. Either way, congrats on being absolutely blog-tastic!

Fin. No, really, you can stop reading now.

Reference

#blog #hugo #github #tech