Build a personal blog with Hugo and Github Pages

A personal blog is the perfect place to showcase your experiences or achievements. It's a great feeling to blog about a bio, some really cool little project or life experience.

Some friends who like to write blogs must have thought that it would be nice to have a blog website of their own.

Therefore, the purpose of this article is to share with you a solution to build a blog by yourself: Hugo + Github pages

introduce

Before starting to build, it is necessary to introduce to the friends what Hugo and Github pages are.

Github must be familiar to everyone, it is the largest same-sex website in the world. Host projects for individuals, teams, or organizations.

Hugo is a static website generator written in Golang which is very simple, efficient and easy to extend. You can use it to change different themes, generate static blog sites, and with Github pages , netizens from all over the world can visit your website.

The following sites are built with Hugo and Github pages , and the deployment process is described below.

step1. Apply for a Github repository

1. Register on Github

If you already have an account, log in directly

2. Understand the Github page creation process

Go to Github Pages official website to understand the creation process.

3. Create a repository

1. Click Github the "+" next to the avatar in the upper right corner,
2. Click New repository to enter the create warehouse page

3. Enter the warehouse name, as shown below:
   

   Note: The format of the repository name is <username>.github.io , and username is your Github account name.

4. Click on the bottom of the page Create reporitory to create successfully
5. Access https://<username>.github.io to see if the access is successful

step2. Install Hugo

There are many ways to install Hugo , and how to install it depends on your computer system.

Hugo official website installation guide

My computer is win10 system, you can download exe file and install it directly, or you can download the source code to compile and install.

Here is the win10 source code compilation process:

1. clone file to local

    $ git clone https://github.com/gohugoio/hugo.git

2. Install

    $ cd hugo
   $ go install

3. Compile into exe file

    $ go build -o hugo.exe main.go

4. Add hugo.exe to the environment variable and move hugo.exe to the file you want to put in, for example, I put this file in the D:\software\Hugo\bin file, in the system You can add this directory to the variable path

5. Test Hugo

    $ hugo version
   hugo v0.94.0 windows/amd64 BuildDate=unknown

step3. Build a local site

1. Create a new Hugo site

Go to the directory where you want to store Hugo and execute the following command:

 # blog 是站点名称
$ hugo new site blog

After the new creation is successful, enter the blog directory, and you can see the directory structure:

Directory resolution:

• config.toml : The configuration file we need to change
• content : holds all blog posts
• static : Store static files such as background images, logos, CSS , JS etc. The files in this directory will be copied directly into /public . This folder has a higher priority than /static under the theme.
• themes : store downloaded themes
• archetypes : The stored .md template file has a higher priority than the theme file under the /archetypes file.
• layouts : save .html template, the priority is higher than the theme folder under the /layouts folder
• public : After executing the hugo command, the directory where the generated static files are stored

step4. Select Hugo theme

Go to the Hugo theme website and choose a theme you like.

Take the KeepIt theme for example.

Execute the following command:

 $ cd blog
$ cd themes
$ git clone https://github.com/Fastbyte01/KeepIt.git

After the download is complete, modify the config.toml file, and the content before modification is as follows

 # blog/config.toml
baseURL = "http://example.org/"
languageCOde = "en"
title = "Hugo Site"

We enter the Github repository of the theme we just downloaded, enter the exampleSite file, and we can see that the developer has provided us with an example, which can be copied directly.

Some of the copied content is as follows:

 baseURL = "https://[your github username].github.io/"
languageCode = "en"
defaultContentLanguage = "zh-cn"
title = "StrideDot"
theme = "KeepIt"

Note: Change [your github username] to your Github username.

step5. Create your first blog

The installation process is complete and it is now finally time to create our first blog.

 $ cd blog
$ hugo new about.md

Note: You need to remove about.md in the draft=true 97ca03b2e5352652aaf4b5243fa28aba--- file, otherwise the site will be invalid.

Test site:

 $ hugo server

Enter http://localhost:1313 in the browser, press Enter, the page will display the theme we just downloaded.

step6. Deploy to Github

The previous installation and testing are all preparatory work. Our purpose is to generate static files from the markdown grammar and publish them to the warehouse we just applied for.

Execute the following command:

 $ cd blog
$ hugo

Entering the public directory, we see that Hugo has generated a lot of static files for us.

Now we push these static files to the stridedot.github.io warehouse applied for in step1

 $ cd public
$ git init
$ git add .
$ git remote add origin https://github.com/username/username.github.io.git
$ git commit -m 'first commit'
$ git push -u origin main

Refresh Github repository, you can see that the file has been pushed up.
So far, our site has been successfully published.
Enter https://stridedot.github.io in the browser, and the page you see is exactly the same as the one we see locally.

The above is the whole process of creating a personal blog. Interested friends, please try it! ! !