1 Introduction

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

Due to the way dynamic blogs work, page caching becomes very troublesome under normal circumstances and is very unfriendly to CDN. In order to use CDN, it is generally necessary to convert dynamic pages into static HTML through plug-ins for caching, or use the self-built worker-KV method (the official genuine function is APO) to achieve a better access experience. What's more, in order to achieve an effect close to the full-site caching of static blogs, some bloggers have given up the built-in comment and search functions and "turned" WordPress into a static site. Such behavior is simply outrageous.

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 some research, I decided to use the Hexo framework based on Node.js. Its direct support for Markdown is a significant advantage (WordPress also supports Markdown via plugins, but garbled characters can easily appear when there are special symbols in the code blocks, requiring conversion to HTML). Hexo also seems to have rich support and can easily import WordPress articles via plugins. While it has some environment configuration requirements—reconfiguring when migrating from a local environment to another—it's a bit troublesome. However, I'm only using it as a demo site for a static blog, not my main blog, so these issues can be ignored (besides, when building on Cloudflare Pages, you can specify the exact same version as your local machine). I also happen to have GitHub Desktop installed on my Mac Mini for maintaining static site updates, so I'll simply use the Mac Mini to deploy Hexo, letting my basic Mac Mini continue to contribute.

2 Deploy hexo locally and create the corresponding github repository

2.1 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.

2.2 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 (the working directory can be modified according to your actual path):

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

2.3 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

---

3 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:

4 Change the theme

After deploying the blog, the next step is to choose a theme you like. It is very easy to change the theme of hexo. Let's take the example of changing the Argon theme for the hexo version of the blog (to unify the style with my WordPress version of the blog).

1. Download the argon theme file

Download the zip package of the hexo version of the Argon theme to the themes folder under the hexo working directory, and then rename the downloaded folder to argon:

cd /Volumes/data/hexo/themes wget https://github.com/solstice23/hexo-theme-argon/archive/refs/heads/master.zip unzip master.zip mv hexo-theme-argon-master argon

Note: The reason why you don't use the git clone command directly to download theme files is that in some cases, Git will treat the theme directory as a submodule, and if the submodule is not configured or updated correctly, it may cause errors when pushing. This will not only cause commit conflicts, but may also make the status of the local and remote repositories inconsistent, thus affecting subsequent version control and collaboration. Therefore, in order to avoid this potential problem, it is best to choose to directly download the ZIP package and manually decompress it to ensure that the theme files are not mistaken for submodules.

2. Modify the hexo theme configuration as needed

Will Hexo root directory/themes/argon/_config.yml Copy to Hexo root directory/source/_data folder and renamed it argon.yml, and then modify the various configuration options in argon.yml according to your needs. :

mkdir /Volumes/data/hexo/source/_data cp /Volumes/data/hexo/themes/argon/_config.yml /Volumes/data/hexo/source/_data/argon.yml

3. Configure the search function

exist Hexo root directory/themes Execute in the directory:

npm install hexo-generator-search --save

exist Hexo root directory/_config.yml Add options in:

search: path: search.xml field: post content: true

4. Set hexo to use argon theme

set upHexo root directory/_config.ymlThe content of the "theme" field in is argon:

Then, as before, "commit to main" in GitHub desktop, and then "Push origin":

Soon after that, Cloudflare pages will detect updates to the GitHub repository and automatically deploy them, which is very convenient.

Finally, just set up a custom domain name as in my other article (see article:Home data center series uses github+cloudflare pages to build a new home for www navigation page), the final effect is:Hexo static blog Argon theme effect.

5. Set the homepage background image to full-screen display.

The Hexo version of the Argon theme has fewer features than the WordPress version, including one of my favorite features: a full-screen homepage banner.

This feature allows the homepage to display a full-screen background image directly upon opening, enabling my painstakingly built random image API to fully function (I spent a lot of effort collecting my favorite background images). Simply follow these steps.

1. Modify the index.ejs file

Edit the index.ejs file:

vim Hexo working directory/themes/argon/layout/index.ejs

Delete the existing code, paste the following code, and save:

<% if (page.path === 'index.html') { %>
    <section class="hero-banner">
    </section>
<% } %>

<div class="main-content">
    &lt;% page.posts.each(function(post){ %&gt;
      &lt;%- partial(&#039;_partial/content-preview&#039;, {post: post}) %&gt;
    <% }) %>
    &lt;%- partial(&#039;_partial/pagination&#039;, {page: page}) %&gt;
</div>

This code renders a full-screen background area (hero-banner) on the homepage and displays the latest article list and pagination.

2. Modify the style.css file

Edit the style.css file:

vim Hexo working directory/themes/argon/source/style.css

Paste the following code at the end of the file and save it:

.hero-banner { height: 100vh !important; /* Make the background image fill the entire screen */ background-image: url('https://wallpaper.tangwudi.com/fallback.jpg') !important; /* Background image */ background-size: cover !important; /* Background image fills the screen */ background-position: center center !important; /* Center the background image */ background-repeat: no-repeat !important; /* Prevent the background image from repeating */ background-attachment: fixed !important; /* Fix the background */ display: flex !important; /* Use flex layout to align the content */ justify-content: center !important; /* Center horizontally */ align-items: center !important; /* Center vertically */ color: white !important; /* Text color */ text-align: center !important; /* /* Center-align text */ padding: 0 1rem !important; /* Inner margin */ } .hero-content { background: rgba(0, 0, 0, 0.5) !important; /* Semi-transparent background */ padding: 2rem !important; border-radius: 1rem !important; } .hero-content h1 { font-size: 3rem !important; margin-bottom: 1rem !important; } .hero-content p { font-size: 1.5rem !important; }

The purpose of this code is to... hero-banner Create a full-screen background image and center the content using flex layout. Add a semi-transparent background and padding to .hero-content, and adjust the styles of the headings and paragraphs.

Then, if you are rendering locally and viewing the results, run the following commands in sequence:

hexo clean hexo generate hexo server

If you are using Cloudflare Pages for hosting, as described in this article, then simply follow the steps outlined earlier in the article to commit and push to the GitHub repository. Cloudflare Pages will then deploy automatically.

The full-screen effect is as follows:

Note: If you have previously configured a CDN, remember to clear system.css. For example, if you are using Cloudflare caching rules, you need to clear them.https://hexo.tangwudi.com/sytle.cssIt is not enough to simply clear the cache on the homepage.

5 Conclusion

The deployment and theme configuration of the hexo blog are not complicated. The real trouble is adding some functions later (wordpress is different, various functions can be easily extended through plug-ins). I will study this for a while and then write an article to record it.