记录如何制作个人网站

采用 mkdocs 搭建个人网站

!!! note "本文适用于 Windows 系统的 wsl2 环境" 使用了 vscode 编辑器，并安装了 remote-ssh 插件，可以远程连接到 wsl2 环境进行操作。 你需要学会如何使用 Github 进行版本控制，以及如何使用 Markdown 进行文档编写。

安装工具链

pip install mkdocs-material
pip install mkdocs
pip install mkdocs-heti-plugin
pip install mkdocs-statistics-plugin

部署网站

1. 在 Github 创建一个仓库，命名为 yourusername.github.io，其中 yourusername 是你的 Github 账号。
2. 克隆仓库到本地：

git clone https://github.com/yourusername/yourusername.github.io

1. 进入仓库目录：

cd yourusername.github.io

1. 初始化 mkdocs：

mkdocs new .

1. 配置 mkdocs.yml： 最简单的配置：

site_name: 你想给网页取的名字
site_url: https://yourusername.github.io/
theme:
  name: material

1. GitHub action 自动部署： 在仓库根目录下创建一个 .github/workflows/ci.yml 文件，内容如下：

name: ci
on:
  push:
    branches:
      - main
  pull_request:
    branches:
      - main

permissions:
  contents: write

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-python@v4
        with:
          python-version: 3.x
      - run: echo "cache_id=$(date --utc '+%V')" >> $GITHUB_ENV
      - uses: actions/cache@v3
        with:
          key: mkdocs-material-${{ env.cache_id }}
          path: .cache
          restore-keys: |
            mkdocs-material-
      - run: pip install -r requirements.txt
      - run: pip install mkdocs-material
      - run: mkdocs gh-deploy --force

1. 本地预览网站：

mkdocs build
mkdocs serve

1. 上传网站

2. 线上部署 在仓库的 Setting->Pages 页面，选择 gh-pages /root，点击 save，保存。 检查 action 状态，等待部署完成。

3. 访问网站：https://yourusername.github.io/