code-server、docker-compose安装wordpress+mysql、wordpress公式插件、markdown插件、目录插件、调序插件、统计插件、分享点赞打赏插件_codeserver

缘起

过去上课总要抱着沉重的笔记本，早就有用pad彻底取代笔记本的冲动了。单纯的幻灯片演示、多媒体播放，pad完全可以胜任。要是碰上需要进行代码演示的课程，单靠pad就无法胜任。通过“pad+云端”的模式，这些问题都可迎刃而解。
于是配置了一台服务器，安装code-server，并通过pad浏览器访问code-server进行代码演示。code-server如果仅通过服务器的IP地址访问，是很不安全的，需要配置ssl建立可信连接，而这又进一步要求通过域名来访问服务器。
一不做二不休，把域名也申请起来。有了域名，有了服务器，何不再搭个站点，顺手的事。之前一直在CSDN码字，总感觉像在租来的房子里生活，有了自己的服务器和站点，以后就可以搬回家住。

内容提要：

• Linux服务器安装code-server，配置反向代理和ssl连接
• 利用docker-compose安装wordpress+mysql
• wordpress插件配置：markdown、toc、latex、文章排序、打印、数据统计、打赏、社交分享、点赞

先睹为快，由于code-server仅限个人使用，只给如下截图，可以看到一个运行在浏览器中的vscode。
个人站点deepbodhi.club。

一、code-server

1.1 code-server简介

Github上对code-server的介绍如下：

• Code on any device with a consistent development environment
• Use cloud servers to speed up tests, compilations, downloads, and more
• Preserve battery life when you’re on the go; all intensive tasks run on your server

由此可见，code-server正是为pad而生，利用pad作为I/O终端，让负载都运行在云端服务器上，真正实现云开发。
当然了，在code-server推出之前，微软已经为vscode推出了remote-ssh插件，利用本地计算机的vscode连接远程服务器的项目目录，并自动在远程服务器上安装vscode server，本地vscode充当了远程服务器的GUI。这种玩法我曾在几年前写过一篇介绍文章，其很适合生产环境下的调试。
而通过浏览器访问code-server则更纯粹，连本地的vscode都不需要，特别适合用pad进行轻量开发演示的情况。同时由于运行在浏览器中，很多功能也是无法实现的，比如没有终端，无法调试等，因此也只能作为轻量开发演示使用。

1.2 code-server安装和启动

code-server是开源的，其源码可以在Github下载，也可以在国内Gitee镜像高速下载。其release发行版需要到Github上下载最新的，Gitee上没有托管其发行版。下载时需要根据自己的服务器架构类型和操作系统类型进行选择。我的是Intel/AMD64架构、Ubuntu操作系统，因此选择code-server-4.1.0-linux-amd64免安装版本下载。除此之外，还有arm架构的版本，也有MacOS版本的，也有Linux下可直接安装的版本，Debain和Ubuntu使用deb安装包，RedHad和CentOS使用rpm安装包。
由于服务器上没有多线程下载工具，可在本地计算机上用迅雷下载免安装版压缩包，并通过scp命令上传到服务器指定目录，scp命令的用法我也曾介绍过，这里简介如下：

scp 压缩包名称 root@远程服务器IP:/root/code-server/
1

scp命令的前提是我们需要在服务器上安装启动SSH服务端，在本地计算机上安装SSH客户端，且服务器上防火墙对应端口要打开，默认是22。
压缩包上传到服务器后，通过ssh连接到远程服务器，并解压：

tar -xzvf file.tar.gz
1

解压后得到一个文件夹，其中bin目录下code-server文件则是我们需要运行的启动脚本。我们可以在解压得到的文件夹之外新建一个shell脚本文件start.sh，内容如下：

export PASSWORD='yourpassword'
nohup ./bin/bin/code-server --port 1234 --host 0.0.0.0 --auth password &
1
2

直接运行该脚本就可在1234端口启动一个code-server服务器，别忘了服务器防火墙要放行该端口。
这段脚本命令中，nohup表示服务不随终端的关闭而关闭，–host 0.0.0.0表示接受任意IP发起的连接，&表示后台运行。
这样就配置好code-server了，可通过浏览器以非安全连接方式进行访问。

1.3 code-server安全配置

由于通过浏览器远程连接code-server后可以获得很高的权限，因此有必要为code-server配置反向代理和ssl连接。这也是官方文档推荐的最佳实践。
根据官方文档指导，我们可以通过nginx进行反向代理来提示code-server的安全性。

1.3.1 域名申请和备案

首先，为了进行ssl连接，我们需要一个域名，只无论你的域名是在国内还是国外申请的，只要域名指向国内服务器IP（A记录域名），这种域名都需要到网管局备案，一般在你所租赁服务器的云服务商处都提供了免费的备案代理服务，域名审核大概需要半个月左右。

1.3.2 nginx安装、ssl配置、反向代理配置

apt update
apt install -y nginx certbot python3-certbot-nginx
1
2

这里一共安装了nginx、certbot和python3-certbot-nginx三个软件，后两个是用来生成ssl连接所需要的非对称密钥的。
nginx的端口配置文件在/etc/nginx/sites-enabled/*中，我们一般在/etc/nginx/sites-available/目录下新建配置文件，并到sites-enabled目录下去建立一个指向sites-available下配置文件的软连接。这样做的目的是：当需要停用某个配置文件时，无需删除其原始文件，只需删除sites-enabled目录下的软连接即可。
因此，我们到sites-available目录下新建一个code-server文件（文件名任意，最好有意义，不要后缀）：

server {
    listen 80;
    listen [::]:80;
    server_name mydomain.com;

    location / {
      proxy_pass http://localhost:8080/;
      proxy_set_header Host $host;
      proxy_set_header Upgrade $http_upgrade;
      proxy_set_header Connection upgrade;
      proxy_set_header Accept-Encoding gzip;
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13

激活配置：

sudo ln -s /etc/nginx/sites-available/code-server /etc/nginx/sites-enabled/code-server
sudo certbot --non-interactive --redirect --agree-tos --nginx -d mydomain.com -m me@example.com
1
2

注意，这里的mydomain.com都要用你申请到的域名替代，me@example.com也要用你的邮箱替代。
最后不要忘记在服务器上将code-server的8080端口屏蔽，使得外网只能通过nginx暴露的80端口反向代理访问code-server。
配置完成后我们就可以通过https://mydomain.com安全访问code-server了。

二、wordpress站点搭建

wordpress是个人建站的不二之选，它有非常丰富的插件、主题供选择。

2.1 docker-compose介绍

自从docker问世后，很多微服务都可通过容器进行安装部署。wordpress是php开源CMS系统，依赖于apache服务器和mysql数据库，为了不污染服务器环境，使用镜像安装wordpress和mysql是最优选择。
我曾在一篇博客中介绍过docker、docker镜像打包和docker集群部署。docker部署还可以通过docker-compose脚本进行。其优势是方便统一管理相关的容器，便于修改配置，最重要的一点是可以很方便的进行跨容器网络访问。
首先，我们需要安装docker和docker-compose，docker的安装请参考前文给出的博客链接。docker-compose可以通过pip安装，也可以通过apt安装，我选择后者。
安装好后，我们需要新建一个docker-compose.yml文件，通过docker-compose命令执行该文件。

2.2 docker-compose.yml文件结构

docker-compose.yml文件的结构如下：

version: '3.3'
services:
  db:
     image: mysql:5.7
     container_name: "wordpress_mysql"
     volumes:
       - /root/wordpress/db:/var/lib/mysql
     restart: always
     environment:
       MYSQL_ROOT_PASSWORD: yourpassword1
       MYSQL_DATABASE: wordpress
       MYSQL_USER: username
       MYSQL_PASSWORD: yourpassword2
  wordpress:
     depends_on:
       - db
     image: wordpress:latest
     container_name: "wordpress"
     ports:
       - "8000:80"
     restart: always
     environment:
       WORDPRESS_DB_HOST: db
       WORDPRESS_DB_USER: username
       WORDPRESS_DB_PASSWORD: yourpassword2
       WORDPRESS_DB_NAME: wordpress
     volumes:
       - /root/wordpress/wp-content:/var/www/html/wp-content
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

2.2.1 volumes配置目录挂载

我们在这个脚本中启动了两个容器db和wordpress，每个容器的volumes字段是用来指定目录挂载的，将容器内的工作目录挂载到宿主服务器上，从而便于数据备份和迁移。

2.2.2 服务内跨容器网络访问

db容器没有指定端口映射，因此通过宿主机网络无法访问到容器db中的mysql，但在docker-compose启动的一个服务中，各容器可以通过容器别名来访问其它容器内部的网络。所以在wordpress容器中，通过指定WORDPRESS_DB_HOST为db（mysql的默认端口可以省略不写），即可完成跨容器互访。

2.2.3 端口映射

wordpress容器中进行了端口映射，ports字段将宿主机的8000端口映射给wordpress容器的80端口。

2.3 docker-compose启动、关闭、删除服务

为了启动yml脚本所描述的服务，我们首先要切换到yml脚本所在的目录下，启动服务的命令是docker-compose up -d，-d表示是后台运行，docker-compose默认加载的脚本文件就是docker-compose.yml，如果脚本不是这个名字，则需要用-f xxx.yml指明脚本文件。
服务启动后可通过docker-compose ps查看已启动的服务，加-a参数可查看已经关停的服务。
通过docker-compose stop可关停服务，通过docker-compose start可再次启动。
通过docker-compose down可删除服务并移出所有容器和网络。移出容器并不会移出镜像，因此第一次启动服务时会消耗带宽拉取镜像，以后删除后再重启服务，都不再消耗带宽，修改配置重启非常方便。

我们启动服务后，就可以通过8000端口访问wordpress站点了，记得配置服务器防火墙，开放8000端口（也可以通过配置nginx反向代理，由nginx统一路由服务器的内部服务）。

三、wordpress插件配置

既然想用wordpress替代CSDN的博客，那必须要具备数学公式渲染能力、markdown解析能力、自动目录功能等等，最好还能灵活配置一些CSDN不具备的功能，比如按内容逻辑对文章进行排序，而不是根据发文的先后顺序。打印功能也很重要，CSDN页面打印出来，除了主内容，还有边栏的很多无用信息。wordpress最好能直接打印出具备论文效果的页面。而这一切需求，都可以通过配置和修改插件实现。

3.1 markdown和公式解析

3.1.1 插件功能

尝试了wordpress插件市场上几乎所有markdown和latex插件，综合评定效果最好的是WP HyperMD插件。该插件可同时渲染markdown和latex公式。渲染latex公式时可以配置通过KaTex还是MathJax引擎，经过本人测试，发现MathJax的效果稍好，且其出现的bug容易克服，而KaTex引擎存在的bug更多。

3.1.2 转义bug处理方法

MathJax引擎的bug是：latex公式中的\\分行会被提前转义，因此需要用\\\\来表示公式分行。这个瑕疵可以接受，我们一般是通过vscode+mpe在本地撰写文章，因此通过vscode的查找替换功能，将所有\\一键替换成\\\\再整体粘贴到wordpress中就可以了。

3.1.3 CDN修改

MathJax的另一个问题是其所部署的CDN服务器在国外，加载速度有时候很慢，导致公式渲染不出来。由于WP HyperMD插件没有提供修改MathJax CDN的设置功能，因此需要手工修改WP HyperMD的源代码。

（一）将Gitee Pages用作CDN

首先通过检查网页源码，找到MathJax所使用的版本为2.7.9，我们到GitHub下载对应版本的release文件，压缩包不到35MB。解压后上传到国内gitee托管平台上，由于gitee平台具有Gitee Pages服务，可以将上传到Gitee的文件作为静态页面对外提供访问，因此可以将js文件托管到此处，作为一个免费的CDN使用。

（二）修改WP HyperMD插件源代码

HyperMD插件的源代码结构如下图所示，我们需要修改的是其中的MathJax.php文件，MathJax.js正是在该文件中加载的。

如下图红线部分即是MathJax.js文件的CDN地址，将其换为我们托管在Gitee Pages上 MathJax.js文件即可。

值得注意的是，如下这段CDN地址中，config部分不可或缺，其指明了MathJax渲染公式的方式。

//xxx.gitee.io/mathjax/MathJax.js?config=TeX-AMS-MML_HTMLorMML
1

3.2 目录插件

wordpress上较好的目录插件是LuckyWP Table of Contents，其支持丰富的样式配置，也支持自动生成目录。

下图为目录效果，可以配置深度、位置、背景色、前景色、链接悬停色等等，很丰富。

3.3 调整文章顺序

一般的公共博客很少有支持自定义文章顺序的，一般都是按文章发表顺序罗列。然而我更希望按内容的逻辑顺序来排列，往往逻辑顺序和发表顺序是呈倒序关系。
wordpress调整文章顺序的插件为Post Types Order。如下图所示，可以在文章列表中用鼠标直接拖动排序，非常方便。排序后的结果会体现在最近文章、归档、分类等，所有与文章顺序有关的显示都能按照重排后的顺序显示。

3.4 打印

wordpress页面打印功能很强大，一般不需要再安装插件就能自动按照主题模板设定的打印内容进行打印。比如我选择的一款最简单的主题模板Dan，在使用浏览器自带打印功能时，渲染得到的打印页面接近论文版式。

从上图可看出，对页面打印时，自动将页面右侧栏取消了，只保留了文章的内容部分，对于技术类博客，打印出来直接就可用作讲义。

3.5 数据统计

在CSDN上，数据统计仅限于文章访问量、关注、收藏、点赞、评论量。在wordpress上可以通过WP Statistics插件定制更详细的数据统计信息，包括访问者IP、所在地区、来自搜索引擎的引用等，且支持定期以邮件的形式发送统计报告。

3.6 社交分享、点赞、微海报、打赏

这是国人开发的一款插件，集合了微信扫码分享、QQ扫码分享、微博分享、微海报二维码生成、点赞和微信支付宝收款打赏的功能，非常实用。
该插件在wordpress插件市场无法找到，需要到其源码托管网站下载后自行安装。安装方法也很简单，将下载得到的插件文件夹上传到服务器上wordpress的plugins目录下，再到wordpress后台管理中启动插件即可，启动插件后可对插件进行一些配置，比如：

• 按钮的位置，可以在文章最下方，也可竖列最左侧
• 按钮的颜色，以适配主题的颜色
• 收款码图片，包括微信和支付宝
• 微海报模板选择

如上图最左侧是竖列形式的分享按钮，可随页面滚动而滚动。点击打赏按钮，可出现收款码。

点击微海报，可生成带二维码和题图的微海报供下载分享。微信、QQ、微博扫码分享功能也很方便。

至此，一个功能上可媲美CSDN博客，且更灵活可控的个人站点就搭建完毕了。