引言

最近终于闲下来一些，重新回来折腾了下阿里云之前整的服务器还有域名，主要干了几件事情：

1. 搭建个人博客：Leven’s Blog，基于 WordPress，使用 Sakurairo 主题，使用 Typora + PicGo + SMMS + github 基本实现了本地使用 Typora 优雅编辑，剩余全部上云的目标。
2. 在服务器端整了个 code-server，出门在外可以用移动端做一些小修小改。
3. 将整个网页套上了ssl，全部采用https协议。
4. 配置 CloudFlare。
5. 针对西财今年组织的金融科技建模大赛，写了一个统计选手分数的爬虫和简单的前端展示（由于系统仅显示每个选手最新一次提交得分，选手可以通过藏分获得一定收益）。

中间也是遇到了一些小坑，在这里做个记录。

---

WordPresss 搭建

开启HTTPS导致站点css样式等失效

如下图，开启了https之后，博客站点样式全部失效，由于中间没有修改任何其他设置（nginx除外，但是nginx不可能产生这样的影响），唯一可能是站点内部逻辑仍然使用http协议进行请求传输。

上网求证后发现确实如此，顺便找到了解决方案：

• 修改 /wp-includes/functions.php 文件，在 require ABSPATH . WPINC . ‘/option.php’; 代码行后增加以下代码：

add_filter('script_loader_src', 'agnostic_script_loader_src', 20,2);
function agnostic_script_loader_src(src,handle) {
  return preg_replace('/^(http|https):/', '', src);
} 

add_filter('style_loader_src', 'agnostic_style_loader_src', 20,2);
function agnostic_style_loader_src(src, handle) {
  return preg_replace('/^(http|https):/', '',src);
}

• 在 /wp-config.php 的开头加入以下代码：

$_SERVER['HTTPS'] = 'on';
define('FORCE_SSL_LOGIN', true);
define('FORCE_SSL_ADMIN', true);

到此为止关于https的设置就结束了，记得在nginx配置中和后台中修改对应的配置。如果后台中没有及时修改，可以看下面的第二点。

站点地址设置

站点设置里，WordPress地址（URL）和 站点地址（URL）都设置成域名，如果采用了https，那么必须加上https。

可以理解为，大部分情况下，两者地址都是完全相同的，除非想把两者分在不同的域名上访问。

如果因为一些笨蛋操作，使得自己无法进入后端进行管理操作了，比如由于开启了https服务，然而后台地址并没有修改，可以服务器后台进入 wordpress 目录手动添加配置（默认为/var/www/html/wp-config.php），如下：

define('WP_SITEURL', 'https://youtsite');
define('WP_HOME', 'https://yoursite');

PicGo + SMMS 与 Typora 的优雅结合

Typora 可以说是比较公认的最优雅的 Markdown 编辑器了，真正实现了所见即所得。因此博客搭建好了之后也一直想实现在本地用 Typora 编辑后直接上传到 blog 的方法。得益于 Markdown 较为简洁的语法，这个想法基本上很好实现，唯一的难点在于图片路径在本地和服务器端的统一。

图床可以很好的实现这个功能，然而一方面，在自己的服务器上部署图床比较复杂，另一方面本人购买的服务器宽带为按量计费，展示图片耗费流量且硬盘空间有限，因此使用现有的大规模图床成为了第一选择。

以往想实现这个功能都是手动保存图片上传 smms 图床（国内链接, 国外链接 ），然后将链接复制回 Typora，然而这样十分的不优雅。而 Typora 其实提供了接口，可以实现复制入剪切板的图片直接上传服务器并更改采用外链加载图片的功能。

实际部署时，发现并没有人在 Ubuntu 发行版上进行部署，因此写一下自己部署时的过程。

Step 1： 首先下载 PicGo ，Linux 用户直接下载 AppImage 版本即可，下载好后记得用 chmod 赋予 u+x 权限，之后便可以直接打开，桌面中间会出现一个小图标。当然也可以右键 AppImage 文件点击作为程序运行。

Step 2： 右键打开主窗口，图床选择SMMS，填入自己的API（在smms.app里注册登录，在自己的Profile里生成自己的API），并设置备用域名smms.app。

Step 3： 进入 Typora 设置，选择图像选项，设置配置如下，路径地址放 AppImage 的文件路径即可。注意，这个时候点击验证可能会失败，但是回主窗口实验粘贴图片，实际上是可以运行的。

Step 4： 这个时候配置基本成功了，要把文章上传到 WordPress 上，只需要全选复制粘贴，复制到知乎等其他平台也是可以的，就可以完美渲染了，唯一的缺点是不是所见即所得。

当然为了多添加一个备份，还可以把这个文件夹同步到云盘里，我这里选择了上传到了自己的 Github 隐私仓库（像在搞hexo静态博客一样，乐）。

---

Code-Server 搭建

Code-Server是微软推出的在服务器端可以直接编辑服务器端项目的服务，理论上可以实现很好的鉴权机制，之前实习的时候公司服务器禁用ssh，不用vim的同学可以用Code-Server获得近似vscode连ssh的体验。

不过对我自己来说就仅仅用于方便修改服务器端的代码，不用麻烦的开个ssh连到服务器上。

这里坑点主要是，如果用http服务进行通信，很多插件功能无法正常使用（例如Markdown预览等等），想要体验较完整的功能，必须采用https。

开启 https 服务也比较简单，如果采用子路径的方式配置（类似https://yoursite/code），只需要在nginx 里给顶级域名ssl部分监听 http://localhost:8080/ 即可，不需要为 code-server 配置 https。

例如：

server {
    listen 443;
    server_name yoursite;
    ssl_certificate /your ssl certificate path;
    ssl_certificate_key /your ssl certificate privkey path;
    location /code/ {
        proxy_pass http://localhost:8080/;
        proxy_http_version 1.1;
        proxy_set_header Upgrade http_upgrade;
        proxy_set_header Connection "Upgrade";
        proxy_set_header Hosthost;
        proxy_set_header X-Real-IP remote_addr;
        proxy_set_header X-Forwarded-Forproxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    } 
}

而如果要用子域名的方式来设置，例如 https://code.yoursite.com， 那么就需要专门为 Code-Server 配置https服务。需要到 ~/.config/code-server/ 路径下的 config 配置文件修改 cert 参数对应内容：

bind-addr: 127.0.0.1:8080
auth: password
password: yourpassword
cert: /your ssl certificate path
cert-key: /your ssl certificate privkey path

对应的 nginx 的配置中也要做相应的的修改，两者的证书路径应该设置成一样的，同时监听的地址应该改为 https://127.0.0.1:8080， 注意这里必须要使用https，因为 code-server 已经不再使用 http 通信。

上述修改完成后，code-server 也就可以实现采用https服务了。

---

给整个网站套上 SSL

阿里云提供的 ssl 服务现在开始收费了，于是寻求他法，最终打算使用 certbot，可以申请和续订Let’s Encrypt 提供的免费 SSL/TLS 证书。

由于我们使用的是阿里云的服务器，于是直接使用 Github 上开源的项目 certbot-dns-aliyun ，具体过程如下。

Step 1： 使用 Python 环境（可以选择在一个目录中创建虚拟环境来进行隔离）安装上述 certbot 和 certbot-dns-aliyun 的库：

pip install certbot certbot-nginx certbot-dns-aliyun

Step 2： 在阿里云控制台里，申请 RAM 子账号，授予 AliyunDNSFullAccess 权限，记录access_key 和 access_key_secret，在当前目录下创建并写入配置文件credentials.ini，并用chmod给600权限。

dns_aliyun_access_key=123 
dns_aliyun_access_key_secret=456

Step 3： 运行 certbot，申请证书，中间按提示输入数字即可：

certbot certonly \
--dns-aliyun-credentials /mnt/certbot/credentials.ini \
-d yoursite 

Step 4： 如果要添加子域名，先配置好nginx，然后直接运行 certbot 按操作提示即可，它也会帮你把 nginx 配置里对应的证书路径改好，不过可以再去检查一下。

---

CloudFlare配置

常规设置完了之后，要去页面规则设置cdn，我的配置和市面上大多配置如下：

这样登录和管理后台的页面就不会被缓存，但是这个时候会发现，后台发了新文章/更新了文章，页面可能不会实时更新，因此需要加个 hook。具体的，在 /wp-includes/functions.php 里面增加以下代码（转载自明月blog），实测有用：

/*当有新文章发布或者编辑更新文章的时候自动清理 CloudFlare 首页和对应文章链接缓存。*/
function mydl_clear_cloudflare_cache(post_id) {
    // 获取文章的 URLpost_url = get_permalink(post_id);
    // 获取首页的 URLhome_url = home_url('/');
    // CloudFlare API 信息
    api_key = 'your_Global API Key';email = 'your_email';
    zone_id = 'your_zone_id';
    // 要清理的 URL 列表urls = array(post_url,home_url);
    // 清理缓存的 API 请求
    response = wp_remote_post("https://api.cloudflare.com/client/v4/zones/{zone_id}/purge_cache", array(
        'method' => 'POST',
        'headers' => array(
            'X-Auth-Email' => email,
            'X-Auth-Key' =>api_key,
            'Content-Type' => 'application/json',
        ),
        'body' => json_encode(array(
            'files' => urls,
        )),
    ));
    // 检查 API 响应
    if (is_wp_error(response)) {
        error_log('CloudFlare 缓存清理无效: ' . response->get_error_message());
    } else {
        error_log('已经清理了 CloudFlare 缓存链接: ' . implode(', ',urls));
    }
}
// 钩子函数，在文章发布或更新时调用
add_action('save_post', 'mydl_clear_cloudflare_cache');

西财金科比赛爬虫

具体细节感觉不太适合在这个地方写，开一篇新文待会儿 po 个链接吧。最后效果展示：