Hexo Theme Fomalhaut is an open-source Hexo blog theme that reworks Butterfly 4.3.1 into a heavily customized personal blog with animated backgrounds, a page-load avatar, a footer space-travel timer, and a console ASCII-art easter egg. The theme is a secondary development of the popular Butterfly theme, sharing its configuration system and extending it with custom JavaScript in source/js/fomal.js and custom CSS in themes/butterfly/source/css/_custom/custom.css.
What is Hexo Theme Fomalhaut?
Hexo Theme Fomalhaut is a Hexo theme built by modifying Butterfly 4.3.1, and it is not fully theme-separated, so installation replaces the entire blog source rather than just copying a theme folder. It runs on Node.js (demonstrated with v16.14.0) and Hexo 6.3.0, and it requires a basic understanding of Hexo commands and the Butterfly theme before installation. The project is maintained by fomalhaut1998 and hosted on GitHub under the repository name hexo-theme-Fomalhaut.
What makes Hexo Theme Fomalhaut stand out?
- Butterfly 4.3.1 base — inherits all standard Butterfly features and remains compatible with the official Butterfly documentation for most configurations.
- Four-mode background system — provides separate background images for PC day, PC night, mobile day, and mobile night, controlled by the
defineBgblock infomal.jsaround line 3190. - Beautification panel — starting at line 3356 of
fomal.js, users can add custom DOM elements such as buttons, sliders, toggle switches, image boxes, and external tags; a winbox interface includes a snow effect toggle. - Footer space timer — displays the site's uptime in days, hours, minutes, and seconds, plus the current distance and astronomical units of Voyager 1 from Earth.
- Console easter eggs — prints a custom ASCII banner, site age, and humorous warnings when the developer console is opened.
- Page-load avatar — shows a custom avatar during page loading, defined in
custom.cssnear line 1300 and easy to replace. - Reward integration — enables a sponsor/reward button with WeChat and Alipay QR codes and a coin sound, configured in
_config.butterfly.yml. - Bibi talk page — includes a "唠叨" (chat) page with card-style entries, styled in
source/personal/bb/index.mdand powered bysource/js/bibi.js.
Who is Hexo Theme Fomalhaut for?
- Personal bloggers who want a visually rich blog without building a theme from scratch; they get a ready-made design with custom backgrounds, loading avatars, and footers.
- Butterfly users who want to upgrade their existing site with extra customization; the theme preserves compatible configuration options.
- Hexo developers who learn from real-world modification patterns; the code is organized with clear
... start/... endblock comments infomal.js.
What can you do with Hexo Theme Fomalhaut?
- Personal bloggers: set up a fully styled personal blog with unique background switching, a page-load avatar, a space-themed footer timer, and a reward button.
- Theme customizers: modify the beautification panel by adding custom DOM elements, or swap the default ASCII banner in the console output.
- Site administrators: integrate a bibi talk page by configuring the API in
source/js/bibi.jsand adding custom CSS from the provided example.
How does Hexo Theme Fomalhaut work?
The installation process is documented on the project page: first, install Node.js, Hexo, Git, and connect to GitHub; then download the source archive, unpack it, run npm i in the blog root (never hexo init, because it would reset the configuration file), and start with hexo cl; hexo g; hexo s. After verifying the site at localhost:4000, edit the deploy configuration in _config.yml and run hexo d to publish.
FAQ
Is Hexo Theme Fomalhaut free?
Yes, the theme is open source and free to use. The author appreciates a star on the GitHub repository.
Can beginners use Hexo Theme Fomalhaut?
The author warns that the project does not suit complete beginners; it requires familiarity with Hexo commands and the Butterfly theme. Users with no experience should first read the Hexo and Butterfly documentation.
How do I change the background images?
Open fomal.js, find the defineBg block near line 3190, and replace the four image URLs with your own. The code sets separate defaults for PC day, PC night, mobile day, and mobile night.
Why is the mobile CSS not loading?
A known issue occurs around line 1340 of fomal.js; the searchSize function can throw a null pointer exception on mobile. The fix is to comment out that function and its event listener.
Can I use only parts of this theme?
Yes, because it is not a fully separated theme, you can still borrow code snippets from it. The author suggests copying selected parts rather than replacing your entire blog if you only need specific functionality.
