1 Introduction
After messing around with WordPress for these past few months, I have successfully evolved from a complete novice who knew nothing into a beginner: capable of proficiently using various plugins, designing page layouts, using the theme editor to quickly add scripts, and other routine operations, while fully enjoying the convenience WordPress brings to beginners: comments, search (including full-text search), and rapid functional expansion through plugins.
However, there are pros and cons, and I have gradually felt the disadvantages of dynamic blogs like WordPress:
Dependency on databases
This is actually both an advantage (comments and search functions are database-based) and a disadvantage (you must use a virtual machine, cloud host, or at least an environment that supports Docker), with no way to just find any hosting provider to host it like a static blog.
Pages need to be dynamically generated
Due to the way dynamic blogs work, page caching normally becomes very troublesome and highly unfriendly to CDNs. To use a CDN, you generally need to convert dynamic pages into static HTML via plugins for caching, or use a self-built Worker-KV method (the official feature is APO) to achieve a better access experience. What's more, some bloggers, in order to achieve an effect close to full-site caching of a static blog, completely abandoned the built-in comment and search functions, literally ”turning” WordPress into a static site. Such behavior is simply outrageous~~.
Although I have no intention of switching from a dynamic blog to a static blog in the short term, I do feel that static blogs indeed have their advantages. Plus, after being hit by a DDoS attack a while ago—even though only a tiny fraction of the traffic entered my home data center and didn't cause much impact—I was quite envious of the advantage of static blogs where you just host them with a free static page hosting provider and never have to worry about anything again: this is truly always online. Moreover, my current same-city mirror site is hosted on a Tencent Cloud Lighthouse server. If I stop renting the server, the mirror site will be gone~~~ So thinking about it, if it's just to temporarily solve the mirror site needs when both my main and backup blog sites are down due to special scenarios like power outages at home, and I don't require the interface to be exactly the same but rather focus on the blog post content, then a static blog is actually a highly practical solution (search and comments also have corresponding implementation solutions, but they are quite troublesome, so I won't cover them for now).
After researching for a long time, I decided to use the Hexo framework based on Node.js. After all, it directly supports Markdown, which is a huge advantage (now WordPress can also support it through plugins, but when there are some special symbols in the code blocks, garbled characters easily occur, and at this time, it still needs to be converted to HTML). Moreover, Hexo also seems to have rich support, while also being able to easily import WordPress articles through plugins. Although there are some requirements for environment configuration, and it needs to be reconfigured when migrating the local environment to other environments, which is a bit troublesome, I am only using it to make a demo site for a static blog, not my main blog, so all these issues can be ignored (besides, when building on Cloudflare Pages, it is possible to specify the exact same version as the local one). It just so happens that my Mac mini has GitHub Desktop installed to maintain updates for the static site, so I might as well just use the Mac mini to deploy Hexo, letting the base-model M1 Mac mini continue to utilize its remaining potential and make more contributions~.
2 Local deployment of Hexo and creation of the corresponding GitHub repository
1 Deploying Node.js
Hexo needs to be installed using the npm command, and npm has already 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 commands to confirm the current versions of npm and Node:
npm -v
node -v
wget https://github.com/TrinityCore/TrinityCore/archive/refs/tags/TDB335.24011.zip
node -v
2 Installing Hexo in the local environment
Remember this version number, as it will be used later.
Install Hexo locally according to the following process:
sudo chown -R (whoami)(npm config get prefix)/{lib/node_modules,bin,share}
Modify the permission scope of the npm command
Note: If not modified, you cannot use npm to install software normally.
Upgrade npm to the new version (optional)
Because I saw a prompt for a new version of npm:
npm install -g [email protected]
npm install -g [email protected]
npm install hexo-cli -g
npm install hexo-cli -g
mkdir /Volumes/data/hexo
hexo init /Volumes/data/hexo
3 Creating a Hexo repository on GitHub directly from the local Hexo directory
mkdir /Volumes/data/hexo
hexo init /Volumes/data/hexo
Note: Originally, the usual deployment method after this is via the command line, which requires downloading and installing Git, generating a local SSH public key, adding the public key to your GitHub account, installing the hexo-deployer-git plugin, and configuring the Hexo configuration file to finally achieve update and release management under the command line. However, since I had already deployed GitHub Desktop on my Mac mini, to reuse existing resources, my subsequent operations differ from online tutorials. But since GitHub Desktop is a graphical interface, it is definitely more comfortable to use than Git's pure command line. You can give it a try, but you need to install GitHub Desktop first.
To directly create a Hexo repository from the local Hexo directory, please follow the process below:
Commit the initialized files in the Hexo directory to the main branch of the Hexo repository:
Publish to the repository:
At this point, the Hexo repository has been successfully created on GitHub, and the upload of the initialized files is complete:
cd /Volumes/data/hexo
hexo server
Use
http://localhost:4000Open the local Hexo web service:
cd /Volumes/data/hexo
hexo version
3 Using Cloudflare Pages to associate with the GitHub repository to build Hexo
Access Hexo:Home Data Center Series: Building a New Home for the www Navigation Page Using GitHub + Cloudflare PagesCheck the installed version of Hexo, which will be needed for building later:
hexo version
npm install [email protected] && npx hexo clean && npx hexo generate
, here I will briefly record the key steps:
The build command in the image above is as follows:
4 Changing the theme
npm install [email protected] && npx hexo clean && npx hexo generate
Add the same npm and Node versions as local in the environment variables, because their default versions are very low and unusable:
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 for not directly using the git clone command to download the theme files is that in some cases, Git will treat the theme directory as a submodule. If the submodule is not correctly configured or updated, it may cause errors during pushing. This not only triggers commit conflicts but may also cause inconsistency between the local and remote repositories, thereby affecting subsequent version control and collaboration. Therefore, to avoid this potential issue, it is best to choose to download the ZIP package directly and extract it manually to ensure that the theme files are not mistaken for a submodule.
Modify the Hexo theme configuration as needed
将 Hexo root directory/themes/argon/_config.yml Copy to Hexo root directory/source/_data folder, and rename it to argon.yml, and then modify 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
Configure the search function
在 Hexo root directory/themes directory and execute:
npm install hexo-generator-search --save
在 Hexo root directory/_config.yml and add the following options:
search:
path: search.xml
field: post
content: true
Set Hexo to use the Argon theme
SettingsHexo root directory/_config.ymlchange the ”theme” field content to argon:
Then, just like before, ”commit to main” in GitHub Desktop, and then ”Push origin”:
After that, Cloudflare Pages will soon detect the updates in the GitHub repository and deploy automatically, which is very convenient.
Finally, just set up a custom domain like in my other article (refer to the article:Home Data Center Series: Building a New Home for the www Navigation Page Using GitHub + Cloudflare Pages), and the final effect can be seen at:Hexo static blog Argon theme effect。
5 Setting the homepage background image to display in full screen
Compared to the WordPress version, the Hexo version of the Argon theme lacks quite a few features, including one of my favorites: the full-screen homepage banner feature:
This feature allows the homepage to directly display a full-screen page background image upon opening, so that the random image API I worked hard to build can play its full role (I spent a lot of effort collecting my favorite background images). Just follow the steps below.
Modify the index.ejs file
Edit the index.ejs file:
vim hexo工作目录/themes/argon/layout/index.ejs
Delete the original code, paste the following code in, and save:
<% if (page.path === 'index.html') { %>
<section class="hero-banner">
</section>
<% } %>
<div class="main-content">
<% page.posts.each(function(post){ %>
<%- partial('_partial/content-preview', {post: post}) %>
<% }) %>
<%- partial('_partial/pagination', {page: page}) %>
</div>
The purpose of this code is to render a full-screen background area (hero-banner) on the homepage, and display the latest article list and pagination.
Modify the style.css file
Edit the style.css file:
vim hexo工作目录/themes/argon/source/style.css
Paste the following code at the end of the file and save:
.hero-banner {
height: 100vh !important; /* 让背景图片占满整个屏幕 */
background-image: url('https://wallpaper.tangwudi.com/fallback.jpg') !important; /* 背景图片 */
background-size: cover !important; /* 背景图片铺满屏幕 */
background-position: center center !important; /* 背景图片居中 */
background-repeat: no-repeat !important; /* 防止背景图片重复 */
background-attachment: fixed !important; /* 背景固定 */
display: flex !important; /* 用 flex 布局对齐内容 */
justify-content: center !important; /* 横向居中 */
align-items: center !important; /* 纵向居中 */
color: white !important; /* 文字颜色 */
text-align: center !important; /* 文字居中对齐 */
padding: 0 1rem !important; /* 内边距 */
}
.hero-content {
background: rgba(0, 0, 0, 0.5) !important; /* 半透明背景 */
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, center the content using flex layout, add a semi-transparent background and padding to .hero-content, and adjust the styles of the heading and paragraph.
Then, if you are rendering and viewing the effect locally, run the following commands in sequence:
hexo clean
hexo generate
hexo server
If you are using Cloudflare Pages for hosting like in this article, just follow the previous steps to commit and then push to the GitHub repository, and Cloudflare Pages will deploy automatically.
The full-screen effect is as follows:
Note: If you have configured a CDN before, be sure to clear style.css. For example, with the Cloudflare caching rules I use, you need to clearhttps://hexo.tangwudi.com/sytle.css, rather than just clearing the cache of the homepage.
5 Summary
The deployment and theme configuration of a Hexo blog are actually not that complicated. The real trouble is adding features later (WordPress is different, where you can easily extend various functions through plugins). I will research this for a while and then write a dedicated article to record it.