Skip to main content

lailai's Home

Summary

lailai 个人网站采用 Docusaurus，使用树状文档整理算法竞赛知识、学习笔记与项目，也保留博客内容。项目页回顾平台与域名的选择，提供仓库和 Agent 维护入口，并保留基于 Docusaurus v3.8 的历史搭建教程，演示 TypeScript 项目的创建、启动、预览与 GitHub Pages 部署。网站内部规则负责内容格式和工程约束，个人风格通过外部 lailai-skill 引用。末尾列出相关插件与个人网站示例。

前言​

从小学开始，我就想拥有一个属于自己的个人网站。曾经我使用过 CSDN 和 博客园 等现成的博客平台，但自由度低、功能受限，而且经常有广告，始终无法满足我的需求。

2023 年暑假，我尝试了 WordPress 和 Hexo 等博客框架，花了很多时间研究如何建站，但整体效果始终不够满意。主要是因为我在学习算法竞赛（OI）的过程中，需要整理很多知识点和模板，而传统博客的时间线结构不方便检索与归档，相比之下我更喜欢文档式的树状结构，而且也没有特别喜欢的主题。

2024 年 3 月，我发现了由 Meta (Facebook) 开发的静态网站生成器 Docusaurus，它简洁美观、易于使用、扩展性强。

域名我也纠结了很久。其实我在 2021 年 5 月 25 日就注册了 lailai0916.com，但总觉得有点长，一直想要 lailai.com。可惜这个域名是美国「莱莱食府」餐厅的官网，我想花几百美元买下来，但中介说对方已经拒绝过 1 万美元了。后来我又考虑过 lailai.one、lailai.top、lailai.cc、lailai.io、lailai.ai、lailai.me 等，最后在 2024 年 10 月 16 日选定并注册了 lailai.one。

2024 年 10 月，我开始动手搭建网站，但 Docusaurus 在国内互联网比较冷门，相关的资料和教程并不多，而且在此之前我没有系统学习过 HTML、CSS 和 JavaScript 语言，凭借 C++ 和 Python 等语言的基础和 AI 的帮助，在建站的过程中逐渐掌握了一些前端基本语法。

此外，Material for MkDocs 和 VitePress 也是不错的选择，例如 OI Wiki 就是基于前者搭建的。

项目仓库​

lailai0916lailai0916.github.io

维护​

维护本站从仓库的 AGENTS.md 开始，再读取待修改路径对应的内部规则。

本站维护 frontmatter、MDX 组件、内容分类、多语言和工程约束。跨项目的个人表达与代码风格由 lailai.skill 提供，专用任务也通过它选择对应流程；网站不嵌入 Skill 副本或子模块。

搭建教程​

本教程写于 2025 年 1 月，演示版本为 Docusaurus v3.8，演示环境为 macOS Sequoia 15.5 系统的 MacBook Pro (M3 Max)。

安装​

安装 Docusaurus 时有两个选择：JavaScript 和 TypeScript。

推荐使用 TypeScript，因为它是 JavaScript 的严格超集，提供了更多功能。

创建​

打开终端并运行此命令，它将创建一个包含脚手架文件的新目录。你可以将 my-website 修改为任意名称。

60 Bbash
npx create-docusaurus@latest my-website classic --typescript
626 Bbash
lailai@lailais-MacBook-Pro GitHub % npx create-docusaurus@latest my-website classic --typescript
[INFO] Creating new Docusaurus project...
[INFO] Installing dependencies with npm...
[SUCCESS] Created my-website.
[INFO] Inside that directory, you can run several commands:

  `npm start`
    Starts the development server.

  `npm run build`
    Bundles your website into static files for production.

  `npm run serve`
    Serves the built website locally.

  `npm run deploy`
    Publishes the website to GitHub pages.

We recommend that you begin by typing:

  `cd my-website`
  `npm start`

Happy building awesome websites!

启动​

等待创建完成后，切换到项目目录，并启动本地服务器。

23 Bbash
cd my-website
npm start
309 Bbash
lailai@lailais-MacBook-Pro GitHub % cd my-website
npm start

> my-website@0.0.0 start
> docusaurus start

[INFO] Starting the development server...
[SUCCESS] Docusaurus website is running at: http://localhost:3000/

✔ Client
  Compiled successfully in 471.56ms

client (webpack 5.99.9) compiled successfully

预览​

等待一段时间，会自动打开浏览器 http://localhost:3000 本地地址。

此时你能看到 Docusaurus 网站的默认页面。

http://localhost:3000

结构​

部署​

  • 确保你已经安装了 Git，并且在 GitHub 上创建了一个新的仓库。
  • 在本地项目根目录下运行以下命令，将项目推送到 GitHub 仓库：
157 Bbash
git init
git add .
git commit -m "Initial commit"
git branch -M main
git remote add origin https://github.com/username/my-website.git
git push -u origin main
  • 在 docusaurus.config.ts 文件中，配置 url 和 baseUrl：
133 Bts
export default {
  // ...existing code...
  url: 'https://username.github.io',
  baseUrl: '/my-website/',
  // ...existing code...
};
  • 安装 gh-pages 依赖：
31 Bbash
npm install --save-dev gh-pages
  • 在 package.json 文件中，添加部署脚本：
71 Bjson
"scripts": {
  // ...existing code...
  "deploy": "docusaurus deploy"
}
  • 运行以下命令，部署到 GitHub Pages：
14 Bbash
npm run deploy
  • 部署完成后，可以通过 https://username.github.io/my-website/ 访问你的网站。

插件​

在配置文件 docusaurus.config.ts 中，plugins 部分列出了所有插件及其设置。

  • 📦 plugin-ideal-image：生成响应式、懒加载及低像素占位图的图像插件。
  • 📦 plugin-client-redirects：在客户端生成页面重定向。
  • 📦 plugin-pwa：创建支持离线模式和应用安装的 PWA 文档站点。如果你的浏览器支持，可以把网站当作应用安装。
  • 📦 remark-plugin-npm2yarn：将 Markdown 中标记为 bash npm2yarn 的代码块中的 npm 命令转换为 Docusaurus 选项卡形式，展示多种包管理工具（如 npm、yarn、pnpm 等）的等效命令。

网站推荐​

这是一些我认为比较优秀的个人网站，可供参考。