How was my blog built

Blogging, is the last and most important link in my knowledge circulatory system, which takes care of my output, as well as my personal brand. In this post, I describe how my blog, was built.

Overview

My blog is structured with hexo+github+Cloudflare pages. In other words, everything is free except for the domain name which requires a fee.

Blog setup

There are a lot of articles on the web about setting up a blog using this architecture, so I won’t go into it again, but here are a few links that I’ve referenced.

Themes

The theme I’m using is the community’s next-theme, which is in theme-next next/tree/master) (no longer maintained). I liked the simplicity of it and the documentation, so I used it. Some of the configuration is also based on next-theme.

Plugins used

footnote

The plugin I use is hexo-footnotes
Installation method

1
yarn add hexo-footnotes

Then edit hexo _config.yaml to add the content

1
2
plugins. 
- hexo-footnotes

Then recompile, push and you’re done!
For specific results, you can refer to my article: [A Deep Dive into CNCF’s Cloud-Native AI Whitepaper](https://hxzhouh.com/2024/04/17/A Deep Dive into% 20CNCF%E2%80%99s%20Cloud-Native%20AI%20Whitepaper/)

hexo’s local search function has not been working well, so I chose Algolia Search, a free account with 10,000 calls per month, which is enough for a small blog.
Refer to the documentation:

word count

Use hexo-word-counter to count the number of words in an article and the expected reading time. Once configured, you can display the word count and reading time at the beginning of each article and at the bottom of the page

1
2
npm install hexo-word-counter 
hexo clean & hexo s

This completes the word counting functionality.

view count

The next theme supports firestore , firestore is a cloud development service launched by Google, which is quite powerful. We use it to realize the view count function, this service is also free.
After logging in firestore, select AddProject
AddProjectPasted image 20240418153129
Then select add app , select web -> enter a name and register, wait a moment and the following will appear
Pasted image 20240418153543 Record the apiKey and appId:

Then create a firestore database
Pasted image 20240418153705
I’ve chosen test module as my schema, just enter a name and select a region. Wait a moment.
Finally, configure the apiKey and appId above in next config.yaml: and appId and redeploy. Click on a random article, and you’ll see the views.
Pasted image 20240418154130
You can also see the data in the firestore database
Pasted image 20240418154116
Based on firestore, we can expand the content of the blog, which is also a benefit of cloud development. If I have more interesting ideas later, I will write another post about it.

The plugins I’m currently using are, well, these, and they’re all completely free.

Content Management

I’m currently using Obsidian to manage all my digital notes, and mine as well.
I utilize the Obsidian quickAdd + template plugin to create a new blog post with one click.
Images and other media files I am hosting again Cloudflare R2.
I used Obsidian’s Image auto upload Plugin + picList to upload images. The writing experience is not inferior to medium at all.

Summary

This is the end of my blogging system, if you are interested in having your own blog, why don’t you give it a try? It’s all free.