跳到主要内容

lailai's Home

我的个人网站项目和搭建教程。

说明​

我以前使用 CSDN 和 博客园 等现成的博客平台，但自由度低、功能受限，而且经常有广告，无法满足我的需求。

2023 年暑假，我尝试了 WordPress 和 Hexo 等博客框架，但整体效果始终不够满意。主要原因是，我在学习算法竞赛的过程中，需要整理知识点和模板。而传统博客的时间线结构不方便检索与归档；相比之下，我更偏好文档式的树状结构。

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

我从 2024 年 10 月正式开始搭建，但 Docusaurus 在国内互联网比较冷门，相关的资料和教程并不多，我花费了不少时间研究。在此之前，我没有系统学习过 HTML、CSS 和 JavaScript，但凭借 C++ 和 Python 等语言的基础，在搭建网站的过程中逐渐掌握了它们的基本语法。

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

项目仓库​

lailai0916
/
lailai0916.github.io
Description not set
0
0
no-license

待办事项​

[TODO]

  • 添加主页「lailai」拖动交互效果
  • 添加文章描述
  • 添加文章 AI 总结
  • 优化响应式布局
  • 优化无障碍功能
  • 优化国际化支持
  • 优化网站资源性能
  • 添加 Status 页面
  • 添加 Analytics 页面
  • 添加 React 图片展示组件

提示词​

通用
1. 使用简体中文回复内容。
2. 语言简洁、自然、专业。
3. 翻译准确、通顺、优美。
4. 设计统一、简约、现代。
初始化
这是我的个人网站源代码，请先简单熟悉。
代码优化
请检查 XX 页面中 XX 组件，参考最佳实践，优化冗余或不规范代码，确保结构简洁、规范、高效。
设计优化
我的个人网站在视觉风格和布局样式上缺乏统一。请根据我的设计理念优化代码，增强页面的一致性与现代感。
随机检查
请检查我的个人网站中的任意内容（包括文章、笔记、题解、项目等），从逻辑、排版、语言和表述等方面，指出 10 个明显错误，无需修改。
修改检查
请仔细检查你的修改是否有误，如果给出的代码有 bug，我将抽打我手里的这只小猫。
记忆导出
帮我把一个 AI 助理中的上下文导入到另一个 AI 助理。你的任务是回顾我们过往的对话，总结你对我的了解。

在输出中，请避免使用第一人称代词（我、我的）和第二人称代词（你、你的）。请改用“用户”或使用中性词语来指代你了解到的个人。

尽可能保留用户的原话，尤其是指令和偏好方面的内容。

类别（按此顺序输出）：
1. 人口统计信息：常用名字、职业、教育程度和常住地。
2. 兴趣和偏好：持续积极的投入（不只是拥有某个物品或单次购买）。
3. 关系：已确认的长期关系。
4. 标注日期的事件、项目和计划：近期重要活动的记录。
5. 指令：我明确要求你今后遵循的规则，包括“必须做到的事项”“绝对禁止的事项”以及行为纠正。仅包含存储的记忆中的规则，不包含对话中的规则。

格式：
根据上述类别将内容分为带标签的部分。尽量引用我在提示中输入过的原话，以此作为每个条目的证据。按照以下格式构建每个条目：
用户的名字是<name>。
- 证据：用户说“叫我<name>”。日期：[YYYY-MM-DD]。

输出：
- 将最终输出摘要的格式设为文本块。

搭建教程​

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

安装​

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

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

创建​

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

npx create-docusaurus@latest my-website classic --typescript
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!

启动​

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

cd my-website
npm start
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 仓库：
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.js 文件中，配置 url 和 baseUrl：
module.exports = {
  // ...existing code...
  url: 'https://username.github.io',
  baseUrl: '/my-website/',
  // ...existing code...
};
  • 安装 gh-pages 依赖：
npm install --save-dev gh-pages
  • 在 package.json 文件中，添加部署脚本：
"scripts": {
  // ...existing code...
  "deploy": "docusaurus deploy"
}
  • 运行以下命令，部署到 GitHub Pages：
npm run deploy
  • 部署完成后，可以通过 https://username.github.io/my-website/ 访问你的网站。

插件​

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

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

网站推荐​

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