Personal blog: www.milovetingting.cn

Hexo+Butterfly+Github+Coding to build personal blog

background

I’ve built a simple blog with Docsify, but I don’t have much of my favorite subject with docsify. So, in my spare time, I recently rebuilt a blog with Hexo. For more information about Hexo, see the notes on its website.

Build Hexo

Setting up Hexo is easy, just follow the steps in the official documentation. Here, the simple record is as follows:

Install the prerequisite

To install Hexo, install:

Node.js(Node.js version at least 8.10, node.js 10.0 or later is recommended)

Git

The specific installation methods of Node.js and Git are described in Hexo’s documentation page and will not be described here.

Install Hexo

After the two programs are installed, you can install Hexo using NPM.

npm install -g hexo-cli
Copy the code

Initialize the

For example, in Windows, open the CMD command window, locate the path of the md folder, for example, C:\Blog, and run the following command:

hexo init
Copy the code

After the command is executed, the corresponding files will be generated under C:\Blog\ as follows:

    .

    |-- _config.yml

    |-- package.json

    |-- scaffods

    |-- source

        |-- _drafts

        |-- _posts

    |-- themes
Copy the code

Focus on the following directories and files:

_config.yml Configuration information of the website, where you can configure most parameters.Copy the code

    source--posts holds the MD fileCopy the code

Themes folderCopy the code

Generating static pages

Static pages can be generated by using the following command:

hexo g
Copy the code

The public folder containing the corresponding HTML pages is generated under the root directory C:\Blog\.

Start the server

You can run the following command to start the server:

hexo s
Copy the code

Open your browser and type in the url: http://localhost:4000 to see the static page generated by Hexo.

Apply Butterfly theme

The default theme may not be what we want it to be, so you can do this by changing the theme. You can choose the theme you want from the theme page on the official website. Here, select the Butterfly theme to apply.

Butterfly homepage display page: JerryC. me, corresponding documentation page: JerryC. me/posts/ 21CFb…

You can directly configure the theme according to the documentation, which is briefly recorded as follows:

Theme installation

You can install a theme by using the following command:

git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/Butterfly
Copy the code

Theme application

Modify the site configuration file _config.yml to change the theme to Butterfly

theme: Butterfly
Copy the code

To facilitate the smooth upgrade, create a _data folder in the source directory and copy the _config.yml folder from Themes/Butterfly to the source/_data directory and rename it Butterfly

To see what happens when you apply the theme, execute the following command:

hexo clean # Remove old content
Copy the code

hexo g Generate static pages for publishing
Copy the code

If the operation is performed for the first time, the following error may be reported

The solutions are listed at the top of the document:

Run the following command as prompted:

NPM install [email protected] - saveCopy the code

Execute the generated instruction again:

hexo g
Copy the code

Restart the server:

hexo s
Copy the code

Refresh the website :http://localhost:4000

As you can see, the following error is reported:

The corresponding solution can be seen on Butterfly’s Github home page:

Install the following plug-ins:

npm install hexo-renderer-pug hexo-renderer-stylus
Copy the code

Again, in order:

    hexo clean

    hexo g

    hexo s
Copy the code

Refresh http://localhost:4000 to see the updated theme:

Other details can be configured by referring to Butterfly’s documentation.

Deployment to making

Create a warehouse

This assumes that you already have a Github account. If not, go to Github to register.

Once registered, log in to Github and create the repository: click the + sign in the upper right corner and select New Repository:

In this case, it is recommended to set the warehouse name to the following format:

username.github.io
Copy the code

Please replace username with your github username.

Configure Git

If you are using Git for the first time, you need to set your username and email:

git config --global user.name "your username"
git config --global user.email "your email"
Copy the code

Replace “your username” with your real username and “your email” with your real email.

To generate a public key

Run the following command and press Enter three times to generate the public key:

ssh-keygen -t rsa
Copy the code

Find the id_rsa.pub file in drive C/user/username /.ssh, open it with a text editing tool, and copy all the text contents. In the upper right corner of the Github page, go to User profile picture -settings-ssh and GPG keys -new SSH key

You can fill in Title and Key with the public Key text you just copied.

After adding, type on the console:

ssh -T [email protected]
Copy the code

If the configuration is successful, you can see the successful reply.

Upload files to Github

Configure the repO information in _config.yml:

deploy:
  type: git
  repo: # your warehouse address, such as: https://github.com/milovemengmeng/milovemengmeng.github.io.git
  branch: master
Copy the code

To publish directly to Github via Hexo, install the following plug-ins:

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

After the installation is successful, run the following command:

hexo d
Copy the code

Refresh github’s repository page to see the submitted content:

Configuring static Sites

GitHub Pages configuration: Click Settings to enter GitHub Pages configuration. GitHub has already published static Pages for us since the repository name was username.github. If the format is not username.github. IO, you need to manually configure the format.

If you open username. Github. IO, you can see that the previous configuration has taken effect.

Please note that all “username” in the text should be replaced with your own username

Deployed to the Coding

The process of deploying to Coding and deploying to Github is much the same and will not be detailed here.

Create a warehouse

Register Coding, log in and create a warehouse.

Configure Git

If you have previously deployed to Github, you do not need to configure Git again.

To generate a public key

If you have deployed on Github, you do not need to generate a public key again, but you need to add SSH public key Settings to the Coding Settings. After adding the Settings, you can also run the following command to test whether the configuration is successful:

ssh -T [email protected]
Copy the code

If the configuration is successful, a successful reply is received.

Upload files to Coding

Configure the repO information in _config.yml:

deploy:
  type: git
  repo: 
    github: https://github.com/milovemengmeng/milovemengmeng.github.io.git,master
    coding: https://git.dev.tencent.com/milovetingting/milovetingting.coding.me.git,master
Copy the code

Run the following command:

hexo d
Copy the code

Refresh the project page corresponding to coding to see the new submission.

Configuring static Sites

On the page where the project is located, click the Pages service on the left and click the Agreement to configure and generate static applications.

Binding personal Domain Name

Configure the static page of Github and Coding, and you can access the corresponding page through the network. If a personalized domain name is required, you need to apply for the corresponding domain name and bind it to Github and Coding.

Domain name registration

Domain name application, there are many service providers can provide corresponding services. Since I applied for the domain name through Aliyun, the following uses aliyun’s domain name configuration as an example to explain the domain name binding.

Domain name resolution

Log in to the console of Ali Cloud and click the left menu – Domain name to enter the domain name management page.

In the domain name list, find the domain name that you want to resolve and click the resolution button

Click add Record

Add Github parsing first:

@ parsing – making

In the CMD window, ping the static page address configured previously

You can obtain the corresponding IP address

Edited as follows:

Record type select A

Host records enter @

The resolution line is selected overseas, because we plan to visit Coding for domestic visits and Github for foreign visits

Record value Enter the OBTAINED IP address, for example, 185.199.110.153

Click ok

WWW – making

Click the Add Record button and type in the new form that opens:

Select CNME as the record type

Enter WWW for host records

Parse line selection abroad

To record the value, enter Github’s static page address

Click OK.

@ parsing – Coding

In the CMD window, ping the static page address configured previously

You can obtain the corresponding IP address

Edited as follows:

Record type select A

Host records enter @

Select default for parsing lines

Record value Enter the OBTAINED IP address, for example, 150.109.19.98

Click ok

WWW parsing – Coding

Click the Add Record button and type in the new form that opens:

Select CNME as the record type

Enter WWW for host records

Select default for parsing lines

To record the value, enter the static page address for Coding

Click OK.

Configure the project CNAME

In the project root directory -source directory, create a CNAME file and enter the domain name you applied for, for example, www.milovetingting.cn

Executed in sequence

hexo clean
hexo g
hexo d
Copy the code

After successful submission, the submitted CNAME file can be delivered to the project root directory corresponding to Github and Coding.

Github’s static page service has automatically bound the newly submitted domain name as a result of the CNAME file submission:

Since I already bound www.milovetingting.cn, I will be prompted not to repeat the binding during the demo. If no duplicate domain name is bound, it takes effect immediately.

The binding of Coding personal domain name needs to be set again after submitting CNAME to take effect

In Pages service, click the Settings icon on the right for specific Settings:

Enter the requested domain name in bind new domain name and click Bind.

The end of the

In fact, there are a lot of articles about Hexo building blogs online. The main goal of writing this article is to record the process of setting up the blog, so as to facilitate the search for information when deploying the blog again, and also hope to help those in need.

END