Yufan Personal Blog

This is the source code for yufan.me.

History

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.

Local Development

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 dev

Debugging with break points

If you want to debug using breakpoints, open the project in VSCode and run the development server directly within it.

Writing

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

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
---

Post Front Matter Settings

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	[]

Pages Front Matter Settings

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

Blog Design

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.

Deploy the Blog

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.

License

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.

Logo Fonts 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.

Web Font License

OPPOSans 4.0 is used to render Open Graph images on the blog, with its license

Open Graph Font License

NoteSans SC is used for rendering Open Graph images, with its license

Third Party Codes 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.