preface

Blogs have third-party platforms and can also be built by themselves. The earliest ones are Blog Park and CSDN. In recent years, there are many new ones, such as WordPress, segmentFault, Jianshu, Digging Gold, Zhihu column, Github Page and so on.

This time I’m going to talk about Github Page + Hexo. Github Page is a free static web hosting service provided by Github, which can be used to host static web pages such as blogs and project websites. Support Jekyll, Hugo, Hexo to compile static resources, this time we are the protagonist is Hexo, detailed content in the following article.

Demo station:Evening Maple ^- Blog

Blog posts links: https://white_maple.gitee.io/posts/fef1.html

Here we go

First, prepare the blog environment

To prepare the Node and Git environment, first install NodeJS, since Hexo is a node.js driven blogging framework, and then install Git, a distributed version control system for project version control. If you are not familiar with Git, please refer to Liao Xuefeng’s Git tutorial.

1.1 Node.js Installation and Configuration

Download it at nodejs.org/en/

Download the installation program based on the configuration information of your computer system and proceed with the following steps.

Here I recommendRookie tutorial node.js installation and configurationIt’s very detailed!!

After the installation is complete, we have to verify that the installation is successful.

First, win+R, then Enter CMD, press Enter to Enter our console, check the versions of Node and NPM to see if they are successfully installed.

If the result is similar to that shown in the above image (your downloaded version may be different), the installation is successful!

Add the node.js installation path to the environment variable manually by right clicking on my Computer -> Properties -> Advanced System Settings -> Environment Variables. Find the name of the variable named Path under system variables as shown below:

Select path, or double-click, and place your Node.js installation path at the end of the value of the path variable. If there is a semicolon at the end of the path value, add the semicolon directly to the path. If there is no semicolon, then click Save. Run the node -v command to check whether the command succeeds.

Next, due to the domestic mirror source speed is relatively slow, generally install CNPM Taobao source, choose to copy the following command stick to CMD execution

# Check the NPM configuration
npm config list
# the default source
npm config set registry https://registry.npmjs.org
# temporarily change the mirror source
npm --registry=https://registry.npm.taobao.org
# Permanently set as taobao mirror source
npm config set registry https://registry.npm.taobao.org
# Alternatively, edit ~/.npmrc to add the following
registry = https://registry.npm.taobao.org
Copy the code

After installing the image, enter the following command to check whether the image is successfully installed

cnpm -v

​

1.2 Git Installation and configuration

Here I still recommend you to go to the rookie tutorial Git installation and configuration, download and install according to the following steps

Git GUI Here and Git Bash Here are two options. Open Cmd(Win+R) and enter Git –version.

Create Github Pages

After completing the Github registration and Github Pages, let’s move on to the next link!!

Configure Git user name and email

Click the right mouse button on the desktop and click Git Bash Here to display an interface as shown in the picture below:

Then type the following two commands respectively and press Enter:

git config --global user.name "Fill in the username you signed up for."
git config --global user.email "Fill in your registered email address here."
In general, you can skip the search for the.gitconfig file below as long as no errors are reported
Copy the code

Gitconfig file is stored in C:/Users/[username]/. Gitconfig (if not found, please enable the function to show hidden files), open it with the editor, and see the content as shown below, that is, the configuration is successful!

4. Install hexo static blogging framework locally and publish to Github Pages

First, select a disk to store your blog files on, and then create a new folder, such as blogTest. After creating the folder, do not click on it, right click Here, select Git Bash Here, and then type the following command:

# Hexo framework installation
npm install -g hexo-cli
Enter the following command after the previous command is completedHexo init < name of new folder >Initialize the folder
cd< name of new folder > NPM installDependency files required to install the blog
Copy the code

Waiting for the run to complete, there are many more files in the folder. Note: All subsequent commands need to be run using Git Bash in the site directory (that is, in the folder). At this point, the local scaffolding of the Hexo framework is complete. Let’s run it and enter the following commands:

hexo g
hexo s
Copy the code

Open http://locakhost:4000 or 127.0.0.1:4000 in your browser and you’ll see a page indicating that the Hexo blog has successfully run locally.

1. Publish local blogs to Github Pages

In the previous steps, we have completed the registration of the Github account and the creation of Github Pages. Next, we will publish the local blog to Github Pages.

First you need to install the published plug-in and execute the following command in the directory of the site, which is the directory of the blog you created:

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

Next, associate the local directory with GitHub and type the following command line:

ssh-keygen -t rsa -C "Your email address"
Copy the code

SSH folder: id_rsa.pub and id_rsa. Open id_rsa.pub with a text editor and copy the contents inside. Then open Github, click on your profile picture Settings in the upper right corner and select SSH and GPG Keys

Click New SSH Key to paste the previously copied content into the key box. Click Add SSH key to Add the Title as desired.

Then go back to Git’s command line interface and test your connection to GitHub. Enter the following command line:

ssh -T [email protected]
Copy the code

Hit Enter, and a query will appear, type Yes, enter, and a message will appear, Hi! You’ve successfully authenticated, but GitHub doesnot provide shell access. The connection is successful. This should be your Github username.

Yml is the configuration file of the blog, which will be used in the future blog modification, such as personalized modification, blog SEO optimization, etc. Modify the following places:

title: Your blog name
subtitle: Blog subtitle, some theme support
description: Blog description
keywords: Blog Keywords
author: Author, as shown in the article
language: Blog language   
timezone: The time zone
Copy the code

Slide to the bottom of the file and have a deploy, add a repO item and a branch item under deploy. Fill in the following code, as shown below:

type: git
repo: [email protected]:Github username/Github username. Github.io.git  
/ / can also use the HTTPS address, such as: https://github.com/Github username/making user name. Making. IO. Git            
branch: master
Copy the code

Finally, create a page and publish it to Github Pages. Run the following command:

# Hexo renders a static set of pages based on the configuration file
hexo g
Upload the set of files rendered in the previous step to Github Pages
hexo d
# You can also enter this command directly to complete the rendering and uploading
hexo g -d
Copy the code

After the upload is complete, open https://< username >.github. IO in the browser to view the uploaded web page. If the page looks like it did during local debugging, the upload is complete. If not, check the command line window for error messages. If not, clear the browser cache.

At this point, the basic personal blog construction is complete, because the default theme is not good, so I will blog beautification tutorial to send out.

Finally, welcome to my personal blog!

— Evening Maple ^- Blog —