Hexo Blog Build and Deploy GitHub

insert image description here

Hexo Blog

Hexo is a simple static blog page. It uses markdown to render files. After producing static files locally, it can be deployed to GitHub, so that it does not need to occupy its own domain name and server. In fact, I switched to hexo a long time ago. The original The blog is at csdn, oceansec.blog.csdn.net , and the new blog is at GitHub oceansec.github.io . I haven’t written an article to summarize it. This article will sort out how to build your own hexo blog

hexo official document here

1. Install NodeJS

The first thing to know is that hexo has nodejs. To install nodejs, macos can use the following command to install nodejs directly after installing brew

brew install node

After the installation is successful, you can use node -vthe command to view the installation version to confirm the installation is successful

Screenshot 2023-02-15 10.40.52

If brew is not installed, you can use the following command to install it

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

2. Install git

macos has its own git tool. Windows can be installed graphically after downloading from the official website. Use it to git -versionjudge whether the installation is successful. Windows may need to set environment variables

macos can also use brew to install and manage git, the installation command is as follows

brew install git

3. Install Hexo

Select a folder as the directory of your own blog, open it in the terminal, and enter the following command to install hexo

npm install -g hexo-cli

Initialize after installation, it will automatically download the project on github

hexo init

Screenshot 2023-02-15 10.44.27

Then enter hexo gto generate a static web page, hexo sstart the local server for testing 4

Screenshot 2023-02-15 10.49.56

Screenshot 2023-02-15 10.51.09

At this point, the blog is built locally, and the next thing to do is to choose a blog template theme according to your preferences

4. Replace theme

You can search for themes on the Internet. Take a look at github. Take the pure theme I use as an example. First, download the theme file to the local, unzip it to the themes directory under the hexo directory

Screenshot 2023-02-15 11.34.19

Then modify the configuration file to enable the theme. There are two main configuration files in Hexo, both named _config.yml. One is located in the root directory of the blog, mainly including the configuration of Hexo itself; the other is located in the root directory of the theme, mainly used to configure theme-related options

Screenshot 2023-02-15 11.36.03

  1. Open _config.yml, find the following items to modify

    language: zh-CN //设置主题为中文版,若使用英文版则不修改
    theme: hexo-theme-pure //修改hexo主题
    
  2. Start the terminal in the hexo directory, use the following command to clear the original cache file, and render the new theme

    hexo clean&hexo s
    

    The picture below is the effect after changing the theme with the new file enabled

    Screenshot 2023-02-15 11.40.38

5. Configure the theme

  1. /theme/_source/Copy everything under the theme directory sourceinto a folder in the root directory of the blog
  2. Configure personal information, in the theme directory __config.ymlis the theme configuration file, just configure according to the comments

Screenshot 2023-02-15 12.03.14

6. Put in the article

The blog post format is md, source/_posts/just put it in the directory

Screenshot 2023-02-15 12.05.37

Because hexo is a static blog, you need to clear the original cache and regenerate it every time you make a change to the blog

hexo clean
hexo g

In this way, the blog is built, just upload it to GitHub and it will be OK

7. Deploy to GitHub

At present, the blog is only built and rendered locally and can be run locally. Next, it needs to be deployed to the GitHub pages interface.

GitHub Pages is a web hosting service provided by GitHub, launched in 2008. Can be used to store static web pages, including blogs, project documents and even entire books

First of all, you must have a GitHub account, and then create a new warehouse

Screenshot 2023-02-15 13.14.52

The warehouse name must be consistent with your own username, which is related to the domain name. The GitHub pages domain name is: username.github.io

Screenshot 2023-02-15 13.17.25

Click create to create a warehouse, and then you need to upload the static page to GitHub, and you need to modify the configuration file in the hexo directory (not the configuration file under the theme)

deploy:
  type: git
  repo: # 你的github仓库的URL地址  #repo: [email protected]:用户名/用户名.github.io.git
  branch: master

Of course, this is not the only configuration method, which is relatively simple, and then you can use hexo dthe command to upload the page to GitHub

8. Configure ssh key

If you use it under the original configuration, hexo dyou will find that you need to enter the GitHub username and password for any deployment. How can we reduce the trouble? GitHub has provided us with a solution: use the ssh key to connect

ssh-keygen -t rsa
cat ~/.ssh/id_rsa.pub

github add ssh public key

Method 1: Add public key in personal profile

Your profile -> SSH and GPG keys -> New SSH key -> 复制生成的公钥 ->

Method 2: Add in the project settings

Settings -> Deploy keys -> Add Deploy key -> 复制公钥 -> 勾选Allow write access -> Add new

After setting, you can use the following command to test

ssh -T [email protected]

Successful authentication indicates that the configuration is correct. Use the command again hexo d, so that the entire blog is built and deployed to GitHub. Use the domain name: username.github.io to access it. If you still need to enter the username and password when deploying, it is the configuration file configuration If there is a problem, recheck whether the configuration file in the previous step is correct

insert image description here

Guess you like

Origin blog.csdn.net/q20010619/article/details/129043299