feat: 添加 ICP 备案号。

.devcontainer/Dockerfile

@@ -11,4 +11,4 @@ FROM mcr.microsoft.com/vscode/devcontainers/typescript-node:0-${VARIANT}
 # RUN su node -c "source /usr/local/share/nvm/nvm.sh && nvm install ${EXTRA_NODE_VERSION}"
 
 # [Optional] Uncomment if you want to install more global node packages
-# RUN su node -c "npm install -g pnpm"
+RUN su node -c "npm install -g pnpm"

.devcontainer/devcontainer.json

@@ -11,7 +11,6 @@
       "VARIANT": "16-bullseye"
     }
   },
-
   // Configure tool-specific properties.
   "customizations": {
     // Configure properties specific to VS Code.
@@ -40,21 +39,17 @@
       ]
     }
   },
-
   // Use 'forwardPorts' to make a list of ports inside the container available locally.
   "forwardPorts": [3000],
-
   // Use 'postCreateCommand' to run commands after the container is created.
   // "postCreateCommand": "yarn install",
-
   // Comment out to connect as root instead. More info: https://aka.ms/vscode-remote/containers/non-root.
   "remoteUser": "node",
   "features": {
     "git": "os-provided",
-    "git-lfs": "latest"
+    "git-lfs": "latest",
+    "ghcr.io/devcontainers/features/docker-in-docker:2": {}
   },
-  "mounts": [
-    "source=${localEnv:HOME}${localEnv:USERPROFILE}/.ssh,target=/home/node/.ssh,type=bind,consistency=cached"
-  ],
-  "postStartCommand": "npm ci && npm run dev"
+  "mounts": [],
+  "postStartCommand": "pnpm install && npm run dev"
 }

.drone.yml

@@ -119,12 +119,12 @@ kind: pipeline
 type: docker
 name: deploy
 clone:
-  disable: true
+  disable: false
 depends_on:
   - linux-amd64
 
 steps:
-  - name: deploy
+  - name: watchtower-online
     image: plugins/webhook
     settings:
       token_value:
@@ -170,3 +170,74 @@ steps:
         ```
         🌐 {{ build.link }}
         {{/success}}
+
+
+---
+kind: pipeline
+type: docker
+name: deploy-to-zzidc
+clone:
+  disable: false
+depends_on:
+  - linux-amd64
+
+trigger:
+  branch:
+    - master
+    - develop
+
+steps:
+  - name: upload
+    image: docker:dind
+    volumes:
+    - name: dockersock
+      path: /var/run/docker.sock
+    commands:
+      - docker pull docker-registry.ivanli.cc/ivan/tailwind-nextjs-blog-deps:${DRONE_BRANCH}${DRONE_TAG}-amd64
+      - docker build --pull=true --target upload -t docker-registry.ivanli.cc/ivan/tailwind-nextjs-blog-upload:${DRONE_COMMIT_SHA:0:8} --cache-from docker-registry.ivanli.cc/ivan/tailwind-nextjs-blog-deps:${DRONE_BRANCH}${DRONE_TAG}-amd64 .
+      - docker run --rm -t -e FTP_ACCOUNT=$${FTP_ACCOUNT} -e FTP_PASSWORD=$${FTP_PASSWORD} -e FTP_HOST=$${FTP_HOST} docker-registry.ivanli.cc/ivan/tailwind-nextjs-blog-upload:${DRONE_COMMIT_SHA:0:8}
+    environment:
+      DOCKER_BUILDKIT: "1"
+      FTP_ACCOUNT:
+        from_secret: zzidc_ftp_account
+      FTP_PASSWORD:
+        from_secret: zzidc_ftp_password
+      FTP_HOST:
+        from_secret: zzidc_ftp_host
+
+  - name: notify
+    image: appleboy/drone-telegram
+    when:
+      status:
+        - success
+        - failure
+    failure: ignore
+    detach: true
+    environment:
+      PLUGIN_TOKEN:
+        from_secret: drone-telegram-bot-token
+      PLUGIN_TO:
+        from_secret: telegram-notify-to
+    settings:
+      format: markdown
+      message: >
+        {{#success build.status}}
+        ✅ Deploy #{{build.number}} of `{{repo.name}}` to ZZIDC succeeded.
+        📝 Commit by {{commit.author}} on `{{commit.branch}}`:
+        ```
+        {{commit.message}}
+        ```
+        🌐 {{ build.link }}
+        {{else}}
+        ❌ Deploy #{{build.number}} of `{{repo.name}}` to ZZIDC failed.
+        📝 Commit by {{commit.author}} on `{{commit.branch}}`:
+        ```
+        {{commit.message}}
+        ```
+        🌐 {{ build.link }}
+        {{/success}}
+
+volumes:
+- name: dockersock
+  host:
+    path: /var/run/docker.sock

.vscode/settings.json

@@ -7,15 +7,20 @@
     "Commento",
     "CONVERTKIT",
     "Cusdis",
+    "Discuz",
     "Disqus",
     "dokodemo",
     "EMAILOCTOPUS",
     "fullchain",
     "Giscus",
     "KLAVIYO",
+    "Kutt",
     "lastmod",
+    "Logseq",
     "MAILCHIMP",
+    "Miniflux",
     "nextjs",
+    "Nuxt",
     "outbounds",
     "rprx",
     "unist",

Dockerfile

@@ -12,11 +12,24 @@ FROM deps as build
 WORKDIR /app
 COPY . .
 COPY --from=deps /app ./
-RUN pnpm build &&\
-  pnpm prune --prod --config.ignore-scripts=true
+RUN pnpm build
+
+FROM build as pre-release
+WORKDIR /app
+RUN pnpm prune --prod --config.ignore-scripts=true
 
 FROM node:16-alpine as release
 WORKDIR /app
-COPY --from=build /app ./
+COPY --from=pre-release /app ./
 EXPOSE 80
 CMD npm run serve -- -p 80
+
+FROM build as export
+WORKDIR /app
+RUN npm run export
+
+FROM alpine:latest as upload
+RUN apk add lftp
+WORKDIR /app
+COPY --from=export /app/out ./
+CMD lftp -u "${FTP_ACCOUNT},${FTP_PASSWORD}" "${FTP_HOST}" -e 'set ftp:ssl-allow off && set use-feat no && mirror -c -R --use-pget-n=10 . ./WEB && exit'

README.md

@@ -5,85 +5,12 @@
 [![Build Status](https://ci.ivanli.cc/api/badges/Ivan/tailwind-nextjs-blog/status.svg)](https://ci.ivanli.cc/Ivan/tailwind-nextjs-blog)
 [![Website Status](https://uptime.sg.ivanli.cc/api/badge/18/uptime/720?label=30&labelSuffix=d)](https://ivanli.cc)
 
-This is a [Next.js](https://nextjs.org/), [Tailwind CSS](https://tailwindcss.com/) blogging starter template. Probably the most feature-rich Next.js markdown blogging template out there. Comes out of the box configured with the latest technologies to make technical writing a breeze. Easily configurable and customizable. Perfect as a replacement to existing Jekyll and Hugo individual blogs.
-
-Check out the documentation below to get started.
-
-Facing issues? Check the [FAQ page](https://github.com/timlrx/tailwind-nextjs-starter-blog/wiki) and do a search on past issues. Feel free to open a new issue if none has been posted previously.
-
-Feature request? Check the past discussions to see if it has been brought up previously. Otherwise, feel free to start a new discussion thread. All ideas are welcomed!
-
-## Features
-
-- Easy styling customization with [Tailwind 3.0](https://tailwindcss.com/blog/tailwindcss-v3) and primary color attribute
-- Near perfect lighthouse score - [Lighthouse report](https://www.webpagetest.org/result/210111_DiC1_08f3670c3430bf4a9b76fc3b927716c5/)
-- Lightweight, 45kB first load JS, uses Preact in production build
-- Mobile-friendly view
-- Light and dark theme
-- Self-hosted font with [Fontsource](https://fontsource.org/)
-- Supports [plausible](https://plausible.io/), [simple analytics](https://simpleanalytics.com/) and google analytics
-- [MDX - write JSX in markdown documents!](https://mdxjs.com/)
-- Server-side syntax highlighting with line numbers and line highlighting via [rehype-prism-plus](https://github.com/timlrx/rehype-prism-plus)
-- Math display supported via [KaTeX](https://katex.org/)
-- Citation and bibliography support via [rehype-citation](https://github.com/timlrx/rehype-citation)
-- Automatic image optimization via [next/image](https://nextjs.org/docs/basic-features/image-optimization)
-- Flexible data retrieval with [mdx-bundler](https://github.com/kentcdodds/mdx-bundler)
-- Support for tags - each unique tag will be its own page
-- Support for multiple authors
-- Blog templates
-- TOC component
-- Support for nested routing of blog posts
-- Newsletter component with support for mailchimp, buttondown, convertkit, klaviyo, revue, and emailoctopus
-- Supports [giscus](https://github.com/laymonage/giscus), [utterances](https://github.com/utterance/utterances) or disqus
-- Projects page
-- Preconfigured security headers
-- SEO friendly with RSS feed, sitemaps and more!
-
-## Sample posts
-
-- [A markdown guide](https://tailwind-nextjs-starter-blog.vercel.app/blog/github-markdown-guide)
-- [Learn more about images in Next.js](https://tailwind-nextjs-starter-blog.vercel.app/blog/guide-to-using-images-in-nextjs)
-- [A tour of math typesetting](https://tailwind-nextjs-starter-blog.vercel.app/blog/deriving-ols-estimator)
-- [Simple MDX image grid](https://tailwind-nextjs-starter-blog.vercel.app/blog/pictures-of-canada)
-- [Example of long prose](https://tailwind-nextjs-starter-blog.vercel.app/blog/the-time-machine)
-- [Example of Nested Route Post](https://tailwind-nextjs-starter-blog.vercel.app/blog/nested-route/introducing-multi-part-posts-with-nested-routing)
-
-## Quick Start Guide
-
-1. Try installing the starter using the new [Pliny project CLI](https://github.com/timlrx/pliny):
-
-```bash
-npm i -g @pliny/cli
-pliny new --template=starter-blog my-blog
-```
-
-It supports the updated version of the blog with Contentlayer, optional choice of TS/JS and different package managers as well as more modularized components which will be the basis of the template going forward.
-
-Alternatively to stick with the current version, TypeScript and Contentlayer:
-
-```bash
-npx degit 'timlrx/tailwind-nextjs-starter-blog#contentlayer'
-```
-
-or JS (official support)
-
-```bash
-npx degit https://github.com/timlrx/tailwind-nextjs-starter-blog.git
-```
-
-2. Personalize `siteMetadata.js` (site related information)
-3. Modify the content security policy in `next.config.js` if you want to use
-   any analytics provider or a commenting solution other than giscus.
-4. Personalize `authors/default.md` (main author)
-5. Modify `projectsData.js`
-6. Modify `headerNavLinks.js` to customize navigation links
-7. Add blog posts
-8. Deploy on Vercel
+Ivan Li's Blog, base [timlrx/tailwind-nextjs-starter-blog](https://github.com/timlrx/tailwind-nextjs-starter-blog)
 
 ## Installation
 
 ```bash
-npm install
+pnpm install
 ```
 
 ## Development
@@ -91,13 +18,13 @@ npm install
 First, run the development server:
 
 ```bash
-npm start
+pnpm start
 ```
 
 or
 
 ```bash
-npm run dev
+pnpm run dev
 ```
 
 Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
@@ -180,18 +107,4 @@ Follow the interactive prompt to generate a post with pre-filled front matter.
 
 ## Deploy
 
-**Vercel**
-The easiest way to deploy the template is to use the [Vercel Platform](https://vercel.com) from the creators of Next.js. Check out the [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
-
-**Netlify / GitHub Pages / Firebase etc.**
-As the template uses `next/image` for image optimization, additional configurations have to be made to deploy on other popular static hosting websites like [Netlify](https://www.netlify.com/) or [GitHub Pages](https://pages.github.com/). An alternative image optimization provider such as Imgix, Cloudinary or Akamai has to be used. Alternatively, replace the `next/image` component with a standard `<img>` tag. See [`next/image` documentation](https://nextjs.org/docs/basic-features/image-optimization) for more details.
-
-The API routes used in the newsletter component cannot be used in a static site export. You will need to use a form API endpoint provider and substitute the route in the newsletter component accordingly. Other hosting platforms such as Netlify also offer alternative solutions - please refer to their docs for more information.
-
-## Support
-
-Using the template? Support this effort by giving a star on GitHub, sharing your own blog and giving a shoutout on Twitter or becoming a project [sponsor](https://github.com/sponsors/timlrx).
-
-## License
-
-[MIT](https://github.com/timlrx/tailwind-nextjs-starter-blog/blob/master/LICENSE) © [Timothy Lin](https://www.timlrx.com)
+Drone CI.

components/Footer.tsx

@@ -25,6 +25,11 @@ export default function Footer() {
           <div>{` • `}</div>
           <Link href="/">{siteMetadata.title}</Link>
         </div>
+        <div className="mb-2 text-sm text-gray-500 dark:text-gray-400">
+          <Link href="https://beian.miit.gov.cn" rel="nofollow">
+            闽ICP备2023000043号
+          </Link>
+        </div>
         <div className="mb-8 text-sm text-gray-500 dark:text-gray-400">
           <Link
             href="https://github.com/timlrx/tailwind-nextjs-starter-blog"

data/authors/default.md

@@ -1,6 +1,6 @@
 ---
 name: Ivan Li
-avatar: https://pan.ivanli.cc/api/v3/file/source/1234/%E5%A4%B4%E5%83%8F.png?sign=xIgy54DyFRYupxjZJbK02HmpKX8C53YR-O0I18Rxm70%3D%3A0
+avatar: https://pan.ivanli.cc/api/v3/file/source/1234/头像.png?sign=xIgy54DyFRYupxjZJbK02HmpKX8C53YR-O0I18Rxm70%3D%3A0
 occupation: Web Full Stack Developer
 email: master@ivanli.cc
 github: https://github.com/IvanLi-CN

data/blog/arch-linux-quick-setup.md

@@ -0,0 +1,19 @@
+---
+title: 搭建日常使用的 Arch Linux
+date: '2022-10-17'
+tags: ['Arch Linux', '环境搭建', 'VPS']
+draft: false
+summary: 有了上次快速安装步骤后，接下来就是使用这个环境了。要使用环境，首先需要做一些初始化操作。我的步骤适合我，但不一定适合你，只是记录和参考。
+images:
+  [
+    'https://pan.ivanli.cc/api/v3/file/source/2238/archlinux-logo-light.png?sign=bWxqFFy3RUDT5UsWb4UD5byt-_L4h79wede3runRKFc%3D%3A0',
+  ]
+---
+
+## Docker
+
+登录私有仓库，以便拉取镜像。
+
+```zsh
+docker login -u="ivan+hk_nat" docker-registry.ivanli.cc
+```

data/blog/archlinux-on-promox-ve-lxc.md

@@ -22,6 +22,11 @@ Arch Linux 准入门槛确实有点高，在 PVE 中，使用 LCX 容器运行 A
 
 位置(Location)
 先编辑 `/etc/locale.gen`，取消 `en_US.UTF-8 UTF-8` 的注释。
+
+```bash
+sed -i "s/#en_US.UTF-8 UTF-8/en_US.UTF-8 UTF-8/" /etc/locale.gen
+```
+
 然后执行：
 
 ```bash
@@ -69,10 +74,17 @@ nano /etc/pacman.d/mirrorlist
 ```
 
 选择你喜欢并且方便连接的镜像，然后删除该行的“#”取消注释。可以选择一个或多个，在前面的优先级高。
+
+开启并行下载，在 `/etc/pacman.conf` 中取消 `ParallelDownloads` 前的注释，值为并行下载数：
+
+```bash
+sed -i "s/#ParallelDownloads = 5/ParallelDownloads = 5/" /etc/pacman.conf
+```
+
 接下来我们更新已安装的软件，我们的哲学就是时刻保持最新。
 
 ```bash
-  pacman -Syu
+pacman -Syu
 ```
 
 **一般来说，执行上面的命令后，会拉取索引数据库，之后会优先更新 `archlinuxx-keyring`。如果不是这样的话，应当手动执行下面的代码：**
@@ -98,6 +110,12 @@ _参考：[Cant Upgrade because of keyring - Technical Issues and Assistance / P
 
 ### 3. 创建用户
 
+首先，安装 `sudo`：
+
+```bash
+pacman -S sudo
+```
+
 让我们给自己分配一个具有 sudo 权限的账户
 
 ```zsh
@@ -113,12 +131,6 @@ _参考：[Create a Sudo User on Arch Linux - Vultr.com](https://www.vultr.com/d
 EDITOR=vim visudo
 ```
 
-安装 `sudo`：
-
-```bash
-pacman -S sudo
-```
-
 接下来使用刚刚创建的用户登录吧！
 
 ### 4. 使用 SSH 远程登录

data/blog/debian-desktop-environment.md

@@ -0,0 +1,181 @@
+---
+title: 在 PVE 宿主机上使用桌面环境
+date: '2022-10-28'
+tags: ['PVE', 'PVE', 'DE', '环境搭建', 'Debian']
+draft: false
+summary: 虽然 PVE 宿主机不应该安装乱七八糟的东西，但是我穷，为了物尽其用，为了在主力电脑翻车时有一个立即可用的备用环境，所以还是安装了基础的桌面环境。现在的 Linux 桌面环境越来越好了，我选择安装 KDE Plasma 作为桌面环境，并且默认关闭，按需启用。
+images:
+  [
+    'https://pan.ivanli.cc/api/v3/file/source/2243/1200px-Kde_dragons.png?sign=yGZL9jYeVt53Ve43ddhHt_0EzVV2cW_WbxHc0dEcwWY%3D%3A0',
+  ]
+---
+
+## 前言
+
+过几天就是双十一了，或许是我去购物网站上看了下显卡价格吧，我的显卡当晚就闹情绪，不工作还引发宕机。虽然拔了显卡，我还能用核显开机，但是我懒呀，所以我花了一个晚上在 PVE 宿主机上搭了一个临时环境，用于日常娱乐（看番、听歌）和一般工作（敲代码）。还别说，我在一开始装 PVE 时，就预先装上了桌面环境，这就是预判呀！
+
+现在 Linux 桌面环境已经非常好了，相比 17 年左右的体验，又上了一个新的台阶。不过，作为临时应急环境，倒也不会去装那些没啥用的国产软件，本着够用就好的原则，主要是以 Web App > Web > Linux Client 的顺序挑选软件。一般来说，我用到的也不多：
+
+- **浏览器：Google Chrome**。主要是好用，能同步，还能远程桌面。
+
+## 准备
+
+首先应该拥有自己的账户，否则你将会发现自己无法登录桌面环境。因为桌面环境默认在登录时没有 `root` 用户选项。
+
+### 创建账户：
+
+```bash
+useradd -m ivan
+passwd ivan
+usermod -aG wheel ivan
+```
+
+给刚刚创建的账户分配一个具有 sudo 权限的账户
+
+```bash
+EDITOR=vim visudo
+```
+
+找到 `%wheel ALL=(ALL: ALL) ALL` 这行，取消这行的注释。
+
+现在，你自己的账号具有 sudo 权限了。
+
+### 生成 SSH 密钥
+
+2022 年，应该生成 `ed25519` 算法的密钥：
+
+```bash
+ssh-keygen -t ed25519
+```
+
+## 启用和禁用桌面环境
+
+**使用 `root` 账户执行下面的命令！**
+
+查看当前的默认目标：
+
+```bash
+systemctl get-default
+```
+
+临时禁用图形界面：
+
+```bash
+init 3
+```
+
+临时启用图形界面：
+
+```bash
+init 5
+```
+
+永久禁用图形界面：重启生效：
+
+```bash
+systemctl set-default multi-user.target
+```
+
+永久启用图形界面，重启生效：
+
+```bash
+systemctl set-default graphical.target
+```
+
+## Google Chrome Browser
+
+安装方式就是直接[官网下载](https://www.google.com/chrome/)。下载完成后双击打开安装。
+
+或者通过命令行安装：
+
+```bash
+wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb
+
+sudo apt install ./google-chrome-stable_current_amd64.deb
+```
+
+安装过程中可能会出错，可以使用命令进行安装，然后根据提示修复问题。修复过程中可能会重启电脑。具体情况我没留意，下次遇到的话再补充，嘿嘿。
+
+## VS Code
+
+同样从官网下载安装：[Download Visual Studio Code - Mac, Linux, Windows](https://code.visualstudio.com/download)
+
+### 同步问题
+
+参考：[Visual Studio Code 中的设置同步](https://code.visualstudio.com/docs/editor/settings-sync#_linux)
+
+我用的是 KDE Plasma，似乎[再等等](https://github.com/microsoft/vscode/issues/104319#issuecomment-1250089491)就能直接正常使用了，所以我先忍受同步问题吧。
+
+## 中文输入法
+
+我使用 iBus + Rime + 小鹤音形.
+执行以下命令安装 iBus + Rime：
+
+```bash
+sudo apt install ibus ibus-rime
+```
+
+接下来配置小鹤音形方案。
+访问[小鹤的网盘](http://flypy.ysepan.com/)下载小鹤音形的挂接文件，小狼毫、鼠须管的都可以。
+下载完成后解压出来，把压缩文件里的 `rime` 目录复制到 `/home/ivan/.config/ibus/rime`：
+
+```bash
+# 如果你没有 unzip，通过下面命令安装：
+# sudo apt install unzip
+
+cd ~/Downloads
+unzip '小鹤音形“鼠须管”for macOS.zip'
+cd '小鹤音形Rime平台鼠须管for macOS'
+cp -r ./rime ~/.config/ibus/rime
+```
+
+创建 `~/.config/ibus/rime/default.custom.yaml` 文件，并设为以下内容：
+
+```yaml
+patch:
+  schema_list:
+    - { schema: flypy }
+    - { schema: luna_pinyin }
+```
+
+参考：[分享我的输入法配置 （Rime 小狼豪 + 小鹤音形） - 炒饭之道](https://itx.ink/2018/11/21/SHARE_MY_RIME/)
+
+配置 iBus 环境变量：
+
+```bash
+cat >> ~/.zshrc <<EOF
+
+# ibus
+export GTK_IM_MODULE=ibus
+export XMODIFIERS=@im=ibus
+export QT_IM_MODULE=ibus
+EOF
+```
+
+启动 ibus
+
+```bash
+ibus-setup
+```
+
+在打开的 GUI 中添加中文输入法，找到 Rime 并添加输入法：
+
+![rime](https://pan.ivanli.cc/api/v3/file/source/2241/Screen%20Capture_select-area_20221028225457.png?sign=XVrl7rPk4Gd7QRFBCCDGruB2L7V1bvxDpK9-v9pC0Nc%3D%3A0)
+
+现在，新打开的软件应该能使用输入法了。像 Chrome 这类，关闭后还需要手动杀死进程后再打开才能使用。最简单的方法就是重启电脑啦~
+
+## 快捷键
+
+我习惯使用 Mac OS 系统的快捷键，所以 [Kinto](https://github.com/rbreaves/kinto) 是我的不二之选。key
+
+安装：
+
+```bash
+/bin/bash -c "$(wget -qO- https://raw.githubusercontent.com/rbreaves/kinto/HEAD/install/linux.sh || curl -fsSL https://raw.githubusercontent.com/rbreaves/kinto/HEAD/install/linux.sh)"
+```
+
+卸载：
+
+```bash
+/bin/bash <( wget -qO- https://raw.githubusercontent.com/rbreaves/kinto/HEAD/install/linux.sh || curl -fsSL https://raw.githubusercontent.com/rbreaves/kinto/HEAD/install/linux.sh ) -r
+```

data/blog/install-and-setup-arch-linux.md

@@ -31,7 +31,15 @@ chmod +x vps2arch
 ./vps2arch
 ```
 
-等待几分钟就完成了。如果是中国大陆境内的机子，建议全局代理或使用自定义的系统镜像源。可以从[这个网站](https://archlinux.org/mirrorlist/?country=HK&protocol=https&use_mirror_status=on)获取镜像地址。地址上有查询参数，可以根据自己需要修改。
+等待几分钟就完成了。如果是中国大陆境内的机子，建议全局代理或使用自定义的系统镜像源。可以从下面的网站获取镜像地址。地址上有查询参数，可以根据自己需要修改。
+
+> [https://archlinux.org/mirrorlist/?country=HK&protocol=https&use_mirror_status=on](https://archlinux.org/mirrorlist/?country=HK&protocol=https&use_mirror_status=on)
+
+推荐使用 `https://hkg.mirror.rackspace.com/archlinux/`：
+
+```bash
+./vps2arch -m 'https://hkg.mirror.rackspace.com/archlinux/'
+```
 
 如果系统装不上，可以在 IDC 面板上重装其他系统后再试，推荐使用 Debian。
 
@@ -57,7 +65,7 @@ ssh-keygen -R '[20.20.20.20]:20000'
 设置主机名：
 
 ```bash
-sudo hostnamectl set-hostname arch.example.com
+hostnamectl set-hostname arch.example.com
 ```
 
 启用 pacman 并行下载：
@@ -145,9 +153,12 @@ zinit ice depth=1; zinit light romkatv/powerlevel10k' >> ~/.zshrc
 避免优先匹配到子目录，在 `.zshrc` 中添加如下行：
 
 ```zsh
+cat >> ~/.zshrc <<EOF
+
 # zsh-z
 ZSHZ_UNCOMMON=1
 ZSHZ_TRAILING_SLASH=1
+EOF
 ```
 
 #### History
@@ -155,15 +166,37 @@ ZSHZ_TRAILING_SLASH=1
 配置历史记录，在 `.zshrc` 中添加如下行：
 
 ```zsh
+cat >> ~/.zshrc <<EOF
+
+# History
 HISTFILE=~/.zsh_history
 HISTSIZE=10000
 SAVEHIST=1000
 setopt INC_APPEND_HISTORY_TIME
+EOF
 ```
 
 详细配置参考：[Better zsh history | SoberKoder](https://www.soberkoder.com/better-zsh-history/)
 文档：[zsh: 16 Options](https://zsh.sourceforge.io/Doc/Release/Options.html)
 
+然后进入到 `zsh` 中，执行一次 `source ~/.zshrc`：
+
+```shell
+zsh
+
+source ~/.zshrc
+```
+
+设置 Zsh 为默认的 shell 程序：
+
+```bash
+# 列出所有已安装的 shell 程序
+chsh -l
+# 从上面的结果中找到 zsh 的完整路径
+# 我的是 /bin/zsh
+chsh -s /bin/zsh
+```
+
 ### Docker
 
 安装 Docker 和 Docker Compose 也很简单：

data/blog/network-freedom-with-vps.md

@@ -1,8 +1,19 @@
 ---
 title: 利用一台小鸡实现网络自由
 date: '2022-10-06'
-tags: ['SNI', 'TLS', 'Reverse Proxy', '反向代理', '正向代理', ‘内网穿透', 'Caddy', 'Xray', 'Vless']
-draft: false
+tags:
+  [
+    'SNI',
+    'TLS',
+    'Reverse Proxy',
+    '反向代理',
+    '正向代理',
+    ‘内网穿透',
+    'Caddy',
+    'Xray',
+    'Vless',
+  ]
+draft: true
 summary: SNI Proxy 进行 TLS 分流；Caddy 对网站和 Xray 进行反向代理；Xray 实现正向、反向代理（内网穿透）。
 ---
 

data/blog/react-18-stricter-strict-mode.md

@@ -0,0 +1,74 @@
+---
+title: React 18，新的严格模式
+date: '2023-02-06'
+tags: ['React']
+draft: false
+summary: 好好的 useMemo、useEffect 居然执行了两次，我明明传入了依赖，为什么会执行两次呢？原来是 React 18 的破坏性改动！
+---
+
+之前在开发模式时，一直记得 `useMemo` 在严格模式下不会二次执行， `useEffect` 在有传入 `deps` 时也不会二次执行。而今天我在排下面这段代码时，发现一个要命的事情！
+
+```tsx
+const camera = useMemo(/* .. */, []);
+const renderer = props; // from parent
+
+const controls = useMemo(
+  () => new OrbitControls(camera, renderer.domElement),
+  [camera, renderer],
+);
+
+useEffect(() => {
+  // 同一个 controls 进入两次
+  return () => {
+    controls.dispose(); // 执行一次，controls 被释放
+  };
+}, [controls]);
+```
+
+`controls` 生成了两个，第一个似乎没用到了，第二个是后续要正常使用的对象，并且进入了 `useEffect` 中，而且进去了两次！
+这导致两个严重的问题就是，第一个 `controls` 没有被销毁，第二个 `controls` 被销毁了！
+第一个没销毁是内存泄漏，第二个被销毁了导致 `controls` 对象不可用了！
+
+我一度以为是我对 useEffect 特性的记忆出现了偏差，后来我在官方文档翻了半天没啥收获，指到我看见了更新说明里的 [Stricter Strict Mode](https://github.com/facebook/react/blob/main/CHANGELOG.md#1820-june-14-2022:~:text=Stricter%20Strict%20Mode)。
+
+## 新的严格模式
+
+从更新日志可以看到，新的严格模式会自动卸载并再次重新挂载每个组件，这就解释了为什么 `useMemo` 和 `useEffect` 即使在有传入 `deps` 也会多执行一次。
+
+这个特性是破坏性的，会影响之前版本的程序逻辑，所以 React 在[更新说明](https://github.com/facebook/react/blob/main/CHANGELOG.md#1820-june-14-2022:~:text=If%20this%20breaks%20your%20app%2C%20consider%20removing%20Strict%20Mode%20until%20you%20can%20fix%20the%20components%20to%20be%20resilient%20to%20remounting%20with%20existing%20state.)也建议如果旧的应用因为这个出现兼容性问题，建议先关掉 `strictMode`。
+
+### 在 React 18 的测试代码
+
+![React 18 Stricter Strict Mode.png](https://pan.ivanli.cc/api/v3/file/source/2753/React%2018%20Stricter%20Strict%20Mode.png?sign=ARQ8AVTh-NEaeJRypJlVokuUVhocPeaK8n7GRSDwqNw%3D%3A0)
+
+代码：[Code Sandbox](https://codesandbox.io/p/sandbox/clever-cache-pm1oct?file=%2Fsrc%2FApp.tsx&selection=%5B%7B%22endColumn%22%3A20%2C%22endLineNumber%22%3A33%2C%22startColumn%22%3A20%2C%22startLineNumber%22%3A33%7D%5D)
+
+红色是第一次渲染，绿色是第二次渲染。输出日志里淡些的是 React 18 在二次调用时输出的 log 的默认效果，在 React 17 中是被默认隐藏的。蓝色指向的是最终应用在界面上呈现的结果。
+
+我在 V 站上也提出了我的[疑问](https://v2ex.com/t/913595)，根据大佬们的回复，我总结了一下：
+
+1. `useMemo(() => /* */, [])` 执行一此后，以新的严格模式的规则，进行了二次调用，第一次的值作废。
+2. `useEffect(() => /* */, [])`执行一此后，以新的严格模式的规则，调用了 `destructor` 后，进行了二次调用。
+
+在第 2 点中，两次 useEffect 都是使用同一个值，是因为严格模式的二次调用按钩子分别执行两次，所以 useMemo 两次的调用都完毕后，得到的值再被 useEffect 执行两次。我调整了一下代码，将测试代码复制了一份在后面，可以看到 “useMemo” 和 “useMemo 2” 先执行了一次，又再执行了一次，然后再到 “useEffect“ 和 “useEffect 2"：
+![加倍快乐](https://pan.ivanli.cc/api/v3/file/source/2754/React%2018%20Stricter%20Strict%20Mode%202.png?sign=iYz9KP9uMuccRCesjqoRPKejEoUOj4FZfnBPt8kCXnQ%3D%3A0)
+
+## 结论
+
+`useEffect` 应该独自管理副作用，要做到自己创建，自己销毁。
+
+```tsx
+const camera = useMemo(/* .. */, []);
+const renderer = props; // from parent
+
+const [controls, setControls] = useState<OrbitControls | null>(null);
+useEffect(() => {
+  const controls = new OrbitControls(camera, renderer.domElement) // 自己的锅
+  setControls(controls);
+  return () => {
+    controls.dispose(); // 自己背
+  };
+}, [camera, renderer]);
+```
+
+今天深究了一下这个问题，解决方案其实我也知道，但是之前的写法突然以我不理解的方式失效了，还是要较个劲，万一是 React 不规范呢？（狗头

data/blog/self-hosted-baas.md

@@ -0,0 +1,35 @@
+---
+title: 自部署的 BaaS 服务对比
+date: '2023-01-24'
+tags: ['BaaS', 'Self-Hosted', 'appwrite', 'nhost', 'supabase']
+draft: false
+summary: supabase、nhost、appwrite 之间的对比，关注自部署方向。
+---
+
+BaaS，后端即服务。
+最近关注 BaaS 自部署主要还是因为自己有一些简单的服务端开发需求，可能就一两个函数的事。
+如果专门去写一个后端，显得有些铺张了。而且创建一个项目是个麻烦事，我也不愿意从旧项目复制可能已经过时代码进来，所以就想到 FaaS。
+但是 FaaS 我搜罗了一圈，适合个人自部署的 FaaS 平台少之又少，最后找了个 Serverless 的函数项目 [Trusted CGI](https://trusted-cgi.reddec.net/)（[Repo](https://github.com/reddec/trusted-cgi)，Go Lang）。
+这个挺适合个人使用，但是无状态意味着我还得自己搞状态存储，还是不太符合我的需求，所以就看上了 BaaS。
+
+## BaaS 简要介绍
+
+目前 BaaS 大概是用户管理、授权、认证，加上数据库设计和存储、对象存储，再加上各类的 event hook 和 push，再加上 Serverless Functions 构成的。这个组件构成非常适合原型、Demo 以及轻量的应用开发。
+当然，如果后续有性能瓶颈，至少垂直扩展和 functions 层水平扩展是没有任何问题。至于持久层的水平扩展，也能像传统方案处理。
+
+BaaS 最佳的应用场景就是各类 Apps 的服务端了。包括 Web Apps 在内，主要业务由 Apps 端处理的话，BaaS 就是绝佳的生产力工具。而且服务端的业务逻辑基本上都是写在 Serverless Functions 里，所以根本不需要考虑升级会暂停服务，因为它是无状态的，更新时是能做到零秒重载的。
+
+更权威的定义可以看[这里](https://www.cloudflare.com/zh-cn/learning/serverless/glossary/backend-as-a-service-baas/)。
+
+## 对比
+
+适合生产的环境自然也就是各大平台自有的云 BaaS 平台了，在他们各自的云平台上，你可以享受到完整、轻松的开发体验。但是这是对于企业和专业用途的个人用户，而玩票性质的我就暂时用不上了，所以我的目标就是开源的、可自部署的 BaaS 服务。
+
+我淘了好久，找到了三个不错的开源项目，分别是 supabase <img alt="Packagist Stars" class="inline" src="https://img.shields.io/packagist/stars/appwrite/appwrite?style=social"/>、appwrite <img alt="Packagist Stars" class="inline" src="https://img.shields.io/packagist/stars/nhost/nhost?style=social"/>、nhost <img alt="Packagist Stars" class="inline" src="https://img.shields.io/packagist/stars/appwrite/appwrite?style=social"/>。他们仨在 Github 上的 Stars 目前是从多到少的。
+接下来就以自部署的角度来对比下他们三个之间的差异。
+
+TL; DR, 如果小项目多，推荐使用 appwrite；如果现阶段需要表的关联，建议使用 nhost；supabase 不适合自部署，他没有可以自部署的 serverless functions。
+
+### Supabase
+
+Github 上的星星老多了，可以说是目前最火的 BaaS 项目了。他对标的是  Firebase，以  Firebase 的开源版本自居。

data/blog/thinks-for-2022.md

@@ -0,0 +1,119 @@
+---
+title: 再见 2022，你好 2023
+date: '2022-12-31'
+tags: ['总结']
+draft: false
+summary: 2022 年就要结束了，写个工作与学习的总结，记录下我的 2022 年。
+---
+
+二零二二，疫情不出意外地还在我们身边，而我们也早已经习惯了疫情。
+
+## 电子电路与嵌入式开发
+
+我一直对电子电路有着兴趣，而今年三月，我突然觉得我行了。购买了仪器和工具设备，开始自学电子电路知识。
+软件开发一直和数字电路有着密不可分的联系，草草地学习完模拟电路和数字电路后，更加肯定软件和硬件不能独立，而是相辅相成的。
+而我的第一个目标是构建一个锂电池 UPS，为的是让充当服务器的 J4125 工控机能从容应对突然的断电。
+项目我拆分了好几部分，一个阶段，一个阶段地完成，向着目标努力。
+印象比较深的还是第一个部分的实现。第一个部分是实现一个理想二极管。
+所谓理想二极管就是电流单向流动，并且（几乎）没有普通二极管的压降。
+还记得我开开心心地在各大电子电路论坛爬楼找思路时，找到了个方案，在电路模拟软件搭建好电路后，运行了模拟，结果挺有效的。
+我就赶紧画电路板打样了。等待样板寄来的包裹的这几天，我思来想去这电路好像不应该有效啊，换了个模拟软件一跑，坏了，不对。
+接着就在洞洞板上做实验，果然，效果不对，压降那叫一个大。
+最后这样改方案，画了第三块板后，终于实现了这一电路。果然实践才是检验真理的唯一途径，三个月从零搞出这么个东西，其实没啥，但是过程确实有趣。
+就这样，边学边试，软件和硬件都验证完了，过程充满松香味。
+不过可惜的是，半年后的八月，我换了 AMD 迷你主机，UPS 设计供电已经不满足新主机的要求，项目搁置了。
+电路的理论论证和各部分的功能验证板已经实现了，外壳也已经设计好了，但是还是没继续往下走，因为当时工作上发生了一些变动，就没余力折腾了。
+之后又开始折腾屏幕氛围灯，挺有趣的，不过还没做完，目前一周也就花几小时在边学边弄。
+
+我能想着开始折腾电子电路，还是因为国产单片机的崛起。
+乐鑫公司的 ESP32 系列单片机真的是物美价廉，白嫖嘉立创的 PCB 也非常的香。
+学习成本就低了很多，想想去年我入手的树莓派 4B。当时也有考虑折腾物联网，但是一个三四百，也只适合当个上位机干活了。
+而现在用着 ESP32 模组和开发板，烧了也不心疼，嘿嘿。
+
+嵌入式开发是一个陌生的领域，C 语言是一个上古的高级语言，而天天写着现代高级语言的我，一时之间回不到大一时写 C 语言的感觉，
+所以用了一段 C 语言做嵌入式开发后，我看上了 C++。或许是 C++ 没看上我，编译器报错我是一个也看不懂，所以我想起了 Rust。
+Rust 比着“耶”向我招手，我大意了，就进了这个跟大的坑。
+
+Rust 语言确实费脑子，因为开发过程中将会被编译器一直教育，非常地严谨。还记得我被引用变量的生命周期教育得死去活来，被结构体没有实现 `Copy`、 `Send`、`Sync` 折磨得痛不欲生。
+其实本来没这么复杂的，可是我却拿着嵌入式开发和 Rust 一起学，难度不能说陡增吧，只能说是经常看不到明天的太阳。
+不过我还是磨出来了 UPS 的程序，还行，能用。之后开发屏幕氛围灯就滚回去用 C 语言写了，还别说，嵌入式开发我也学出了点感觉，写起来可亲切了。
+因为示例多、论坛上的开发者主要也是用 C 写，资料很充足，也没有那群还在 0.0.x 版本的 Rust 库，感觉代码好写多了……
+但是我贼心不死，拿着 Rust 转眼就配着 Tauri 开始开发氛围灯的上位机程序。
+不知是没有了 rust-embedded 系的折磨，还是我懂得了 Rust 的脾气，开发得比较顺利，很舒服。
+
+嵌入式的世界非常的美妙，将虚幻的软件借着硬件能更真实地让我们触碰到。
+看好 IoT，这是极客们的方向，也是科技改变生活的方向。
+
+## 元宇宙
+
+年中因为业务调整，我的工作和元宇宙搭上了边。年中出去嗨皮了一周后，回来就开始学习 Unity 3D。
+不得不说，国内疫情防控挺好的，走了好几个城市，回来也没阳，哈哈。
+跑题了，不得不说，Unity 3D 作为入门 3D 游戏开发确实挺合适的，虽然我们当时本想着用 Unity 开发元宇宙项目。
+正当我在庆幸我还没把 C Sharp 忘光光时，又被要求换成了现在正在使用的 Three.js 作为引擎，也就回到了 Web 领域。
+接下来的半年，我和我的同事们便开始踩坑之旅。
+
+因为是全新的领域，我和我的同事经历了 Unity 3D、Lingo 3D、r3f 这三个阶段，踩了许多的坑。
+不知为什么，他们似乎对游戏开发好像并不觉得是全新的世界，极其低估了所需的知识储备。
+现在回头看，每次的技术选型其实都不合理。
+Lingo 3D 作为刚出现的框架，并没有经过市场的检验，也并没有基于该框架商业项目，使用这个框架和二开这个框架并没有什么区别。反对无力，作罢。
+当我向 Lingo 3D 提了一个 PR 后，同事就抛弃了 Lingo 3D，转向 r3f + BVH 碰撞检测。
+而接下来，继续遇到了大量的性能问题。
+
+从项目开发的第一周起，我就有一个 3D 场景渲染性能优化的任务挂着。
+不过滑稽的是我的开发任务基本上在 WebRTC 相关部分和后端，而前端游戏场景渲染这部分并不是我开发的……
+虽然处于尴尬的位置，优化是没处优化了，但是问题还是能另起项目去发现和验证。
+我断断续续地折腾这事，现在回头看看，其实得出的结论挺正确的，但是当时没人懂也没人信，我也是半验证半猜测，没想到正确率还行。
+
+- 游戏开发确实很考验建模师的素质，调优后的模型性能直接翻倍；
+- 模型拆分、复用、LOD 是真的有明显的性能提升；
+- 内存瓶颈是存在的，降低内存占用量能够让程序更稳定
+
+虽然我对元宇宙没啥兴趣，不过可视化这方向是很有价值的。
+看好元宇宙的风口，也看好可视化的前景。
+
+## 自建服务
+
+八月换了新的迷你主机作为服务器，依然使用移动平台的 CPU，性能和功耗还可以。
+比之前的机子性能好太多了，当然，满载时也学会芜湖起飞了。
+我也多部署了几个服务。
+
+### RSS 阅读器
+
+现在信息茧房问题挺严重的，所以使用 Miniflux 自建了 RSS 阅读器。目前搜寻了一些个人博客、小众资讯站作为资讯源，感觉挺好的，没有乱七八糟的内容，很舒适。
+
+### 标签打印机和短网址服务
+
+另外，买了一个标签打印机，配合短网址服务 Kutt，给我买的一堆电子元件做分类打标签。标签上带了个二维码，里面存了描述元件信息文件的超链接地址。
+
+### 日志分析服务
+
+最后，因为部署了太多服务，自建服务又容易挂，所以跑了 Grafana + loki 用作日志分析服务。再配合在云服务器上部署的 Kuma 服务健康监控服务，目前服务状况了然于胸。
+
+我还购入了国内的 NAT VPS，做内网穿透和 SD-WAN，比使用境外服务器快太多啦，还稳定。
+公司网络不太稳定，直接组网性能经常断线；
+使用 VPN 拨入 NAT VPS 后，再由 NAT VPS 与家里组网，就没在掉过线。
+现在从公网访问我的自建服务是由从境外服务器反向代理的，延迟比较大。
+目前域名重新备案，希望能套上国内 CDN，这样再由 NAT VPS 反向代理应该能改善国内访问速度。
+
+## 开发容器与远程开发
+
+那么，我为什么要组网呢，更大原因还是我想进行远程开发。
+我在公司使用的是毕业时买的 MacBook Pro 2018 款，性能其实还不错，但是跑测试用例还是有些慢。
+而且我今年也拥抱了 Dev Container 的开发方式，开发容器能很好地解决开发环境搭建问题。
+再配合上数据库迁移脚本和数据生成工具，能极大地解决前后端开发时出现的数据污染问题。
+可谓是 2022 年我最正确的选择了，哈哈哈哈。
+这个选择是有代价的，那就是每开发一个项目都是有自己的持久化、缓存和应用组件，比较消耗硬件资源。
+这不就换了个迷你主机嘛，AMD yes!
+因为在家里，所以就搞起了远程开发，家里网络质量也比较好，拉依赖什么的速度和稳定性比在公司高出了不少，这也极大地改善了我的开发体验。
+要说这远程开发有啥不好的，那就是怕家里突然断网断电，那就有可能痛失劳动成果了。
+
+开发容器是个不错的东西，今年看很多开源项目都用上了开发容器，也有很多开源项目还没用上。
+但很明显，这是未来。我今年在开源社区也算是小小地冒了个泡，无论项目是否有开发容器的配置，我都会拉完项目后在开发容器运行，不用担心弄乱我的电脑，也不用担心环境冲突。
+而且最重要的，是不用那么担心去年的项目今年怎么也跑不起来。这感觉，经历过的都懂。
+最后，洁癖万岁~
+
+比较可惜，VS Code 的 Web 版本还不能支持开发容器，要是支持了，在 iPad 上快乐生产是多么值得的一件事呐。
+
+## 未来可期
+
+以上是我在 2022 年的经历，有些是我的计划，有些是命运的安排。贴近底层、满足兴趣，让我接触了嵌入式开发，意外的变动让我接触了 3D 游戏开发；心心念念的 Rust 终于安排上了，为了修自建的服务而改起了好几个 Go 语言项目。回顾过往，我已经摸了好多好多门编程语言了，也换了好多口味的编程风格，也大概摸清了自己向往的方向和风格。希望能够继续用着 TypeScript 和 Rust，快乐地写着后端，玩着前端，搞着偏后端的全栈开发，在 Arch Linux 上维护着服务。我可见不得 Java 和 PHP，希望依旧再也不见。对，还有 Python，我和你不熟，可别过来。

data/blog/vscode-online.md

@@ -0,0 +1,7 @@
+---
+title: 使用 code-server 自部署 Web 版 VS Code
+date: '2022-12-24'
+tags: ['Develop', 'VS Code', 'Self Hosted']
+draft: true
+summary: 心心念念的在浏览器中写代码，iPad 终于有希望回归生产力了。
+---

next.config.js

@@ -1,6 +1,7 @@
 const withBundleAnalyzer = require('@next/bundle-analyzer')({
   enabled: process.env.ANALYZE === 'true',
-})
+});
+const withExportImages = require('next-export-optimize-images');
 
 // You might need to insert additional domains in script-src if you are using external services
 const ContentSecurityPolicy = `
@@ -12,7 +13,7 @@ const ContentSecurityPolicy = `
   connect-src *;
   font-src 'self' comment.ivanli.cc localhost:8080;
   frame-src giscus.app
-`
+`;
 
 const securityHeaders = [
   // https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP
@@ -50,57 +51,60 @@ const securityHeaders = [
     key: 'Permissions-Policy',
     value: 'camera=(), microphone=(), geolocation=()',
   },
-]
+];
 
 /**
  * @type {import('next/dist/next-server/server/config').NextConfig}
  **/
-module.exports = withBundleAnalyzer({
-  reactStrictMode: true,
-  pageExtensions: ['ts', 'tsx', 'js', 'jsx', 'md', 'mdx'],
-  eslint: {
-    dirs: ['pages', 'components', 'lib', 'layouts', 'scripts'],
-  },
-  images: {
-    domains: ['pan.ivanli.cc', 'i.creativecommons.org'],
-  },
-  async headers() {
-    return [
-      {
-        source: '/(.*)',
-        headers: securityHeaders,
-      },
-    ]
-  },
-  webpack: (config, { dev, isServer }) => {
-    config.module.rules.push({
-      test: /\.(png|jpe?g|gif|mp4)$/i,
-      use: [
+module.exports = withExportImages(
+  withBundleAnalyzer({
+    reactStrictMode: true,
+    pageExtensions: ['ts', 'tsx', 'js', 'jsx', 'md', 'mdx'],
+    eslint: {
+      dirs: ['pages', 'components', 'lib', 'layouts', 'scripts'],
+    },
+    images: {
+      domains: ['pan.ivanli.cc', 'i.creativecommons.org'],
+    },
+    async headers() {
+      return [
         {
-          loader: 'file-loader',
-          options: {
-            publicPath: '/_next',
-            name: 'static/media/[name].[hash].[ext]',
-          },
+          source: '/(.*)',
+          headers: securityHeaders,
         },
-      ],
-    })
+      ];
+    },
+    webpack: (config, { dev, isServer }) => {
+      config.module.rules.push({
+        test: /\.(png|jpe?g|gif|mp4)$/i,
+        use: [
+          {
+            loader: 'file-loader',
+            options: {
+              publicPath: '/_next',
+              name: 'static/media/[name].[hash].[ext]',
+            },
+          },
+        ],
+      });
 
-    config.module.rules.push({
-      test: /\.svg$/,
-      use: ['@svgr/webpack'],
-    })
+      config.module.rules.push({
+        test: /\.svg$/,
+        use: ['@svgr/webpack'],
+      });
 
-    if (!dev && !isServer) {
-      // Replace React with Preact only in client production build
-      Object.assign(config.resolve.alias, {
-        'react/jsx-runtime.js': 'preact/compat/jsx-runtime',
-        react: 'preact/compat',
-        'react-dom/test-utils': 'preact/test-utils',
-        'react-dom': 'preact/compat',
-      })
-    }
+      if (!dev && !isServer) {
+        // Replace React with Preact only in client production build
+        Object.assign(config.resolve.alias, {
+          'react/jsx-runtime.js': 'preact/compat/jsx-runtime',
+          react: 'preact/compat',
+          'react-dom/test-utils': 'preact/test-utils',
+          'react-dom': 'preact/compat',
+        });
+      }
 
-    return config
-  },
-})
+      return config;
+    },
+    trailingSlash: true,
+  })
+);

package.json

@@ -6,6 +6,7 @@
     "start": "cross-env SOCKET=true node ./scripts/next-remote-watch.js ./data",
     "dev": "next dev",
     "build": "next build && node ./scripts/generate-sitemap",
+    "export": "next export && next-export-optimize-images",
     "serve": "next start",
     "analyze": "cross-env ANALYZE=true next build",
     "lint": "next lint --fix --dir pages --dir components --dir lib --dir layouts --dir scripts",
@@ -66,6 +67,7 @@
     "husky": "^6.0.0",
     "inquirer": "^8.1.1",
     "lint-staged": "^11.0.0",
+    "next-export-optimize-images": "^2.0.0",
     "next-remote-watch": "^1.0.0",
     "prettier": "^2.5.1",
     "prettier-plugin-tailwindcss": "^0.1.4",