This tutorial is for mac users.

Here we have three easy steps: Install it, Build locally, and Put it on Github.

STEP 0 - Installation

You’re gonna need:

• hugo
• git

Install Hugo

Type this in your terminal.

brew install hugo

Check if it’s installed successfully.

hugo version

Install Git

If you’ve installed it, it’ll show your version. Otherwise, it’ll install it for you ;)

git --version

STEP 1 - Build the blog locally

Before make it public, we need to modify it.

Create our blog

Go to the directory where you wanna store your website. I stored it on the home directory.

cd ~
hugo new site [what-ever-you-want]

And a folder will appear.

So, what are those files for?

• config.toml: we modify this configuration file to make our website fancy.
• content: it stores all of our blog posts.
• static: it stores static files such as pictures, logos, etc. They all will be copy to /public folder.
• themes: it stores our fancy theme.
• others will not be used for now.

After executing hugo command, there’ll be a public folder. It stores the generated static file. And we’ll put this public folder on Github later.

Choose a theme

Go to the official website Hugo themes and pick one.

Then go back to your blog directory and clone your theme in to the themes folder.

cd Blog
cd themes
git clone https://github.com/dataCobra/hugo-vitae.git

Use your theme

Go to your blog directory and modify config.toml. Check this example config. You probably need some time to make your own copy of it.

Create a blog

Let’s create a about page.

cd Blog
hugo new about.md

Then, a new file created in the content folder. Edit the file, delete the line “draft=true” and add some content to it. It’ll appear on the http://localhost:1313/about.

Let’s create a blog post.

cd Blog
hugo new posts/first-blog.md

According to the config.toml, files in posts folder will appear on home page.

Make it work

In terminal.

cd Blog
hugo server

Go to http://localhost:1313/ in your web browser. You’ll see the page.

STEP 2 - Put it on Github

Github provides free personal page which is awesome. Go to the public folder.

cd Blog
hugo
cd public

Create a Github Repository

Create a new repository and name it [your-username].github.io. After pushing your stuff on it, it’ll automatically become a public website, trust me;)

Commit

cd Blog
cd public
git init
git add .
git remote add origin https://github.com/[username]/[username].gitbhub.io.git
git commit -m "first commit"
git push origin main

After a while, your brand new blog will be online! That’ll be on https://[username].github.io/

Congrats!

ref:

• Build a Personal Website With Github Pages and Hugo