This article was last updated 210 days ago. The information in it may have developed or changed. If it is invalid, please leave a message in the comment section.

Contents

1 Preface
2 Deploy hexo locally and create the corresponding github repository
3 Use cloudlflare pages to associate github repository to build hexo
4 Summarize

Preface

After tinkering with WordPress for a few months, I have successfully evolved from a complete newbie who knew nothing to a beginner: I can skillfully use various plug-ins, design page layouts, use the theme editor to quickly add scripts, and perform other routine operations. I have also fully enjoyed the convenience that WordPress brings to novices: comments, searches (including full-text searches), and rapid expansion of functions through plug-ins.

However, every advantage has its disadvantages, and I have gradually come to realize the shortcomings of dynamic blogs such as Worldpress:
1. Dependence on the database

This is actually both an advantage (comments and search functions are based on the database) and a disadvantage (you must use a virtual machine or cloud host or at least an environment that supports Docker). There is no way to just find a hosting provider to host it like a static blog.
2. The page needs to be generated dynamically

由于动态博客本身的工作方式，正常情况下页面缓存变得很麻烦，对CDN非常不友好。为了使用CDN，一般都需要通过插件把动态页面转成静态html才能进行缓存、又或者使用自建worker-KV的方式(官方正版功能是APO)才能达到比较好的访问体验。而更有甚者，一些博主为了达到接近静态博客全站缓存的效果，生生放弃了自带的评论和搜索功能，将wordpress生生”变成”了静态站点，这样的行为简直令人发指～～。

Although I have no intention of changing from a dynamic blog to a static blog in the short term, I do think that static blogs do have their advantages. In addition, I was attacked by DDoS some time ago. Although only a small part of the traffic entered my home data center and did not cause much impact, I envy the advantage of static blogs that you can directly find a free static page hosting provider and never have to worry about anything: it is truly always online. Moreover, my current mirror site in the same city is set up on a lightweight server of Tencent Cloud. If I don’t rent a server, the mirror site will be gone. So think about it, if it is just a temporary solution to the mirror site needs when the main and backup sites of my blog are down due to special scenarios such as power outages at home, and I don’t pursue the same interface but focus on the content of the blog, then static blogs are actually a very practical solution (there are corresponding implementation solutions for search and comments, but they are more troublesome, so I won’t involve them for the time being).

After studying for a long time, I decided to use the Hexo framework based on node.js. After all, it directly supports markdown, which is a big advantage (now wordpress can also support it through plug-ins, but when there are some special symbols in the code block, garbled characters are likely to appear, and it still needs to be converted to html at this time), and Hexo seems to have rich support, and you can also easily import wordpress articles through plug-ins. Although there are some requirements for environmental configuration, it is necessary to reconfigure when migrating the local environment to other environments, which is a little troublesome, but I only use it to make a backup of a wordpress blog, not the main blog, so these problems can be ignored (besides, when building on cloudflare pages, you can specify a version that is exactly the same as the local version). It happened that I installed github desktop on my macmini to maintain the update of the static site, so I simply used macmini to deploy Hexo, so that the m1 beggar version of macmini can continue to play its residual heat and make more contributions~.

Deploy hexo locally and create the corresponding github repository

Deploy node.js

Hexo needs to be installed using the npm command, and npm has been integrated into node.js, so you only need to install node.js.
The official download link is as follows:https://nodejs.org/en/download:

After downloading the installation package and successfully installing it, you can use the following command to confirm the current version of npm and node:

npm -v node -v

as follows:

Remember this version number, you will need it later.

Install hexo in the local environment

Follow the following process to install hexo locally:
1. Modify the permission scope of the npm command

sudo chown -R  $(whoami)$ (npm config get prefix)/{lib/node_modules,bin,share}

Note: If you do not modify it, you will not be able to use npm to install the software normally
2. Upgrade npm to the new version (optional)
Because I saw that npm has a new version prompt:

So upgrade npm:

npm install -g [email protected]

3. Install hexo

npm install hexo-cli -g

4. Create and initialize the hexo working directory

mkdir /Volumes/data/hexo hexo init /Volumes/data/hexo

Create a hexo repository on github directly with a local hexo directory

Note: Originally, the usual deployment method was to use the command line. You need to download and install git and generate a local ssh public key, then add the public key to the github account, install the hexo-deployer-git plug-in and configure the hexo configuration file, and finally implement update and release management under the command line. However, because I have deployed github desktop on macmini before, in order to reuse it, my subsequent operations are different from the online tutorials. However, because github desktop is a graphical interface, it is definitely more comfortable to use than git's pure command line. You can try it, but you need to install github desktop first.

To create a hexo repository directly with a local hexo directory, please follow the following process:

Submit the files in the hexo directory init to the main of the hexo repository:

Publish to the repository:

At this time, the hexo repository has been successfully created on GitHub and the upload of the init generated file has been completed:

You can also enable the hexo service locally and access it to view the actual effect. Follow the steps below:
Open the hexo local web service:

cd /Volumes/data/hexo hexo server

usehttp://localhost:4000Visit hexo:

Check the installed version of hexo, which will be needed for later building:

hexo version

Use cloudlflare pages to associate github repository to build hexo

For detailed configuration steps, please refer to my other article:Home data center series uses github+cloudflare pages to build a new home for www navigation page, I will briefly record the key steps here:

The build commands in the above figure are as follows:

npm install [email protected] && npx hexo clean && npx hexo generate

Add the same npm and node versions as the local ones in the environment variables, because the default versions of these two are very low and unavailable:

Deployment successful:

Finally, just set up a custom domain name as in my other article. The final effect is as follows:Hexo static blog initial interface.

Summarize

The deployment of the hexo blog is not complicated. The real trouble is how to use it later. I will study it for a while and then write an article to record it.