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, it has transitioned to Astro.
The blog’s configuration is managed by the .env file.
Use the commands below to set up and run a local instance.
cp .env.example .env
npm i
npm run devIf you want to debug using breakpoints, open the project in VSCode and run the development server directly within it.
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 settings for your writing. 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 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 tutorial 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.
The source code of this blog is licensed under the MIT license, feel free to use it without legal risk.
The content of this blog's posts is licensed under the CC BY-NC-SA 4.0 license.
The fonts used in the blog logo include M+A1(license), UnGungseo(license), and Iroha Mochi(license).
All of these fonts are free for commercial use.
OPPOSans 4.0 is used to render Open Graph images on the blog, with its license
NoteSans SC is used for rendering Open Graph images, with its license
Some code in this project was adapted from other open-source projects. Relevant credits and license information are included in the source file headers.