Use Hugo to build blog on gitee (under Windows environment)

Use Hugo to build blog on gitee (under Windows environment)

Hello everyone! This is the first time I set up a blog on gitee, and it is also my first time to blog. As a blogger, I have taken many detours in the process of building a blog, but I also gained a wealth of experience. Now I share the process of building my blog with everyone, hoping to help those in need. Of course, there are still many shortcomings, you are welcome to advise!

1. Why use gitee?

I believe that many friends think that it is better to build a blog with GitHub, so why use gitee? Below I summarize the advantages of using gitee:

1. Smoother access Due to some well-known reasons, GitHub may be unavailable or slow in some cases. Because the server is in China, the access speed of gitee is still very good; (Yeah! On the day of writing this blog, many friends said that they could not Visit GitHub~)
2. Private repositories Compared to GitHub, gitee provides the function of private repositories, which provides more options for code hosting on the Internet.
   (Update: GitHub now seems to also support private repositories)

2. Install git

• Installation address: https://git-scm.com/download/win
• The next step is over during installation
• After success, right click to see git bash

3. Install Hugo

• Installation address https://github.com/gohugoio/hugo/releases
  

• Create a Hugo folder, open and create the subfolder bin, sites (the location where you will blog locally in the future), and unzip the compressed package into the bin folder

• Add hugo to the system path

  • Open System Advanced Settings -> Environment Variables, click Path in User Variables, click Edit, click New in the upper right corner, copy and paste the address of the bin folder above, press Enter, and click OK

• Verify that the installation is successful . Enter in git bash

  hugo version

4. Create a remote warehouse

• Register a gitee account

• Click the "+" sign in the upper right corner to create a new warehouse

• Custom warehouse name (no need to be the same as the user name)

• Open source: open

• create

  Now that you have your own warehouse, remember to write down the warehouse address, you will need it later~

5. Build a blog (all the following commands are entered in git bash)

• New blog

  In the sites folder

  hugo new site myblog

  myblogIs the name of the blog, which can be customized. This article uses this as an example

• Set theme

  • Hugo blog theme download library: https://themes.gohugo.io/
  • After finding a theme you like

    • Normal operation: unzip after Download, open, remove the "-master" of the folder name, and then move myblogthe entire themesfolder to the folder

    • Command line operation:

      cd themes
      git clone https://github.com/jbub/ghostwriter

      Theme here ghostwriteras an example

• The themes/exampleSitecopy and paste the contents of the folder to myblogthe
  + Note that if the extension copied the config file is .yml, config.toml then delete the original file, or you can directly replace

• Modify the config. file baseUrl, change it to the address of the gitee warehouse (remember to end with "/") (do not add .git) (do not have extra spaces), add configuration

  • Add the last three lines

• View theme effects

  • In myblogthe

    hugo server -t ghostwriter --buildDrafts

  • Copy the last one http://localhost:1313to the local browser and press Enter ( note that git bush remains open at this time; Google Chrome is recommended )
  • Note: Right click copy/paste to copy and paste on git bush

• Create your own blog post (students who are impatient can skip this step first)

  • Add blog

    • Open myblog/ content/ post, New blog.md (blog source file)

    • Use vscode, Typora, Notepad++ and other software to open blog.md (if none is available, notepad is also possible)

    • Write at the beginning
      

    • Write specific content according to the syntax of markdown

    • Back to the myblogfolder,

      hugo server -t ghostwriter --buildDrafts

    • Copy the last one http://localhost:1313to your local browser and press Enter to preview your blog

• Deploy the local blog to gitee

  • Under the myblogfolder

    hugo --theme=ghostwriter --baseUrl="(warehouse address)" --buildDrafts

  • In myblogwill generate publica folder

  •   cd public
      git init                          //初始化本地仓库
      git add .						  //将public文件夹下的所有文件放入缓存流中等待提交，注意此处空一格有个点
      git commit -m "xx"                //把缓存内容放进发送头，仍为待发送状态，“xx”为对本次上传作的说明
      git remote add origin (仓库地址)   //绑定了.git配置文件夹对应的远端服务器
      git push -u origin master         //推送到gitee
    

    note

    • git add .Before execution , it is best to check .gitignorewhether the file limits the uploaded content (it will cause 404 to appear on the blog displayed on gitee), if so, modify it to

      • Explanation: This file is used to write ignore rules (ignored files will not be uploaded to gitee)
      • Start with the "#" sign to indicate explanation, that is, the file is actually uploaded without ignoring the rules~ (Of course, you can delete this file directly)
      • If you don’t want to modify it every time, you can modify the .gitignore file in the static folder

    • If a warning appears,
      enter

      git config core.autocrlf false //only valid for the current git warehouse
      or git config --global core.autocrlf false //globally valid

    • If you only need to upload a file, enter

      git add xxx (file name)

  • Check out the blog on gitee

    • Click Service->Gitee pages at the top right of gitee, to force the use of HTTPS, click Start, open the generated URL, and you can see your blog

    • If you find that the page rendering fails, that is, there is no theme, refresh it first to see if it is valid; if it still does not work, open the developer tools of the browser and check in the head whether the .css link is missing a "/" after the warehouse address gitee.io, If it is missing, add a "/" to the address of baseUrl in the config.toml file in the local myblog folder, and upload the contents of the public folder again

    • If there is still no rendering, you can comment out the baseUrl in the local config.toml file (comment method: enter "##" at the beginning of the line), delete the public folder, and then redeploy to gitee, before deploying the remote warehouse Empty, then command

      hugo --theme=ghostwriter --baseUrl="(warehouse address)" --buildDrafts

      To

      hugo --theme=ghostwriter --buildDrafts

      Then it is the normal deployment operation.

• Upload again after local modification

  • myblogin

       hugo                    //编译站点（要在本地浏览器查看，则使用 hugo server）
       cd public
       git add .
       git commit -m “xxx”
       git push -u origin master
    

6. Testimonials

So far, the blog is built!

The process of setting up a blog may not be so smooth. Various bugs may make people doubt life, but if you stick to it and look at the blog you built by yourself, you will feel that everything you paid before is worth it! This is also the pride of our technical people.

The first time I write a blog, mistakes are inevitable. You are welcome to correct me, I am very grateful!

If you have friends who are interested in this article or have any ideas, you can leave a message in the comment area, and everyone can study and discuss together~

PS: After a round of building, do you know how to upload files without creating a blog? That's right, it just saves all the steps related to blogs, just try it out on the computer!

more recommendations:

1. Common git operations and instructions
2. Hugo+Github build a personal blog (under Windows environment)
3. How to quickly synchronize vscode code to github/gitee

Reference
[1]: https://blog.csdn.net/man_zuo/article/details/88651416
[2]: https://blog.csdn.net/weixin_43691058/article/details/101772871