Hexo+ Github Pages

Journaling can record our experience of learning, fun, etc., as a programmer, blogging is more important, it not only can record our technology learning process, also can let us in the process of writing comb their own knowledge, if able to communicate with friends, it is beneficial to both sides of the technology.

1 Why Hexo?

We used to blog on some well-known blogging platforms, such as CSDN, Blog Park, 51CTO and so on. But these platforms are all pretty much the same, but some of them are specialized, and most of them are tech blogs, so if you want to share an interesting life story or write a literary article, it’s a little bit inappropriate. Jane book is also a good platform, but it is too literary.

Therefore, I want to build an independent website of my own, on which I can centrally publish and manage my own logs and other things. On the other hand, I can also carry out personalized customization in the later stage.

There are basically three choices for individuals to build websites:

Do your own front-end and back-end step by step development. Use a mature wordpress platform. Hosted on other platforms, such as GitHub.Copy the code

If you are a college student, I think you can choose the first one if you have time, which is front-end and back-end development together, in this process you can learn a lot of things. The blogger has used Springboot + Thymeleaf + Bootstrap +mysql to develop a personal website before. This is a very good process, which can understand and learn the whole technology involved and increase the experience of enterprise-level development.

But 1, 2 need to spend a sum of money to rent the server, is also a little expensive. So consider Hexo, now a relatively mature blogging framework that is fast, simple, and powerful. You can write articles in Markdown, and Hexo can generate static files with beautiful themes in seconds. Then host it on GitHub to complete the free blog.

Hexo website

2 Preparations (Windows 10)

2.1 installation nodejs

Because Hexo requires the NodeJS environment, you need to download and install nodeJS first. Click on the NodeJs website to download the latest version.

2.2 install git

Click on git’s official website to download the installation package.

Click Next, select the folder location, and then next to the bottom. Just go with the default Settings, which will set the environment variables without any fuss. After installation, right click the mouse should have the following two options, appear on behalf of successful installation.

3 USES Hexo

3.1 installation Hexo

After setting up the environment, right-click on the desktop, click “Git Bash Here”, and enter the following two commands.

$ npm install -g hexo-cli
Copy the code

Tip: Don’t type $because the command line already exists. The download will take a few minutes, please be patient.

You can select Shift+Insert Paste in git window after copying. There are some warnings WARN that do not affect use, rest assured.

3.2 Initializing Hexo

Once Hexo is installed, create a new folder, such as E:\ Hexo, right-click inside that folder, select “Git Bash Here”, and type the following command.

$ hexo init
Copy the code

Wait a moment to complete, as shown in the picture:

The source folder is where user resources are stored.

Themes are the theme folder, Hexo will generate static pages based on themes, which we will change to the popular nexT theme later.

Then enter the command line for local debugging, you can see the initial effect ~

$ hexo s --debug
Copy the code

Visit http://localhost:4000/ to see the results:

4 Change the theme to NexT

Although the above local debugging can be successful, but the default theme is not particularly nice. You can choose to go to the official website to choose your favorite theme, the official website theme link https://hexo.io/themes/

This tutorial is based on the popular NexT theme, which I feel is the best I’ve ever used.

4.1 Download the NexT theme

Go to the themes folder you created, such as E: HEXO\themes, right-click “Git Bash Here” and enter one of the following commands:

$ git clone [email protected]:iissnan/hexo-theme-next.git

$ git clone https://github.com/iissnan/hexo-theme-next
Copy the code

4.2 Modifying the Configuration

Open the _config.yml configuration file in E:\HEXO (your HEXO root)

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: landscape
Copy the code

Replace langscape with hexo-theme-next

theme: hexo-theme-next
Copy the code

Rerun local deployment debugging in the project root directory

$ hexo s --debug
Copy the code

You can see the effect

5 Deploy the vm to Github

5.1 registered making

If you don’t already have a GitHub account, you can get one for free at GitHub. Click on the sign-up

5.2 Creating a Warehouse

5.3 Configuring the SSH Key

In order to establish contact with remote Github, SSH keys need to be configured locally so that we can submit code directly to Github locally. If you are configuring SSH for the first time, configure git username and email

 $ git config --global user.name "The name you want to set."
 $ git config --global user.email "Email address you want to set up"
Copy the code

Then generate the SSH key:

$ ssh-keygen -t rsa -C "The email you just set up."
Copy the code

If you don’t need to set a password, three consecutive carriage returns are fine. After that you get two files: id_rsa and id_rsa.pub Find the id_rsa.pub file, open it with notepad, and copy its contents. Path: C:\Users\J (your username) \.ssh

5.4 Adding an SSH Key on GitHub

$ ssh -T [email protected]
Copy the code

If you see your username, the configuration is successful.

5.5 Initializing GitHub Pages

Open the repository on GitHub and click Settings

To the following in making Pages there to choose a topic, determine to visit ~ domains such as immediately after my https://huangjianxian.github.io

5.6 Deploying the Local Hexo File to GitHub

Here the entire project has two _config.yml files.

One is under your hexo root directory, called the site profile.

The other is under your theme folder directory, called theme profiles.

Open the site configuration file here and go to Deploy, like mine:

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: [email protected]:huangjianxian/huangjianxian.github.io.git
  branch: master
Copy the code

Replace the repO with an SSH link to your GitHub repository.

Use git bash in your project root directory and type the command to deploy:

$ hexo d -g
Copy the code

If you have this error:

ERROR Deployer not found:git
Copy the code

Enter the following command at git bash:

$ npm install hexo-deployer-git --save
Copy the code

Re-deploying the hexo D-G should do the trick, but if it doesn’t, node.js may be too low or something (it’s been done before).

After a moment, enter your warehouse home page address to visit and see ~ for example, mine is huangjianxian.github

6 Bind your own domain name

Friends may feel that this kind of domain name is too difficult to remember, and not good-looking. You can buy a domain name yourself and bind it to GitHub Pages.

Go to Ali Cloud to buy a domain name

After buying a good domain name console, choose resolution

Deploy again using Git bash

$ hexo d -g
Copy the code

At this point, you should be able to access the project using your own domain name (if not, DNS resolution may be slow, wait a few minutes).

7 summary

Hexo+ Github Pages is my favorite platform for individuals to blog on without having to spend a lot of money to maintain the server. Just set it up and start blogging.

It was the first time I had written such a long blog, and I was relieved to finish it. It lasted for hours, longer than I expected. But still insist on down, hope later also often like this! Try hard! Struggle! Writing is not easy, if you reprint, please indicate the source, thank you ~ if you have any questions in the construction process, welcome to comment ~