This is the source code of yufan.me.
The source code has evolved through four stages.
- Initially, it was built on WordPress in 2011.
- In 2017, the blog switched to Hexo and converted all the blog posts to Markdown.
- By 2024, the blog had been rewritten using Next.js with App Router.
- Currently, the blog has transitioned to Astro.
- Node.js: The latest Node.js LTS
- Astro: Core engine
- Postgres: Comments, likes and users
- Zeabur: Host service
You can fork and clone this project for your own use. But do so at your own risk. The project uses Docker compose for starting the Postgres and Redis. Start them with command:
docker compose up -dThe blog configuration is managed by .env file. Use the commands below for running the instance.
cp .env.docker .env
npm i
npm run devIf you want to debug with the break points. Open VSCode and execute the development server in it.
All the posts should be placed in src/content/posts directory with MDX format.
All the pages should be placed in src/content/pages directory with MDX format.
You can add any scripts or other customizable features by leveraging the MDX.
Front-matter is a block of YAML at the beginning of the file that is used to configure settings for your writings. Front-matter is terminated by three dashes when written in YAML.
---
title: Hello World
date: 2013/7/13 20:46:25
---| Setting | Description | Required | Default |
|---|---|---|---|
slug |
ID (unique), used as the permalink | true | |
title |
Title | true | |
date |
Published date | true | |
updated |
Updated date | false | Published date |
comments |
Enables comment feature for the post | false | true |
tags |
Tags | false | null |
category |
Category | true | null |
summary |
Post summary in plain text | false | First 140 characters |
cover |
The cover image | false | null |
og |
The open graph | false | null |
published |
Whether the post should be published | false | true |
visible |
Can the post be displayed on the homepage | false | true |
toc |
Display the Table of Contents | false | false |
alias |
The alternatives slugs for post | false | [] |
| Setting | Description | Required | Default |
|---|---|---|---|
slug |
ID (unique), used as the permalink | true | |
title |
Title | true | |
date |
Published date | true | |
updated |
Updated date | false | Published date |
comments |
Enables comment feature for the page | false | true |
summary |
Page summary in plain text | false | First 140 characters |
cover |
The cover image | false | null |
og |
The open graph | false | null |
published |
Whether the page should be published | false | true |
toc |
Display the Table of Contents | false | false |
Almost all the design resources are placed in the file yufan.me.sketch. I mainly use the Sketch as my design tools.
The favicon is almost the same as the weblog logo. The main different is that we simplify the elements used in logo. Pick up the main park from the logo and change the dot color for readability in small icon. The background color is included in the exported favicon. That is because we want to make sure it could be viewed clearly in any browser.
The size of the favicon is following this tutorial to get it worked everywhere.
This weblog is deployed on the zeabur platform. You can check their documents and get your own weblog to be published without any budget at first.
Or you can host on your own machine. Use Dockerfile to build an image and run it locally.
- Add last modified time component for post.
- Slide share components integration.
- Check article grammar errors by using AI. Remain 42 posts.
- Add music to the articles. Remain 42 posts.
The source code of this blog is licensed under the MIT license, feel to free to use it without any legal risks.
The content of this blog's posts is licensed under the CC BY-NC-SA 4.0 license.
The fonts used in weblog logo is M+A1 with license, UnGungseo with license, and Iroha Mochi with license.
They are the fonts that can be used in business without any charge.
The OPPOSans 4.0 is used for rendering the open graph image in my weblog with license
The NoteSans SC is used for rendering the open graph image in my weblog with license
Some codes in this project are copied from other projects. I have added the comments in the files' header.
The source codes used from third party projects are:
- seo.ts from flexdinesh/blogster with license
- og.ts from yuaanlin/yual.in with permission
- images.ts and config.ts from zce/velite with license
- images.ts from vercel/next.js with license
- photoswipe-slideshow.js from junkfix/photoswipe-slideshow with license