Major Update to the Blog!#
If you've clicked into this article, then you must have already seen the changes to the blog (QWQ)
Motivation#
The motivation for updating the blog is quite simple. The Hexo miracle theme has stopped updating, and I wanted to practice my front-end knowledge, so I decided to revamp the blog.
I wandered between Vue, Valaxy, and Astro for a long time. I gave up on Vue because its SPA optimization for SEO is not very good; Valaxy's documentation is not very comprehensive and hard to understand, so I ultimately chose Astro.
Process#
Clearly, with my current front-end knowledge, starting from scratch is not feasible, so I chose the Hexo journal theme as a template and migrated it to Astro.
During the migration process, I referred to the Astro-paper and Frosti themes to write the code, but in the end, I felt like I wrote a pile of crap
Overview#
All the source code is placed in the /src directory.
The /public directory contains only one JS file, responsible for the dynamic behavior of the website, including:
- Back to top in wide-screen mode
- Implementation of the drawer function in narrow-screen mode
- Display of the top title in narrow-screen mode
/page#
The page directory is the routing directory for Astro.
It contains the post directory, responsible for article routing; archives for archiving, category for the classification interface, page for displaying articles on the homepage, and index implements the same functionality as /page/1.
/style#
Contains CSS files.
layout#
Responsible for the specific implementation of each interface.
Among them, BaseLayout is the overall layout implementation.
component#
Reusable components, future comments will also be written here.
utils#
Some utility components.
Outcome#
The final outcome is the blog displayed in front of you, but as of now, only part of it is completed, and there are still many details to update.
If you're interested, you can take a look at the github.com/histcat/blog source code.