Note: This article is the original article, without permission cannot be reproduced, please contact the author before reprint

Hexo+Github

preface

GitHub is a hosting platform for open source and private software projects. It is also a version control repository, so it is named GitHub because it only supports Git as the only version repository format for hosting. Then, on June 4, 2018, Microsoft announced that it had acquired code-hosting platform GitHub in a $7.5 billion stock transaction. Hexo is a fast, concise, and efficient blogging framework. Hexo uses Markdown (or other rendering engines) to parse articles and generate static web pages with beautiful themes in seconds.

A technician who can’t use Markdown is not a good technician. Its powerful functions greatly speed up the writing and typesetting. Meanwhile, it perfectly solves the hearsay that it takes one hour to write and two hours to typeset. (Beep beep: All articles in this subscription are written and formatted based on Markdown.) If you have time, I would like to compile an article about my experience with Markdown over the years, the layout of the article and so on.

Github: Hexo: hexo. IO /zh-cn/docs/

As a Coder, I must build a blog site of my own to record my learning process and the pits I have walked through. There are also a variety of ways to build websites on web platforms, such as WordPress, Emlog, Typecho, and so on. However, Hexo+Github is a huge challenge for a user with a strong desire to build a website, and it is also a huge pain for lazy users. Through a huge amount of information screening, Tao Tao finally found that Hexo+Github can meet the requirements of most users, which is simple and beautiful. It’s a great way to build your own personal site. If you have any ideas about how to build a website, the following will document my previous Hexo construction process, which may help you, and over time, you will find a lot of interesting beautification operations. (Talk to you later)

The following illustrated building process is for pure white, such as github warehouse creation, environment variable configuration, Git terminal and other basic operations are more detailed description, according to the process step by step, minutes to build a site without pressure.

First, build the environment

Environment introduction:

  1. Windows system: the system can be prepared according to their actual needs, MAC, Linux, in order to serve more readers, this article is mainly introduced in the Windows system.
  2. git: Easy to use a variety of commands after installation, using the Clone command directly on Github to download in seconds, when publishing articles to the server can also be convenient to useHexo clean, hexo G, hexo DSuch as the order.
  3. Node.js: a Javascript runtime environment on which websites must be built.
  4. Hexo: Static resources generated by Hexo can be stored directly on Github using commands and then accessed using your Github account.

Installation:

Git installation:

You can download it from git’s official website:git-scm.com/. When you open it, you’ll see something like this: Mindlessdownload for Windows:

Download it to the specified disk, and then install it in Windows. After the installation, open CMD terminal (win+r -> enter CMD -> enter) and execute git –version. If git version 2.19.2.Windows.1 is displayed, congratulations!

Node.js installation:

The installation of Node.js is exactly the same as the installation of Git. Just download node.js and install it. After the installation, run the node-version command in the CMD terminal.

Node.js download: nodejs.org/en/

Making the registration of

Github is a giant website, let’s go to the Github registration page to have a look: github.com/join?source…

Then fill in your user name, email, password and other information to register.

Second, second speed construction of blog

Create the repository and deploy it

After registering Github, we need to create a warehouse to store the source code of our website, articles and other data. The name of the warehouse is also the URL address visited by our final site. The URL is in the way of subdomain name, and its general form is xxx. github. XXX generally represents the Github user name when you register, so the warehouse name is usually fixed after you register. The creation and deployment process of the warehouse is as follows:

  • Go to your Github homepage and clickNew repositoryTo create a new repository, like this:

  • Then follow these steps

  • Once you’ve done that, you’ve successfully created your repository. In this case, we also need to use git command to generate our secret key. Right mouse button on your desktop, select git bash here, and run the following command on your git terminal:

1ssh-keygen -t rsa -C [email protected]

Copy the code

“[email protected]” is the email address you used to register for Github. There are some options for “yes” and “no” when executing the command. You can press enter by default and you will see something like this:

1Your identification has been saved in /c/Users/you/.ssh/id_rsa.

2Your public key has been saved in /c/Users/you/.ssh/id_rsa.pub.

3The key fingerprint is:

4xx:xx:xx:xx:xx:xx:xx:xx:xx:xx:xx:xx:xx:xx:xx:xx [email protected]

Copy the code

You will then see the generated key pair in the c/Users/you/.ssh/id_rsa.pub path file, which we will open for the moment and use later for copy and paste.

Git bash here = git bash here = git bash here The command is as follows:

1git config --global user.name XXX   # XXX indicates the username you signed up for Github

2git config --global user.email XXX  # XXX indicates the email address you signed up for github

Copy the code

  • Then we need to add an SSH key to our Github account. Go to Settings on your github home page, click SSH and GPG keys, and then click on the next pageNew SSH keyThen add the SSH key according to the following figure:

  • Open git bash here and run SSH -t [email protected]. A series of yes or no questions will be asked.

1Hi username! You've successfully authenticated

2

Copy the code

OK, after completing the above process, you can connect to Github.

Build the Hexo blog framework

Once done, we are ready to use Hexo perfectly, which you can do by doing the following.

  • With that in mind, let’s first install Hexo. Create a name on the disk based on your needshexoFolder, in order to better manage files, Tao Tao is in E disk root directory to create the folder. Then enter the file and open it in the current pathgit bash here, run the following commands in sequence to build the Hexo environment:
1npm install hexo-cli -g

2npm install hexo --save

Copy the code

When you’re done, you’ll find a node_modules folder generated under that directory, and you’ll have Hexo built, a little closer to the end.

  • After the above node_modules file is generated, we need to configure the Hexo environment variables so that the commands for subsequent blog operations can be executed directly in CMD rather than in the specified Hexo directory. Go to the bin directory under node_module and copy the bin directory as follows:

Adding environment variables is relatively easy, so I will describe the process without mapping. If you have any problems, please contact Tao Tao or leave a comment below. The subsequent operations are described as follows (xiao Bai also understands the operation) :

  1. CTRL +D to switch to the desktop.
  2. Right-click the computer and click properties.
  3. Click advanced System Settings on the left.
  4. Click on environment variables.
  5. Find Path in a user variable or system variable and double-click it (recommended user variables)
  6. Double-click and click New, then paste the bin directory that you copied above.
  7. Then step by step confirm, confirm, confirm. OK, finished, isn’t it very easy (* rǒ￣).

After the above operation is complete, win+ R, open the CMD terminal, and run Hexo –version. If information similar to the following is displayed, your Hexo has successfully configured the environment variable.

  • Next, we need to create the home directory for our blog site. You can do it the way I recommend, or you can do it the way you like. First, create the ZerosBlog folder (custom) in the root directory of drive E, then go to this folder and create xxx.github. IO folder (the folder name must be the same as the github repository name you created earlier, must be fixed), double-click to go to this directory and right clickgit bash hereTo open the Git terminal, then run the following command step by step in the terminal:

Initialize hexo:

1hexo init

Copy the code

Components required to automatically install the site:

1npm install

Copy the code

Wait a moment to complete all installation steps. OK, so far, you have basically completed the construction of the website, it can be said that everything has, only owe dongfeng. A basic Hexo blog framework is complete, now we just need the final step: import your favorite blog theme and use it properly. Hexo has many, many, many themes to choose from.

Third, theme introduction

Hexo has many, many, many themes to choose from (N… ︴ Σ (° delta ° | | |) I don’t know how many, because he will be a lot of the front end of the great god constantly updated frequently open source, and if you just curious to know), its theme website is: IO /themes/, you can look at them here and use any of them as the theme of your blog, but according to statistics, the vast majority of people who use Hexo + Github to build their blog are using NexT. Its simple beauty is very popular with many users, so I will use NexT as an example to introduce our theme. Of course, You can also read the NexT theme documentation to introduce the NexT theme.

Click CTRL +F on the Hexo theme page and type Next to find the Next theme. Then click to go to the Github page for the Next theme. This page stores the source code for the Next theme and we need to download it for our own use. We have already downloaded Git in front, but also mentioned the Git is one of the most convenient place to clone any resources, making the operation can perfect show ┗ | ` O ‘| ┛ ao ┗ | ` O’ | ┛ ao ┗ | ` O ‘| ┛ ao ~ ~.

After going to the Github repository page for the NexT theme, copy the repository link for that theme as shown below:

After copying the link, go to E:\ZerosBlog\ xxx. github. IO \themes folder, right click git bash here to go to git, and run the following command

1git clone https://github.com/theme-next/hexo-theme-next.git

Copy the code

This process may take a while, but if you are tired or thirsty take a cup of tea, and after a while you will have successfully downloaded the NexT theme under that directory.

After successfully downloading the NexT theme, we need a small amount of configuration to use the theme. The configuration file belongs to the site and is in the path E:\ZerosBlog\ xxx.github. IO \_config.yml, We use text editors (Notepad, Notepad ++, Sublime Text, Vim… Open it, CTRL + F type theme to find the theme property, then change the value to Next, as shown below:

Four blog styles have been prepared for us in NexT, and their configuration files are in the theme configuration file (note the difference from the blog configuration file _config.yml above). IO \themes\next\_config.yml, we use a text editor (notepad, notepad++, sublime Text, Vim…). Open it, then CTRL +F type Scheme to find the following:

As you can see, there are four themes: Muse, Mist, Pisces and Gemini. You can choose one of them according to your preference (you can try all four and decide on a style), then annotated the other three, CTRL + S save and exit

After that, go to the root directory of the site, E: ZerosBlog\ xxx. github. IO, open the git terminal (right-click git bash heer in the blank) and complete the following three steps

  1. Hexo clean: Clears the cache
  2. Hexo g: Generates static pages
  3. Hexo D: Commits the resource to the server
1hexo clean  

2heo g   

3hexo d  

Copy the code

In the above command execution process, may encounter a login form suddenly appear, we just need to log in according to their github registration information, after the completion of command execution our site has completed the deployment and request https://XXX.github.io/ can access to their website, As shown below:

Four,

The above illustrated building process is for pure white, such as github warehouse creation, environment variable configuration, Git terminal and other basic operations are more detailed description, according to the process step by step, minutes to build a site without pressure. In addition, if you have any questions on the above page, you can contact the author or leave a message below, and I will reply to you as soon as possible.

Note in particular: it is important to note that the above construction process is only the construction of the blog site, the content of the blog needs to be created in E:\MyBlog\ xxx. github. IO \source\_posts folder, for example: HelloWorld, md, then write in the file using Markdown grammar, writing is completed using the same hexo clean | | hexo g hexo d command to write good post to making the server, Finally, visit https://XXX.github.io/ to see the article. Markdown syntax writing is not included in the content introduction of this article. If you have time, please sort out an article about my experience using Markdown over the years and the typesetting style of this article, or go to learn it by yourself: www.zybuluo.com/mdeditor

So far, has completed the construction of the blog, but we look left, right look, no matter how to look seems to be a little monotonous, after will introduce the blog beautification, can introduce some plug-ins, such as Gitalk online chat, APlayer, word count, background and other plug-ins.

2018-09-10, By Tao Tao, Yu Shangrao