使用MkDocs制作博客并通过nginx部署至腾讯云服务器

之前在互联网公司实习期间，跟着一起实习的师兄学习用MkDocs搭建了个人博客，并购买了域名，部署到了腾讯云服务器上。直到现在，每月的服务器续费累计下来也是一大笔支出了，在消费降级的形势下，我决定开始从下个月停止续费，因此本文记录一下使用MkDocs制作博客并通过nginx部署至腾讯云服务器的整体流程，以作纪念。

1.准备工作

购买云服务器的最初原因有三点：一是看到师兄自己搭建的博客网站很好看，里面记录了他在技术上的学习历程，也想像他一样开始写博客；二是秋招找工作时可以把博客网址放在简历上作为简历的加分点；三是配置下环境练练手。总之计算机人的DNA动了，就开始购买云服务器。

1.1 云服务器购买

云服务器比较知名的厂商有阿里云、华为云、腾讯云等，据师兄的使用体验来说腾讯云的性价比较高，相同配置的服务器价格相对较低。因为只是入门使用，所以我也没经过详细对比就直接选择了腾讯云的轻量应用服务器。它有4种应用创建方式：可以使用应用模板快速搭建；可以基于操作系统镜像自行配置；还可以使用容器镜像和自定义镜像。为了配置更个性化，我选择了基于操作系统镜像的Debian系统。

在服务器所在地域上，我选了中国香港。现在看来是涨价了，我之前购买时是32元/月。

1.2 域名购买

因为是做博客，网址要有个好记的域名，我又买了我姓名全拼的.com域名，当时也是年少无知不晓得赚钱辛苦，一口气买了10年，痛失690大洋。查询并购买域名的界面如下图所示。

1.3 防火墙端口开放

在服务器的详情界面可以设置防火墙开放的端口，HTTP和HTTPS端口开放后，我还开了8000端口用于配置trajon-go（配置安装可参考官方教程）。

2. MkDocs安装及编写

下面进入博客搭建的重头戏，编写相关文档并用MkDocs转成静态网站。

2.1 MkDocs安装

MkDocs基于Python环境，Anaconda配置Python环境教程很多，在此不再赘述。在Linux已有Python环境下，只需pip install mkdocs即可。安装后可以用mkdocs --version查看是否安装成功。

使用命令mkdocs new blog，就可以创建一个blog文件夹，下面有一个docs文件夹和mkdocs.yaml配置文件。我们需要在docs文件夹下编写markdown文件，在mkdocs.yaml中配置网站样式，就可以使用mkdocs serve运行网站了，使用mkdocs build部署网站后docs文件夹下的文件会被编译映射到site文件夹。我编写的MkDocs博客结构如下图所示，docs文件夹下分了ai、algorithms、database、network、operating-system、security共6个专栏，static文件夹下面放置博客所引用的图片。

2.2 文件编写

具体到其中的文件上，我们进一步看下markdown文档和yaml配置文件的内容。

2.2.1 markdown文档

每篇博客对应的markdown文档类似下图所示，主要用到分级标题、图片、加粗等格式的语法，这些和标准的markdown文档格式是一样的，CSDN的markdown文本编辑器也是如此。

此外，博客首页index.md的内容如下，我选了一张梵高的画《普罗旺斯的农舍》作为博客首页，设置了移动端访问自动缩放，手机访问是另一张图片瓦西里·康定斯基的《天蓝色》（类似的油画图片可以在麦田艺术网站下载）。

# Welcome

<style>
    @media screen and (min-width: 1000px) {
    	body {
	    background-image:url(/static/img/farmhouse.png);
	    background-size: 100% 100%;
	}
    }
    @media screen and (max-width: 1000px) {
        body {
            background-image: url(/static/img/blue-sky.png);
            background-size: 100% 100%;
        }
    }

    html, body {margin: 0; height: 100%; overflow: hidden}

    .md-tabs,
    .md-header {
        background: transparent;
        color: #fff;
        text-shadow: -2px 0 5px #2f4f4f, 0 2px 5px #2f4f4f, 2px 0 5px #2f4f4f, 0 -2px 5px #2f4f4f;
    }

    [data-md-color-primary=white] .md-tabs {
        border-bottom: 0px;
    }

    [data-md-color-primary=black] .md-tabs {
        border-bottom: 0px;
    }

    [data-md-color-primary=black] .md-header {
        background: transparent;
    }

    [data-md-color-primary=black] .md-tabs {
        background: transparent;
    }

    .md-content,
    .md-typeset h1,
    .md-footer,
    .side-toolbar {
        visibility: hidden;
    }

    @media screen and (min-width: 1000px) {

        .md-sidebar {
            visibility: hidden;
        }
    } 
</style>

2.2.2 yaml配置文件

yaml配置文件主要是配置导航条、MkDocs主题、markdown扩展等格式，如下所示。

site_name: Funny's Blog # 站点名
site_url: https://www.example.com/
copyright: Copyright &copy; 2020-2021 <a href="https://www.example.com">Funny's Blog</a> &#183; <a href="https://creativecommons.org/licenses/by-nc/4.0/">CC BY-NC 4.0</a>

nav:
  - "&#9733;":
    - index.md
  - "Algorithms":
    - algorithms/max-subarray.md
    - algorithms/strassen.md
    - algorithms/randomize-in-place.md
    - algorithms/majority.md
    - algorithms/priority-queue.md
    - algorithms/linear-select-kth.md
    - algorithms/lcs.md
    - algorithms/knapsack.md
    - algorithms/optimal-tree.md
    - algorithms/water.md
    - algorithms/fibonacc-heap.md
    - algorithms/bellman-ford.md
    - algorithms/dijkstra.md
    - algorithms/ford-fulkerson.md
  - "Operating System":
    - operating-system/shell.md
  - "Network":
    - network/introduction.md
    - network/physical-layer.md
    - network/datalink-layer.md
    - network/network-layer.md
    - network/transport-layer.md
    - network/application-layer.md
  - "Database":
    - database/pg.md
  - "Security":
    - security/des.md
    - security/orcon.md
    - security/digital-certificates.md
    - security/android-permission.md
    - security/egcd.md
    - security/eratosthenes.md
    - security/legendre.md
    - security/miller-rabin.md
  - "Artificial Intelligence":
    - ai/knowledge-graph.md

theme:
  name: material
  # custom_dir: overrides
  language: zh
  logo: /static/img/logo.png
  favicon: /static/img/logo.png
  font:
    text: Alegreya # Josefin Sans, Merriweather, Karla, Domine, Poppins <https://www.oberlo.com/blog/google-fonts>
  palette:
    scheme: default
    primary: white
    # accent: red
  features:
    - navigation.tabs # 顶级章节在标题下面的菜单层中呈现
markdown_extensions:
  - meta # metadata
  - toc:
      # permalink: "&#9839;" # 在每个标题的末尾生成永久链接
      slugify: !!python/name:pymdownx.slugs.uslugify_cased
  - admonition # 警告框
  - pymdownx.details # 允许可折叠的警告框
  - pymdownx.superfences # 允许将代码和其他元素嵌套在警告框内
  - attr_list # 它允许向 Markdown 元素添加 HTML 属性和 CSS 类
  - pymdownx.highlight:
      linenums: true # 代码显示行号
  - pymdownx.tabbed: # 选项卡log.
      alternate_style: true
  - footnotes # 脚注
  - pymdownx.betterem: # 粗体 斜体
      smart_enable: all
  - def_list # 定义列表
  - pymdownx.tasklist:
      custom_checkbox: true # 美化任务列表
  - pymdownx.arithmatex:
      generic: true
extra_javascript:
  # 公式支持必要的文件
  # - https://polyfill.io/v3/polyfill.min.js?features=es6
  - https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js
plugins: []

2.3 运行

使用mkdocs serve运行网站后，网站默认被部署在8000端口，可以使用服务器ip:8000查看网站了。网站首页如下图所示：

博客页面如下图所示：

3. nginx安装部署

nginx核心配置文件如下，通过ssl证书实现https访问，里面还包含了trajon-go的代理设置。

server {
    listen 80;
    listen 1234;
    server_name example.com www.example.com;
    return 301 https://www.example.com$request_uri;
}

server {
    listen 443 ssl http2;
    server_name example.com;

    ssl_certificate /etc/nginx/ssl/example.com/cert.pem;
    ssl_certificate_key /etc/nginx/ssl/example.com/key.pem;
    return 301 https://www.example.com$request_uri;
}

server {
    listen 443 ssl http2;
    server_name www.example.com;

    ssl_certificate /etc/nginx/ssl/example.com/cert.pem;
    ssl_certificate_key /etc/nginx/ssl/example.com/key.pem;

    location / { 
        proxy_pass http://127.0.0.1:8002; 
    } 
    location /hello { 
        proxy_pass http://127.0.0.1:8001; 
    }
}

以上就是通过MkDocs制作博客的过程啦，后续我会把其中有分享价值的博客陆续放到CSDN上，欢迎关注。