终端风格主页

起因是我的朋友 LittleFaith 有一个终端风格的个人主页，我觉得很有趣。但是自己也没工夫从头写了，就到 github 上淘一淘，发现也有不少人对终端风主页感冒。我就选了一个我比较喜欢，star 数比较多的仓库（Cveinnt/LiveTerm）开始加工了。和之前一样，这个项目算是一个前端项目，不太复杂，而且用的是 Next.js，就当是入门一点 React 好了。整个项目本来改一下配置文件就能有不错的效果了，~~所以也没有太大的工作量~~。

资源准备

终端 banner 生成：

https://manytools.org/hacker-tools/ascii-banner/

网页 favicon 生成：

技术栈

在原仓库的基础上

将框架从 next12 升级到了 next15。

环境配置

next.js 的配置文件如下：

ts
import type { NextConfig } from "next";

// for github action
const isGithubAction = process.env.GITHUB_ACTIONS === "true";
const isProd = process.env.NODE_ENV === 'production';
let basePath = "";

if (isGithubAction) {
  // 去掉 `<owner>/`
  const repo = process.env.GITHUB_REPOSITORY!.replace(/.*?\//, '');
  basePath = `/${repo}`
} else if (isProd) {
  basePath = '/c/acqua-term';
}


const nextConfig: NextConfig = {
  basePath: basePath,
  output: 'export',
  env: {
    BASE_PATH: basePath,
  },
  compiler: {
    removeConsole: isProd ? { exclude: ['error'] } : false,
  },
};

export default nextConfig;

变量 isProd 用于生产环境部署，变量 isGithubAction 用于 Github Action 自动部署。

通过判断部署环境，确定 basePath 子路径。env.BASE_PATH 用于提供正确的 favicon 资源路径。

output 用于设置构建静态网页。

removeConsole 配置项目用于在生产环境中去掉除 console.error 以外的控制台输出。

关于生产环境具体参见部署工作一节

迁移工作

迁移工作的主要困难在于部署路径在子路径下。

网页图标引入

网页图标放置在与 src 同级的 public 目录下，需要利用 next.js 配置中定义的 BASE_PATH 环境变量拼接出资源路径。


 <Head>
        <meta
          name="viewport"
          content="initial-scale=1.0, width=device-width"
          key="viewport"
          maximum-scale="1"
        />
        <link rel="icon" href={`${process.env.BASE_PATH || ""}/favicon.ico`} />
      </Head>

字体引入

使用 next/font 进行字体导入和优化并使用 Tailwind CSS。

tsx
import localFont from "next/font/local";

const hack = localFont({
  src: "../assets/fonts/Hack-NF.ttf",
  fallback: ["monospace"],
  variable: "--font-hack",
});

然后进行引入，使用时是 font-hack

tsx
  <div
    className={`${hack.variable} font-hack text-light-foreground dark:text-dark-foreground min-w-max text-xs md:min-w-full md:text-base`}
    onClick={onClickAnywhere}
  >
    <main className="bg-light-background dark:bg-dark-background w-full h-full p-2">
      <Component {...pageProps} inputRef={inputRef} />
    </main>
  </div>

最后，在 tailwind.config.ts 中添加 CSS 变量，定义时是 hack

ts
export default {
  ...
  theme: {
    colors: {
      transparent: 'transparent',
      current: 'currentColor',
      ...colors,
    },
    extend: {
      fontFamily: {
        'hack': ['var(--font-hack)'],
      },
    },
  },
  ...
} satisfies Config;

参考：https://nextjs.org/docs/pages/building-your-application/optimizing/fonts

部署工作

子路径部署

本站部署网页需要挂载在 /c/<webname>路径下，因此需要设定 basePath。

Github Action 自动部署

创建 .github\workflows\gh-pages.yml 文件，在 Github 上启动 Action。

yml
name: GitHub Pages

on:
  workflow_dispatch:
  push:
    branches:
      - main
permissions:
  contents: write
jobs:
  deploy:
    runs-on: ubuntu-latest
    concurrency:
      group: ${{ github.workflow }}-${{ github.ref }}
    steps:
    
      - uses: actions/checkout@v4

      - name: Setup Node
        uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: 'npm'

      - name: Install dependencies
        run: npm ci

      - name: Build
        run: |
          npm run build
          touch out/.nojekyll

      - name: Deploy
        uses: JamesIves/github-pages-deploy-action@v4
        with:
          branch: gh-pages
          folder: out
          clean: true

on 字段用于定义触发 Action 的时机，设定为推送到 main 分支时运行，workflow_dispatch 表示也可以手动触发。
使用 actions/setup-node@v4 可以自动启用 npm 的缓存，无需每次运行都重新下载（但是 npm i 还是必需的）。
使用 npm ci 替代 npm i，有更好的性能。
使用 npm run build 完成构建工作后，还需要创建 .nojekyll 文件，避免 Github Page 忽略 _next 文件夹。

此外，由于 Github Page 只能部署在 .github.io 下，除了 .github.io 仓库，其他仓库都挂载在 <username>.github.io/<reponame> 子路径下，因此在 Github Page 上部署时，需要单独指定 basePath，这也是环境配置中为 Github Action 单独设置的原因。

ts
const isGithubAction = process.env.GITHUB_ACTIONS === "true";

let basePath = "";

if (isGithubAction) {
  // 去掉 `<owner>/`
  const repo = process.env.GITHUB_REPOSITORY!.replace(/.*?\//, '');
  basePath = `/${repo}`
}

完成情况

总结

本项目和之前的 Vue 项目相比，最让我头疼的是这个资源文件的路径问题，不知道是不是因为没设置好的原因。

引入字体的时候，无法使用路径别名
引入 favicon 时，不能自动添加 basePath

这个项目后续我还想把它转为 App 路由，中间尝试了几次都失败了。希望能好好学学 React 再回来折腾一下，不过这都是后话了。