This is the source code for yufan.me.
The source code has gone through four major stages:
- Initially, it was built with WordPress in 2011.
- In 2017, the blog migrated to Hexo, and all posts were converted to Markdown.
- By 2024, the blog was completely rewritten using Next.js with the App Router.
- Currently (since the end of 2024), it has transitioned to Astro.
- Astro 6 (CMS)
- Postgres (stores post statistics, comments, and users)
- Redis (cache for generated images)
- Zeabur (mail and hosting services)
The blog configuration is managed through the .env file.
Use the commands below to set up and run a local instance.
cp .env.example .env
npm i
npm run devThe required environment variables are REDIS_URL and DATABASE_URL.
Here is an example:
DATABASE_URL=postgresql://username:password@localhost:port/yufan-me
REDIS_URL=redis://:password@localhost:port
All non-sensitive blog configuration is extracted to src/blog.config.ts.
You can tweak the configuration to your own needs.
The astro.config.ts file is reserved for framework-related configuration.
This includes MDX, rehype, and remark plugin configuration.
I do not recommend changing these settings unless you are confident about what you are doing.
Postgres is required for post click counts and comments.
The database schema is generated by drizzle-kit.
For convenience, SQL files are also provided in the ./migration directory.
Run them one by one in filename order to initialize a usable database.
If you want to debug with breakpoints, open the project in VS Code and run the development server directly in the editor.
All posts should be placed in the src/content/posts directory in MDX format.
All static pages should be placed in the src/content/pages directory, also in MDX format.
You can include custom scripts or components by leveraging MDX capabilities.
Front matter is a YAML block at the top of a file used to configure content settings. It is enclosed by triple dashes.
---
title: Hello World
date: 2013/7/13 20:46:25
---| Setting | Description | Required | Default |
|---|---|---|---|
slug |
Unique ID, used as the permalink | true | |
title |
Title of the post | true | |
date |
Publication date. Future dates will be treated as scheduled | true | |
updated |
Last updated date | false | Published date |
comments |
Enable comments for the post | false | true |
tags |
Tags associated with the post | false | null |
category |
Category of the post | true | null |
summary |
Post summary in plain text | false | First 140 characters |
cover |
Cover image | false | null |
og |
Open Graph image | false | null |
published |
Whether the post is published | false | true |
visible |
Whether the post appears in feeds | false | true |
toc |
Display the Table of Contents | false | false |
alias |
Alternative slugs for the post | false | [] |
| Setting | Description | Required | Default |
|---|---|---|---|
slug |
Unique ID, used as the permalink | true | |
title |
Title of the page | true | |
date |
Publication date | true | |
updated |
Last updated date | false | Published date |
comments |
Enable comments for the page | false | true |
summary |
Page summary in plain text | false | First 140 characters |
cover |
Cover image | false | null |
og |
Open Graph image | false | null |
published |
Whether the page is published | false | true |
toc |
Display the Table of Contents | false | false |
The FrontMatter extension is configured for a smoother local writing workflow. Install it and start writing in VS Code without worrying about the front matter schema above. The extension will help manage these fields automatically.
Pandora is a companion tool for writing posts with this project.
You can install it by following its README.md.
It helps process music and images, then uploads these assets to the UPYUN service. If you use images uploaded by Pandora, you can also get optimized loading thumbnails.
The favicon closely resembles the blog logo, with simplified elements for better readability at smaller sizes. It retains the main shape from the logo but adjusts the dot color for visibility. The background color is embedded in the exported favicon to ensure clear display across all browsers.
The favicon sizing follows this guide to ensure compatibility across platforms.
This blog is deployed on the Zeabur platform. You can check their documentation and deploy your own blog for free initially.
Alternatively, you can self-host it. Use the provided Dockerfile to build an image and run it locally.
S3 configuration is required when building a production instance.
Static files and images are uploaded to S3 to improve delivery performance.
You can disable this behavior in astro.config.ts.
The source code of this blog is licensed under the MIT license. Feel free to use it under the terms of that license.
The content of this blog's posts is licensed under the CC BY-NC-SA 4.0 license.
All of these fonts are free for commercial use.
Some code in this project was adapted from other open-source projects. Relevant credits and license information are included in the source file headers.
