How I Build This Blog

how I build this blog


I will use tag more than headings, tag is better for searching and can avoid nested hierarchy, also it's easier to create a tag than decide a heading.

I will log my digital life so I will be more trackable rather than opaque. Digital world is a water surface for users, I want to change this.


There are three fonts used in this blog, they almost took 20MB.

I need use font-display: swap; so the downloading of the font won't block (opens in a new tab) the text showing up.

@font-face {
  font-family: "Klee One Regular";
  src: url("/fonts/KleeOne-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;

make VSCode spell check work for mdx

  • Open an MDX file.
  • Ctrl + Shift + p Enable Spell Checking Document Language (opens in a new tab)

If using vscode ssh, need to install Code Spell Checker extension in ssh again(there will be a button Install in SSH: )

make image showing

If I have a mdx file in a folder, eg. archived/ielts.mdx , I need to use src="../images/name of the image" to make it showing.


I have to use export to define a variable/constant.

export const photos = [

If I use const photos it will give me error.

nextra 和 vercel 结合生成 bug

tldr: 在 vercel 里设置 environment variable VERCEL_FORCE_NO_BUILD_CACHE = 1

我也不知怎么回事,也许 nextra 的 static site generation 和 vercel cache 产生奇妙反应,侧边栏就会出现类似 stale state 的现象。

我试试这篇文章推上去,让 vercel 自动 deploy 看看会不会有问题。

据说要 把 remote caching 关了 (opens in a new tab)





还是要 设置环境变量来跳过 build cache (opens in a new tab)

EDIT (14th Oct 2022): The VERCEL_FORCE_NO_BUILD_CACHE env var now exists! Set this to 1 and the build cache will be skipped.

终于, 原神亲自启动 了。

install tailwind CSS

import type { AppProps } from "next/app";
import "../globals.css"; // this must be put here
export default function App({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />;

Install Tailwind CSS with Next.js (opens in a new tab)

这些 没有文档记录的东西 (opens in a new tab) ,不知哪天就会 Move fast , break things!

add RSS support

I found that there are a rss generator of nextra blog theme, I'm gonna give it a try.

create script/gen-rss.js , fill it with gen-rss.js (opens in a new tab)

modify package.json

add the rss generation to build command

    "build": "node ./scripts/gen-rss.js && next build",

add new dependencies

    "gray-matter": "^4.0.3",
    "rss": "^1.2.2"

install dependencies and run build of course it won't work, I'm using the nextra doc theme, it doesn't have frontmatter

finally I managed to publish the feed.xml , but there isn't any title & content! But it can give the notification anyway. Move fast!

back to top

to do

environment variable (opens in a new tab)

create .env.local and use it like process.env.SOME_ENV


For safari, video tag (opens in a new tab) should have playsinline , otherwise it will jump out to fullscreen. If using JSX, maybe should (opens in a new tab) use webkit-playsinline={true}

<div className='flex flex-col items-center justify-center'>
    <video className='w-full h-auto md:w-80' autoPlay muted loop
    playsinline webkit-playsinline={true}>
        <source src="videos/ezgif-7-53636bcd6f.mp4" type="video/mp4" />
      Your browser does not support the video tag.
    <Caption children={"《天下无贼》中找到了生活的其他部分的劫匪"} />

Friend with iPhone 12 says that it's still not working. The video still jump out. Okay, I'll go back to gif. Feck it (opens in a new tab).

看了看 svelte4 ,据说 又要 svelte5 (opens in a new tab) ,语法大改动。也许 用无聊的技术 (opens in a new tab) 是对的,你还在各种技术栈反复横跳, jquery 都 4 beta 了 (opens in a new tab) , PHP 都兰博基尼了 (opens in a new tab)

Do not shoot this.