This is a personal weblog for Yufan Sheng which is built on Next.js and hosted on Vercel. His original weblog is generated by the Hexo, you can referer the original weblog's source code in yufan.me-legacy-hexo.
- Bun: The build tool
- Next.js: The static generator and core framework on React
- Radix UI: The UI framework
- Artalk: The self-hosted comment system
- FlexSearch: The standalone indexer for searching
- Postgres: The view counter and like button for all my posts.
This weblog is still under heavy development. A lot of ideas and thoughts are still in my checklists. You can fork and clone this project for your own perspective. But you should use it at your own risk.
This weblog uses the postgres as the storage for post-views and fav button.
The configuration isn't defined in the .env for security reason.
You should modify the .env.example file and rename it to .env.local for local development.
# Clone this project.
git clone https://github.com/syhily/yufan.me.git
# Install the dependencies by using bun.
bun install
# Check the newer dependencies.
bun update
# Start local development with a live preview. The weblog is hosted on http://localhost:4321
bun run devSince bun lock file is in binary format, if we want to get it managed by git, the following lines should be added to your global git config.
git config --global diff.lockb.textconv bun
git config --global diff.lockb.binary trueThis weblog HTTP request routes keeps the same as my original weblog. I just list here for comprehension. You can change it as you personal needs.
/- List the lasted posts and pinged posts on top of it./page/{number}- List the posts by the page number./cats/{category}- List all the posts in this category. Posts can belong to only one category./cats/{category}/page/{number}- List the posts in the given category by the page number.
/tags/{name}- List the posts under this tag./about- A personal introduction./guestbook- A comment page for guests./links- A special endpoint for listing all the friends' website./feed- The subscribing page for display the xml./{page or article}- Show the page or article. The pages don't belong to any categories nor tags.
Almost all the design resources are placed in the asserts. I mainly use the Sketch as my design tools.
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 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.
The OPPOSans 3.0 is used for reading in my weblog. It can be used in business scenarios without any modification. The license file is here
This weblog is deployed on the Vercel 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 the pm2 to have a long-running process without an exit.
The comment system is leverage the Artalk, a self-hosted comment system. You should host it on your own machine. But it can be modified and changed to any other comment solutions. For instance, the giscus is an opinionated choice.
This project is licensed under the MIT license, feel to free to use it without any legal risks.