How to use hexo and GitHub to build a free personal blog

Time:2019-11-14

As the saying goes, “the draughtsman never forgets to dig the well”. After experiencing hexo’s personal website, I also want to share the fun and the pit in the construction process!

Preparation (computer configuration tool)

Before building a hexo blog, you need to simply install some tools and dependency packages on your computer

First, you need to have a GitHub account
Secondly, install node.js and NPM dependency
Then install git tool (of course, the computer's own CMD tool can also be used)

Create GitHub website (GitHub warehouse of username.github.io)

Create a new warehouse named “your user name. GitHub. IO”. For example, if your GitHub user name is mengnn, you will create a new warehouse named “mengnn. GitHub. IO” (it must be your user name, and other names are invalid). In the future, your website access address will be mengnn.github.io, which is so convenient.

<!–more–>

Of course, a GitHub account can only create a warehouse named after it for direct access.

Click new repository
Enter repository name, which must be in the format username.github.io. Replace username with user name
Click Create repository
Enter the warehouse username.github.io, click setting to find the GitHub pages module
Click choose a theme to select a page theme
Visit https://username.github.io to visit the blog site

Set SSH keys for GitHub

The reason why SSH keys is configured is that you must have your GitHub permission to submit code, but it is not safe to use the user name and password directly, so we use SSH key to solve the problem of local and server connection.

First, check whether the id_rsa.pub file already exists on the machine

Cd ~ /. SSH check the existing SSH key of the local machine

If it doesn’t exist, generate the secret key by command

SSH keygen - t RSA - C "email address"

Just return all the way (remember that it should be three times in a row). Finally, a file will be generated under the user directory. Open the user directory and find.ssh\id_rsa.pubFile, Notepad to open and copy the contents.

Open your GitHub page, click setting to enter – > SSH and GPG keys – > New SSH key, and then put the copied content into the key. You can fill in any content in the title, as shown below:

How to use hexo and GitHub to build a free personal blog

How to use hexo and GitHub to build a free personal blog

It’s OK to save after adding.

Test SSH key

Enter the following command to test whether SSH key is installed successfully

SSH - t [email protected] ා do not change email address

If promptedAre you sure you want to continue connecting (yes/no)?, enter yes, and it will look like: ‘Hi mengnn! You’ve successfully authorized, but GitHub does not provide shell
The character “access.” indicates that you have successfully installed it.

Install Hexo

After the above preparations are completed, we will enlarge the recruitment. Yes, next is the play – local deployment of hexo.

For specific hexo introduction, you can query on the Internet. There are many. Of course, you can go to the official website of hexo to learn more about it. Here, you won’t do too much introduction. However, you should pay special attention to that the command line above and the NPM operation below are operated through git bash here, so you should install git tool in advance.

Special preparation before installation

Special attention: the installation of NPM in China is too slow, too slow, especially some of them are about 100 megabytes, hundreds or even g megabytes, so it is strongly recommended to use cnpm installation dependency of Taobao image. The installation method of Taobao image is as follows:

npm install -g cnpm --registry=https://registry.npm.taobao.org
//Check whether cnpm is installed successfully
cnpm -v
//If the version number information appears, you have successfully installed

Then you can change all NPM operations to cnpm operations. Of course, in order not to be confused, you still need to use NPM operations. When you operate, you can change all NPM operations to cnpm.

Installation is carried out

Install hexo globally from the following command line

$ npm install -g hexo

Initialize warehouse

Create a project folder in the appropriate location of your machine (this folder is the archive folder where you write your blog in the future, and all the content will be in it). For example, I create a blog, and then use git to find the root directory of the blog

cd Blog

Initialize your hexo in the project root.

Before initialization, you need to rush to a little bit. Your hexo init operation will be slow and wait patiently. Especially, your node version should be higher than v.6.3.0 as much as possible. Otherwise, your initialization operation will not be completed in a day. Therefore, before initialization, check the node version as much as possible and upgrade it

cd /f/Blog
hexo init

After initialization, some files will be generated under your root directory

How to use hexo and GitHub to build a free personal blog

Then you can do the hexo operation to generate articles and run them locally

Hexo g generates the corresponding HTML
Hexo s ා start service

After the above command is executed, you can see the corresponding generation page in the public folder of the root directory (the content of this folder will also be the content you push to GitHub)

Hexo s is to open the local preview service, open the browser and visit http: / / localhost: 4000 to see the content.

Upload to GitHub

After the above content is configured, you can upload it to GitHub (first,ssh keyIt must be configured well. Secondly, configuration_config.ymlAbout deploy in)

Before that, we have configured SSH, so next we need to configure the ﹖ config.yml file generated after initialization. The configuration is as follows:

deploy:
  type: git
  repository: [email protected]:mengnn/mengnn.github.io.git
  branch: master

Then you can upload it

Hexo D: upload local code to GitHub

After the upload is successful, you can access your GitHub domain name, such as [mengnn. GitHub. IO] ()

Change theme

In the first initialization, hexo has written an article called Hello world for us. The default theme is ugly. If you don’t believe it, you can open it yourself. Don’t worry, we can change our favorite theme. Of course, you can first check your favorite theme on the official website, and then download it. I chose a yilia theme

Download the theme (of course, there are many ways to download the theme. Finally, as long as the theme file you can download is copied to the theme folder in the root directory):

CD F: \ blog \ themes enter the themes folder in the root directory (this is the theme folder)
Git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia download yilia theme to folder

After downloading, you will see the following content (the first file is the yilia theme file you just downloaded, and the second is the system default theme file)

How to use hexo and GitHub to build a free personal blog

Modify ﹖ config.yml in the root directoryMediumtheme: landscapeChange toTheme: hex theme yilia, and then execute againhexo gTo regenerate, and then the hexo D commit is OK.

If there are some inexplicable problems, you can execute hexo clean to clean up the public content, and then rebuild and publish again.

Yes, so that your new theme can be changed successfully. Then there are many detailed high-end configurations under this theme, which will not be explained in detail here for the time being. Put a self configured interface:

How to use hexo and GitHub to build a free personal blog

Blogging

All of them are configured. How to write a blog?

Go to our project file f: blogsource ﹣ posts. All your initial blogs are saved here, including all your MD files

cd F:\Blog\source\_posts

After locating, you can generate MD files in the located folder

hexo new 'my-first-blog'

Of course, you can also manually create. MD files in the “posts” folder for writing


---
Title: the display name on the post page, usually in Chinese
Date: 2019-08-14 22:30:16 ා article generation time, generally not changed, of course, can also be modified at will
Categories: default category
Tags: [tag1, tag2, tag3] 񖓿 article tag, can be empty, please use the format for multiple tags, note that there is a space after the comma
Description: attach a paragraph of article summary, preferably within 140 words, which will appear in the description of meta
---

In addition, here I recommend a blogging tool that I think is better to use: typora, the best MD file editor I’ve found so far, can upload pictures, code blocks, text editing, better themes, etc., lightweight and easy to use. You can download the version you need on the official website of typora.

The above is the deployment and upload of a simple hexo + GitHub blog. I believe that it is enough for you to get started. In the future, you will launch an advanced version of the article. Please keep your attention.

Recommended Today

Custom factory class

using System; using System.Collections; using System.Collections.Generic; using System.Linq; using System.Reflection; using System.Text; namespace LYZB.ApiConfig { /// ///Custom factory class /// // generic public abstract class AssesUtil where T : class,new() { /// ///Cache collection /// private static Hashtable hash = Hashtable.Synchronized(new Hashtable()); /// ///Execution instance method /// ///Method name ///Parameter type ///Parameter entity /// public […]