Build a hugo blog and deploy it to Github

premise

1. Be sure to configure git. For specific tutorials, see Building a hexo blog under windows and deploying it to github

2. It is recommended to install Windows Terminal in the Microsoft Store to facilitate subsequent operations

Install

1. Download: Go to the GitHub home page to download https://github.com/gohugoio/hugo/releases

   

   After downloading and decompressing, you can get

   

2. Configure environment variables: Add the directory where hugo.exe is located to the system environment variable Path

   Copy the directory where hugo.exe is located above

   

   Open and edit system environment variables

   

   Select environment variables

   

   Click the system variable Path below and select Edit

   

   Click New on the right and paste the copied path into it

   

   Then click OK all the way to exit

3. Verification: open a terminal, enter

hugo version

If the version number appears, the installation is successful

start up

1. Create a blog folder: Create a blog under a folder called tmp

   

   Open the terminal and switch to this directory

   

   Enter the command to create a blog

hugo new site myblog

The blog has been built, and a directory named myblog is generated under this path

Switch to the myblog directory for follow-up operations

2. Download the theme https://themes.gohugo.io/, install it according to the theme requirements, and modify config.toml

   Take the m10c theme as an example

   

   There are hints at the bottom of the page

   

   That is, clone the warehouse in the myblog directory

git clone [email protected]:vaga/hugo-theme-m10c.git themes/m10c

At this time, the m10c theme directory is generated in the myblog/themes directory

Next open the config.toml file in the myblog directory

add a line

3. start a blog

hugo server --theme=m10c -D

Now the blog is started on port 1313 of this machine, enter in the browser search box localhost:1313to see the generated blog

Press Ctrl + C to terminate the blog

4. Create an article: enter the command

hugo new post/first.md

At this time, there are newly created articles in myblog/content/postthe directory

open file for editing

Note that the above draftindicates whether the article is a draft, and the default is that truethe draft will not appear on the website

Enter the command again

hugo server --theme=m10c -D

to see the changes

deploy

1. Create a new warehouse on Githubusername.github.io

   Must be username.github.io, usernamefor your Github username

2. Use hugo to generate web pages and host them in GitHub warehouse

hugo --theme=m10c --baseUrl="https://wjl-lab.github.io/" -D

3. myblog/publicPush the directory to the master branch of the newly created warehouse

cd public
git init
git add .
git commit -m "message"
git remote add origin https://github.com/wjl-lab/wjl-lab.github.io.git
git push -u origin master

4. Visit the website wjl-lab.github.io

add article

hugo new post/xxx.md
hugo --theme=m10c --baseUrl="https://wjl-lab(username).github.io/" -D
cd public
git add .
git commit -m "message"
git push

• create article

• Generate pages with hugo

• push to the remote repository on GitHub

Change setting

Find out by yourself. . .

fix image problems

1. Images are placed in the static directory

![](/images/images.jpg)

2. Images are placed in a folder with the same name as the blog file

![](images.jpg)

3. Use PicGo + Gitee to create a picture bed

For specific tutorials, see picgo-gitee map bed construction