一、Docsify 和 GitHub Pages 简介

Docsify 是一个在 GitHub Pages 上搭建文档网站的工具，可以将 Markdown 文件转换为一个动态的、可搜索的文档网站。GitHub Pages 是一个免费的静态网页托管服务，能够将 GitHub 仓库中的静态文件直接转换为网站。结合使用 Docsify 和 GitHub Pages，我们可以方便地创建和托管自己的文档网站。

二、配置 GitHub Pages

1. 创建 GitHub 仓库
在 GitHub 上创建一个新的仓库，仓库名以 "username.github.io" 的格式命名，其中的 "username" 是你的 GitHub 用户名。

2. 克隆仓库到本地
打开终端，执行以下命令：

git clone https://github.com/username/username.github.io.git
Bash

注意将上面的 "username" 替换为你的 GitHub 用户名。

3. 进入仓库目录，创建 index.html 文件

cd username.github.io
touch index.html
Bash

这里使用了命令行操作，也可以通过图形界面创建 index.html 文件。

三、使用 Docsify 创建文档网站

1. 安装 Docsify
打开终端，进入仓库目录，执行以下命令：

npm init -y
npm install docsify-cli -g
Bash

这里使用了 npm 来安装 Docsify。

2. 初始化文档网站
在仓库目录中执行以下命令来初始化文档网站：

docsify init ./docs
Bash

会生成一个 docs 文件夹来存放 Markdown 文件和配置。

3. 编写文档
在 docs 目录中编写 Markdown 格式的文档文件，可以按照自己的需要进行组织和分类。

4. 预览文档网站
在仓库目录中执行以下命令来预览文档网站：

docsify serve docs
Bash

会在本地启动一个服务器，在浏览器中访问 http://localhost:3000 即可预览文档网站。

四、部署到 GitHub Pages

1. 修改 GitHub Pages 配置
打开仓库中的 index.html 文件，将其修改为以下内容：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsify@4.11.4/dist/themes/vue.css">
</head>
<body>
  <div id="app"></div>
  <script>
    window.$docsify = {
      loadSidebar: true,
      maxLevel: 4
    }
  </script>
  <script src="https://cdn.jsdelivr.net/npm/docsify@4.11.4/dist/docsify.min.js"></script>
</body>
</html>
HTML

这里使用了 CDN 链接来引入 Docsify 的 CSS 和 JS 文件。

2. 提交代码到 GitHub 仓库
在仓库目录中执行以下命令来提交代码：

git add .
git commit -m "Initial commit"
git push origin master
Bash

将代码提交到 GitHub 仓库。

3. 访问文档网站
在浏览器中访问 http://username.github.io（将 "username" 替换为你的 GitHub 用户名），即可看到部署好的文档网站。

通过以上的步骤，我们可以利用 Docsify 和 GitHub Pages 快速地创建和部署一个文档网站。