Explorer's Guide
Build and Host
This site uses HEXO to build and generate static website files,~~ hosted in the Plesk panel created by the cloud server.~~
~~I configured a webhook in Plesk. When I submit changes to my Github private repository, Actions is triggered to build the website, and the changes will be automatically synchronized to the Plesk website folder for update. ~~
Update 2024/02/06: Because the virtual host was attacked by DDoS many times, I changed the website hosting to CloudFlare Pages.
Why HEXO?
Many years ago when I was a college student, it was cool to tinker with VPS and build websites. At that time, I used BandWagon Host and installed WordPress with NGinx, PHP, MySQL and other supporting software to build my own personal blog. At that time, I also experienced the database being ransomed and lost several articles I wrote (actually, they were nothing, very basic content).
The point is that database-dependent blogs like WordPress require a lot of maintenance. In contrast, statically generated blogs like HEXO and HUGO only need to worry about their own blog article files. At the same time, the Markdown format allows writing and recording at any time using different devices, without any migration burden.
After switching to HEXO, the entire blog site is hosted on GitHub, and new website files can be easily generated automatically through its Actions without worrying about loss.
Personalization
Theme
Updated: 2025/01/18 hand made theme
built with Icarus
Using desktop browsers can provide the best reading experience.
Cover Images
Some of them are from Unsplash, and some are SVG files that I drew and exported myself using Figma. Vector graphics are very clear and very small. After using Figma, it is easier to organize the materials.
Fonts
This site uses a total of 3 open source/free fonts:
- Source Serif
The quick brown fox jumps over the lazy dog - Source Han Serif CN
The quick brown fox jumps over the lazy dog 敏捷的棕色狐狸跳过了懒狗 - LXGWWenKai
The quick brown fox jumps over the lazy dog 敏捷的棕色狐狸跳过了懒狗
And the system fonts:
1 | font-family: SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, |
The font file is simplified by the script collecting all the used characters to increase the loading speed.
1 | const fs = require("fs"); |
Plugins
Lazy-load
I use hexo-lazyload-element to process lazy loading of images, videos, and iframe resources to improve page performance while avoiding unnecessary traffic consumption.
WebP Images
~~Some images are uploaded to Qiniu Cloud and use the ?imageMogr2/format/webp
parameter to load WebP image format resources. However, for some devices (iOS13 and below, MacOS Mojave and below), compatibility is required. ~~
Update 2024/02/22: The image hosting service has been changed, and the entire site no longer uses Qiniu Cloud resources.
1 | /*! modernizr 3.6.0 (Custom Build) | MIT * |
RSS
Use hexo-generator-feed to generate /feed.xml
for RSS reader subscription.
You can subscribe to the content using the following address.
1 | https://thelynan.com/feed.xml |
Comments
use Gitalk。
Ad
~~Use Google AdSense, in the sidebar widget (at the bottom of the article for small screen devices), which has little impact on reading. It would be great if it could cover my OSS fees. ~~
Sometimes full-screen ads pop up, which is not a good experience, so I turned it off
Some Hidden Features
iframe
The page and iframe use the postMessage method to communicate, enriching the functionality of static pages.