用Mkdocs搭建个人网站

1 所需环境¶

1) 一台电脑

常用设备，用于安装Mkdocs，本地编写博客、文档，方便保存文件。

1) Github账号

备份代码，同时构建Github Pages.

3) 一台服务器（可选）

进行网站部署。

2 搭建思路¶

本网站的搭建方式分为三步：

1) 通过Mkdocs在本地构建静态网站

2) Github Pages部署网站：静态网站上传到Github，并构建Github Pages

3) 服务器部署网站：在服务器上拉取Github资源实现部署（可选）

如果没有服务器，只需要实现 1)和 2)即可实现网站的部署。不过这种方法部署的网站在Github（外网）上，国内访问不稳定。如果有服务器实现 3)部署，网站的访问质量会稳定很多。

下面按照上面三步顺序进行说明。

3 通过Mkdocs构建静态网站¶

3.1 基本Python环境配置¶

3.1.1 本地电脑安装Mkdocs¶

Mkdocs的安装需要Python环境，本文默认已经拥有了Python环境。

安装Mkdocs的Python包：

CMD

pip install mkdocs

3.1.2 选择并安装一个主题¶

Mkdocs内置了一些主题，也支持很多外部主题，各类主题的说明和安装可以详见官方指南。

本文推荐使用Material主题，安装指令：

CMD

pip install mkdocs-material

3.2 构建Mkdocs网站根目录¶

3.3 完成Mkdocs的一些基本设置¶

3.3.1 生成文件说明¶

3.3.2 `mkdocs.yaml`文件配置¶

mkdocs.yaml，docs

3.4 生成网站¶

1) 实时查看网站

mkdocs serve

2) 生成静态网站文件

mkdocs buile

4 Github Pages部署网站¶

4.1 新建Github仓库¶

5 配置服务器¶

5.1 先拥有一台服务器¶

配置服务器的前提是先拥有一台服务器。很多平台都提供服务器的租赁服务，比如华为云、阿里云等。如何白嫖一些服务器、参与一些优惠活动可以在各类视频网站搜索，会有很多人分享最新的优惠活动。

用于个人博客的服务器配置不需要太好，根据个人经验，只要满足以下条件就非常够用了：

CPU内核数 \(\geqslant\) 1
内存 \(\geqslant\) 2G
存储空间 \(\geqslant\) 30G

本文使用阿里云300元学生抵押金购买服务器，在校大学生每年可以白嫖一次，可以兑换6个月的轻量应用服务器，官网链接直达。

5.2 在服务器上安装宝塔¶

宝塔是一款方便配置站点环境的集成面板工具，对于不熟悉网站相关操作的新手来说比较友好。本文使用宝塔来配置服务器上所需要的相关环境。

官网说明：https://www.bt.cn/new/download.html

Linux安装指令如下：

Bash

if [ -f /usr/bin/curl ];then curl -sSO https://download.bt.cn/install/install_panel.sh;else wget -O install_panel.sh https://download.bt.cn/install/install_panel.sh;fi;bash install_panel.sh ed8484bec

5.3 在宝塔面板配置服务器环境¶

5.4 将生成的文件上传服务器¶

生成的文件都在site文件夹内，接下来把文件夹的所有文件上传至/www/wwwroot/[webname]/文件夹内即可。

这里为了方便，直接通过宝塔上传。其他方案，比如Terminus或者VSCode通过SSH连接上服务器上传也可以，目的是将文件上传。

6 实用小功能¶

以上就是搭建一个网站的所有内容了，到此就已经结束了。

本节内容是我在搭建网站时的一些常用小功能，做一个记录和分享。

6.1 创建一个「下载页面」¶

功能说明

「下载页面」能够列出一个文件夹内所有的文件，点击即可下载对应文件。该页面可以作为一个简易云盘使用。

假设在网站目录中创建了一个download文件夹，即URL为域名/download，则设置如下

宝塔面板设置

在宝塔面板中，进入「网站 -> 设置 -> 配置文件」，在server内添加以下代码：

Python

# download自动识别文件
location /download/ {
autoindex on;
autoindex_exact_size off;
autoindex_localtime on;
charset utf-8;
}

保存设置，在该文件夹中放入文件，即可自动生成下载清单，如下图所示。

7 参考资料¹ ² ³ ⁴ ⁵¶

尝试修改 mkdocs-material 网页的字体的过程记录 —— Ranald Luo ↩
mkdocs material 超全配置 —— wnc的咖啡馆 ↩
Material for Mkdocs: Setup —— Material官方教程 ↩
Google Font —— Google ↩
Github Pages快速入门 —— Github官方文档 ↩