A few days ago, I learned how to use Hugo +GitHub Pages to build a personal blog. Today, I will record and summarize it here.

First, what are GitHub Pages and Hugo?

  • GitHub Pages is a static site-hosting service that hosts individual, organization, or project Pages directly in a GitHub repository or repository.

  • Hugo is a static site generator written in the Go language that is optimized for speed, ease of use, and configurability to be fast and flexible.

The next step is to build a blog for yourself.

The following steps take the operations on macOS as an example. Other operating systems are similar and may have different tools and commands.

Create a GitHub library.

1. Go to GitHub and log in/register an account.

GitHub website: http://github.com

2. Create a GitHub repository named

username

.github. IO, username is your Github account username. In the picture below, I’m red because I’ve already created the repository name, but that’s exactly how I write the repository name and click New.

Two, install Hugo

Open the terminal and dig into the following command line to install Hugo

brew install hugo
Copy the code

After the download, run the following command to check whether the installation is successful. If the version number is displayed, the installation is successful.

hugo version
Copy the code

3. Create a Hugo website and configure it according to the hints on the official website.

1. Create a directory to load the site. Then open the terminal and go to the directory via CD, such as the Hugo folder I put on the desktop

The CD ~ / Desktop/Hugo

2. Run the following command to create the Hugo website

hugo new site blogName  
Copy the code

BlogName is the folder name of the site you want to create, for example, mine is xiaocaotx.github. Io-creater, so I execute Hugo new site xiaocaotx.github

3. Select the Hugo theme and download it locally

1) Open the Hugo Themes page and choose a theme you like.

Hugo Themes: themes.gohugo.io

2) Clone the selected theme to a local directory. The following uses the Tranquilpeak theme as an example, but the default theme is recommended because its other themes can cause some bugs

Github. IO -creater # replace "xiaocaotx.github. IO -creater" with your directory name. Mkdir -p themes # create a "themes" directory. CD Themes # Open the "themes" directory. Tranquilpeak theme clone git clone https://github.com/kakawait/hugo-tranquilpeak-theme.git tranquilpeak # to "tranquilpeak" directory.Copy the code

4. Edit the configuration file

  • In the root directory of the website folder, my name is Xiaocaotx.github. Io-creater, use Visual Studio Code to open config.toml file.

  • Edit the config.toml file by referring to the configuration instructions for the Hugo theme selected. Note: The theme configuration item refers to the name of the selected theme and must be the same as the name of the directory to which the selected theme was cloned. In this case, theme = “tranquilpeak”.

So far, the new and configuration of Hugo website has been completed.

4. Create a new article and write a blog

  • Go to the root directory of the site folder.

    cd xiaocaotx.github.io-creater

  • Create a new article using the following command.

    Hugo New Post/first blog. md # “first blog. md” is the file name of the new post.

Then edit the new article, add content, and save.

Preview the effect of local websites

  • Start Hugo Server.

    hugo server -D

  • Use your browser to open http://localhost:1313 preview.

  • If you’re happy with the preview, go to the next step.

  • If not, modify and preview again.

Build a public directory

In the root directory of the Hugo website folder, execute the Hugo command to build.

hugo 
Copy the code

Hugo then saves the content of the built site in the public/ folder at the root of the site by default.

Create a. Git file in the public directory to build a git library

  • Create a. Ignore file in xiaocaotx.github. Io-creater with vscode

  • Go to xiaocaotx.github. IO -creater /public to initialize the Git library.

    CD /public # The generated HTML file is saved in the “public” directory.

  • Go to the files in the public directory and check the.git file.

    Ls -a # Displays a list of all files and directories, including hidden files.

Associate a local Git repository with a remote GitHub repository

  • Go to your GIthub account, open the repo you created earlier, copy the link, and choose your own format. Here I’m using SSH

  • Add remote libraries to your Git local library in the public directory. Enter the Git remote add Origin + link

    git remote add origin [email protected]:xiaocaotx/xiaocaotx.github.io.git

  • View the config file.

    Git /config

If no error message is reported, success is reported.

Commit the changes locally and push them to the remote repository

1) In the public directory, commit your changes and write a Commit message to briefly describe your changes.

Git status # Git add. # Add all the modified files. You can also just add a file. Git commit -m "Add a new post" # "Add a new post"Copy the code

2) In the public directory, push the changes to the remote library.

git push -u origin master
Copy the code

Since this is the first time to commit, -u needs to be added, and git push is only needed in the follow-up.

Set GitHub-page to display HTML, and **** to access your blog based on the personal blog links generated by GitHub Pages.

1) Go to the new Github project library and click Settings to enter the Settings screen

2) Go to the following location, click Use Github – Page to display HTML, and then follow the generated link to visit your blog.

At this point, the entire process of creating and displaying the blog is complete, and the subsequent updating of the blog only needs to repeat steps 4, 5 and 9. Then you can also view and share your own blogs via links.