Personal Website

https://www.kefan.me/

Tech Stack

Area	Technology
Frontend
Backend
Deployment

Features

• Static Site Generation (SSG) and Server-Side Rendering (SSR): The website uses a combination of SSG and SSR for optimized performance. All the expensive HTML rendering is moved to build time, reducing load times by serving static files and the least JavaScript possible.

• Rust-powered Backend: The backend is entirely written in Rust, offering a highly structured, fast, and reliable architecture with guaranteed memory safety and the capability to handle complex tasks with minimal overhead.

• Better Font Loading: Font size has been minimized using pyftsubset. The original font, primarily in Source Han Serif, was reduced from some 50MB to 4MB, resulting the page to load significantly faster.

• CI/CD with GitHub Actions: Continuous Integration and Deployment are streamlined using GitHub Actions, enabling a easy edit-build-test-debug-deploy loop for a smooth development process.

• Separated Deployment: The frontend and backend are deployed independently and communicate through precise routing, fully supporting dynamic API interactions for scalability and flexibility.

• Package Management: The project uses pnpm and cargo to manage dependencies effectively, reducing disk space usage and maintaining a clean, organized structure. This setup also improves cross-platform compatibility, ensuring smooth operation across different environments.

• Responsive Design: The website offers a fully responsive design that adapts seamlessly to different screen sizes using Tailwind CSS, making the user experience consistent across devices.

• Real-time Monitoring: Uptime Robot provides real-time status monitoring to ensure the website remains operational and accessible.

Local Development

The project can be started in two ways: frontend-only for quick UI development or full stack with the API for complete functionality.

1. Running the Frontend Only

   pnpm install
   pnpm run dev

2. Running the Full Application (Frontend + API)

   pnpm install
   pnpm build
   cargo build --release
   ./target/release/mywebsite

Scripts

I've included a few scripts to help with development and maintenance:

• check_booknote: Verifies the formatting of booknotes.
• fix_booknote: Automatically corrects any formatting issues in booknotes.
• gen_blogpost: Generates a new blog post entry, saved as new.md.
• gen_booknote: Generates a new booknote entry, saved as new.md.
• sync_content: Synchronizes the docs/ folder with the content/ folder used by the frontend.
• sync_fontbook: Extract the unique characters used across the site, reads the original font files from the assets/ folder, generates optimized font subsets, then update the public/ folder with the new, smaller font files.

To run any of these scripts, use the following command:

cargo run --bin <script_name>

License

This project is licensed under the GPL-3.0 license.