Use hexo+GitHub to build a personal blog from 0 to 1

1. Preface

1.1. What you want to say

When I was learning markdown grammar recently, I thought why not build a personal blog site to share my learning experience and experience, so I started working immediately, and soon, a simple blog site was born, here comes Share with you the use of hexo + GitHub to build a personal blog from 0 to 1.

1.2. Preparations

Before starting a blog, you need to:

  • Have a GitHub account, if not, sign up for one
  • Installed node.js, npm, and understand the relevant knowledge
  • installed git

The environment I use:

2. Build a GitHub blog

2.1. Create warehouse

Create a new repository named your github username.github.io, for example, if your github username is zengjiahao1222, then you can create a new repository zengjiahao1222.github.io warehouse (must be your user name, other names are invalid), your website access address will be http://zengjiahao1222.github.io](http://test.github.io/) in the future!

Precautions:

  1. The registered email must be verified, otherwise it will not succeed
  2. The warehouse name must be username.github.io, where username is your GitHub username
  3. The successful creation of the warehouse will not take effect immediately, it will take a while, about 10-30 minutes. I’m stuck with this one! ! !

2.2. Bind domain name

This is also possible without binding, and you can also access it with the default xxx.github.io, but if you want to be more personalized and want to have your own domain name, then buy it A domain name.

Here it is recommended to go to Alibaba Cloud to register domain names, big companies, guaranteed! ! !

3. Configure SSH key

3.1. Github configuration SSH Key

Why configure this? Because you must have your github permission to submit the code, but it is too insecure to directly use the user name and password, so we use ssh key to solve the connection problem between the local and the server.

$ cd ~/.ssh #Check the existing ssh key on this machine

If prompted: No such file or directory, it means you are using git for the first time.

$ ssh-keygen -t rsa -C "mail address"

Then press Enter 3 times in a row, and finally a file will be generated in the user directory, open the user directory, find the .ssh\id_rsa.pub file, open Notepad and copy the contents, and open your github On the home page, go to Personal Settings -> SSH and GPG keys -> New SSH key -> Paste the copied content to the key, fill in the title and save:

ssh.png

3.2. Test whether the configuration is successful

$ ssh -T [email protected] # Note that the email address does not need to be changed

If it prompts Hi zengjiahao1222! You've successfully authenticated, but GitHub does not provide shell access., congratulations, you have successfully configured SSH

At this point you also need to configure:

$ git config --global user.name "liuxianan"// Your github username, not a nickname
$ git config --global user.email "[email protected]"// fill in your github registration email

4. Use the hexo framework to write a blog

4.1.hexo Introduction

Hexo is a simple, fast, and powerful Github Pages-based blog publishing tool that supports Markdown format and has many excellent plugins and themes.

Official website: http://hexo.io

github: https://github.com/hexojs/hexo

4.2. Principle

Since github pages store static files, blogs store not only article content, but also dynamic content such as article lists, categories, tags, and page flips. If you have to manually update the blog post directory and related links every time you write an article Information, I believe everyone will go crazy, so what hexo does is to put these md files locally, call the written command every time after writing an article to complete the generation of related pages in batches, and then submit the changed pages to github.

4.3. Installation

It is recommended to use git bash to execute the command

$ npm install -g hexo

Hexo has two _config.yml files, one is the global _config.yml in the root directory, and the other is under each theme;

4.4. Initialization

Create a new folder named hexo somewhere in the computer (the name can be chosen at will), for example, mine is D:\hexo

$ cd /d/hexo/
$ hexo init

hexo will automatically download some files to this directory, including node_modules

$ hexo g # generate
$ hexo s # start the service

After executing the above command, hexo will generate relevant html files in the public folder, and these files will be submitted to github in the future:

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

When initializing for the first time, hexo has already helped us write an article called Hello World. The default theme is ugly, and it looks like this when it is opened:

4.5. Modify the theme

Personally, I think the official theme is a bit ugly, so I continued to change the theme. After a round of theme comparison, I personally like hexo-theme-butterfly

First let’s download the theme

$ cd /d/hexo/
$ npm install hexo-theme-butterfly

Notice:

  1. You can also use git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly instead, but I use this in the subsequent process of modifying the theme style It often happens that the style does not take effect in . After replacing it with this npm install hexo-theme-butterfly installation method, this problem is basically solved.
  2. It is worth mentioning that installation via npm does not generate theme folders in themes, but in node_modules
  3. butterfly theme beautification tutorial butterfly

Modify theme: landscape in _config.yml to theme: yilia, and then re-execute hexo g to restart generate. Every time you modify the configuration file, remember to perform hexo clean first to clean up the content of public, and then hexo g

4.5. Upload to Github

Let’s install a plugin first, otherwise the subsequent hexo d operation will report an error

npm install hexo-deployer-git --save

If you have configured everything, it is easy to publish and upload, just a sentence of hexo d. Of course, the key is that you have to configure everything.

First of all, ssh key must be configured.

Second, configure the deploy-related part of _config.yml

deploy:
  type: git
  repository: [email protected]:zengjiahao1222/zengjiahao1222.github.io.git
  branch: main

Here, branch should write main, because GitHub officially changed the default branch master to main on October 1, 2020

4.6. Commonly used hexo commands

common commands

hexo new "postName" #New article
hexo new page "pageName" #New page
hexo generate #Generate static pages to public directory
hexo server #Open preview access port (default port 4000, 'ctrl + c'close server)
hexo deploy #Deploy to GitHub
hexo help # View help
hexo version #View the version of Hexo

abbreviation:

hexo n == hexo new
hexo g == hexo generate
hexo s == hexo server
hexo d == hexo deploy

Combined commands:

hexo s -g #Generate and preview locally
hexo d -g #generate and upload

4.7. Blogging

Navigate to our hexo root directory and execute the command:

hexo new 'my-first-blog'

hexo will help us generate relevant md files under _posts, we only need to open this file to start blogging. Of course, you can also directly create a new md file yourself. The advantage of using this command is that it automatically generates the time for us.

The general full format is as follows:

---
title: postName #The display name on the article page, usually in Chinese
date: 2013-12-02 15:30:16 #Article generation time, generally not changed, of course, can be modified arbitrarily
categories: default categories #categories
tags: [tag1, tag2, tag3] #Article tags, can be empty, please use the format for multiple tags, note: there is a space behind
description: Attach an abstract of the article, preferably within 140 words, which will appear in the meta description
---

The following is the text

4.7.1. Tools for blogging

Typora is recommended here

5. Conclusion

This is the end of this tutorial on building a personal blog website with hexo + github. I don’t know if you have completed it. If there are any mistakes in the knowledge points and content, please contact me in time to correct it

Part of the content is reprinted from the blog garden of classmate Xiaoming. If there is any infringement, please contact me immediately for modification.