What is theHugo ？

Hugo is a static website generator written in the Go language. Hugo is known for its speed, claiming to be the fastest website generation framework in the world

How to installHugo ？

The first step is installationHugoBinary file of

First of all, we need to install a Hugo binary file (Hugo or HUgo.exe). This is the download address of Hugo, click to download the corresponding version. Then this is the official website of Hugo. Because it is a foreign website, slow speed is very normal, conditional can open the accelerator

Second, configure the system environment for the binaries

The binary file of Hugo we downloaded is a compressed package, we can unpack the compressed package into our favorite directory, and then we can see a hugo. exe file in this directory ** (try not to put it on disk C) **. Then add it to the Path in the computer’s system variable as follows

  1. Right-click my computer on the desktop and click on properties to bring up a window showing information about my computer
  2. Clicking advanced System Settings brings up a system properties window that jumps to its advanced page by default
  3. When you click on environment variables, a window pops up, and generally you see two variables, user variables and system variables
  4. We are inSystem variablesFound a file namedPathThe variables of
  5. Click on theThe editor
    1. win10: a window for editing environment variables will pop up. Click Add inside and copy the previous onePathJust paste in the path
    2. Doing, doingThere is nowin10So a nice UI, it’s just one input field, and in the input field is the environment variable that we set, and we add one at the end of the environment variable;If you have it, you don’t have to add it, and then you copy itPathJust paste in the path
    3. Small extension: the user environment variable is only for the current account, the variables in the computer will not affect the other account, the system variable for the computer, all accounts can be used, when we put a software.exeAdd the directory path toPathIn, you can directly enter the software name in the command line, you can start the software, inwin + rCan also be started
  6. Enter it on the command linehugo versionCheck whether the configuration is successful. If the configuration is successful, the version number is displayed

How to usehugoBuild a blog?

Step 1: Create a new project file

Create a new directory for your blog project. Using Hugo New Site in the console to set up a blog project site, let’s take ABC as an example

Hugo new site ABC // There will be an ABC file directory in the directory, which contains some basic configuration of the blog projectCopy the code

Step 2: Add themes

Hugo can use the theme developed by others, saving us the time of designing and typesetting. How to install the theme

cdGit init // initialize git repository To prevent accidental damage after the project is git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke / / this is the default theme of the official, When you enter this command, the download will start, save it in themes directory, after finishing, there will be an ananke directory, this is the name of the theme, note: the download may be slow, if you can start FQ, please wait patientlyecho 'theme = "ananke"'>> config.toml // This line of command means that they ="ananke"This text is appended to config.toml, which we can add manually in config.toml using the editor directly. The config.toml file is stored in the site directoryCopy the code

Now that the theme has been added, the next step is to create the article

Step 3: Add articles

The article is in Markdown format. There are already some good Markdown editors on the web. I use Typora

  1. Let’s create a new onetestAs an example
hugo new posts/test.md
Copy the code

Hugo new is a new command. It will create a posts folder in the content, where there is an article of test.md. If posts are not added, it will directly create a new article in the content

  1. Edit our new article actually we can use itTyporatheseMarkdownThe editor writes the article in advance and copies it directly tocontentUnder thepostsInside, but if I do,HugoWe need to add some declarations at the beginning of the article
title: "My First Post"Date: 2019-03-26T08:47:11+01:00 // This is the title of the article.true// draft, changed tofalseAfter that, the article is publishedCopy the code

Step 4: Start your local server and preview your blog locally

Enter it directly on the command line

Hugo server -d // Note: D is uppercaseCopy the code

After success, a string of messages will be returned, including a Web Server is available at http://localhost:1313/. At this time, we can type http://localhost:1313 in the browser address bar to see what the blog looks like

Step 5: Customize the theme

Although the theme has been installed, some other information, such as the blog name, has not been modified, so I will edit the config.toml file

baseURL = "https://huage404.github.io/"// If we want to put our blog on GitHub, we need to change it to the link of the blog project. The project link is the link in section 6 of step 7 below. If we do not change it, we will find that click to read the full text back to languageCode ="en-us"// Change the language, I change to"zh-Hans"
title = "My New Hugo Site"// This is the name of the blog. You are free to change theme ="ananke"// Set the theme fileCopy the code

Step 6: Blog

Using the Hugo command, the blog project will be packaged, and a public will appear in the project, which is the file we need to throw to the server

Step 7: Upload to GitHub

GitHub has given us a free domain name that we can enter into the project repository and use to host our blog

  1. inGitHubCreate a new warehouse on. The name of the warehouse is our account name +github.ioAnd nothing else, just hit Create, okay
  2. Enter the warehouse and click Settings (settings), scroll down and there will be aGitHub Pages“, below is an information box, if it is the first operation will have a multi-select button, tick it
  3. uploadpublicGit files can be directly uploaded to the repository
  4. It is important to note that we have used git init before when creating a blog site, although it will not work for us in thepublicThe new Git repository will have an impact, but will affect the blog sitegitWarehouse, all the files we need to configure the blog site
  5. Create a new one in your blog site.gitignoreFile, file input/public/It means to tellgitDo not upload this file or its contents
  6. And then you can go tohttps:// Your account name.github. IOIt doesn’t matter if it doesn’t show up right away. It’s probably in cache

conclusion

In fact, as long as you click on the official website link at the beginning of the article, there are tutorials inside. This article is mainly my own study notes, which will be more wordy