起因

经过近三年的运行，我逐渐搞清楚了自己对于个人站点的需求，之前搭建的网站也用着越来越不顺手，导致我写文章的积极性都大幅度降低了（有没有可能只是单纯因为你懒◔.̮◔✧）。正好之前好友贱卖给我的云服务器还有一年才到期，遂想着将博客升级成动态博客，改造一番，也好用的更加趁手些。

经过仔细思考后，我发现之前的网站在功能上有如下不足：

1. 由于是静态博客，扩展起来需要过多的折腾。随着年龄的增长，事情越来越多，我没有太多的时间放在网站的搭建、维护上，想开箱即用、维护成本低。这样，我就可以把省下来的时间用在内容创作上。
2. 文章都是CS相关的，我还想分享一些和生活相关的内容，例如读的书，看的电影，玩的游戏。如果直接和CS的文章混在一起，会显得特别乱，我想能很明显的区分它们。
3. 有时候我只是想分享记录一些当下的感受，并不需要长篇大论，如果此时发篇文章会让文章库变得臃肿、杂乱，充满很多点开看就几句话或一小段的文章，但如果不做任何记录，它便消失在时间的长河里了。

针对以上问题，我选择使用WordPress搭建框架，具体原因如下：

1. 使用这个框架的人多，使用过程中遇到的问题，大概率能在网上查到解决方案，不用在建站、debug上花费过多的时间。
2. 插件、主题的生态丰富，想添加功能较容易。

经过

部署WordPress

在WordPress的安装上，我并不是直接将它装在我的服务器上，因为服务器里各种东西装多了，有可能相互干扰，带来很多潜在的风险，所以我决定把它装在docker中。

在具体的做法上，我参考了Running WordPress on Docker: The Definitive Guide这篇文章。他将WordPress在docker中的wp-content文件夹映射到了本地的文件夹，便于进行主题和插件的管理（如果主题和插件更新后或者新装的插件出了问题，可以通过Git回滚到上一个版本）。但美中不足的是，他没有对数据库进行有效的容灾备份。WordPress中，安装的插件和主题都存放在wp-content文件夹下，其他的用户信息、配置信息都在数据库中，因此，只要我们有数据库和wp-content文件夹，即使服务器被黑了，我们也可以在很短的时间内恢复。

自动备份

通过上面的分析，我们需要备份数据库和wp-content文件夹，wp-content文件夹可以通过Git备份到Github中，那数据库怎么备份呢？我是通过crontab设置一个定时任务，每天定时将数据库中的数据导出成sql文件，再将导出的sql文件通过rclone自动同步到坚果云，实现异地备份。rclone的安装和配置就不在这里赘述了，网上已经有很多相关的内容了。这里附上我写的备份的shell脚本：

#!/bin/bash

backup_folder="/home/user1/backup_files/"

if [ ! -d "$backup_folder" ]
    mkdir $backup_folder
fi

# backup wordpress blog
docker exec containner_name /usr/bin/mysqldump -u user_name --password=your_password --no-tablespaces db_name > ${backup_folder}wpblog-$(date "+%Y%m%d-%H%M").sql

# upload to jianguoyun
rclone copy ${backup_folder} jgy:backup

如果你想使用的话，需要把backup_folder换成自己本地的路径，脚本会把导出的sql文件存到这个目录下。同时，需要将container_name换成你WordPress所在容器的名字，user_name换成你MySQL的用户名，password换成你MySQL的密码，db_name换成你数据库的名称。最后，你需要将jgy换成你在rclone中配置的名字。配置crontab时记得用root用户的身份，否则脚本运行时会提醒权限不够，具体配置定时任务的方法在通过crontab设置一个定时任务里都很详细的介绍啦。

自动更新

经常听到有人问，WordPress安全吗？答案是既安全也不安全，一般来说，最新版的WordPress是安全的，而没有及时更新的WordPress往往容易被攻击。因此，及时更新，保持WordPress处于最新版是极其重要的。

和自动备份类似，我也是通过crontab设置定时任务，运行更新脚本实现的。这样服务器就会在夜里的时候自动拉取最新的WordPress镜像进行更新。更新的脚本如下：

#!/bin/bash
docker_compose_dir="/your/own/path"
cd $docker_compose_dir
docker compose pull
docker compose down
docker compose up -d

使用时需将docker_compose_dir中的路径换成docker-compose.yml文件所在的目录名。

安装&定制化Argon主题

在为我的WordPress选择主题时，偶然发现了苯苯的博客，又顺藤摸瓜发现了鸦鸦的博客，他们采用的都是Argon主题。经过我仔细了解后，发现符合我在起因里提到的需求，同时，两位大佬也将主题的配置经过详细记录了下来，便于别人参考，因此，我决定使用Argon主题，在主题的配置上，也参考了两位大佬的配置，配置的过程两位大佬的博客写的都很详细，大家可以按需挑选，我就不在这里赘述了，仅在这里附上我的配置文件。

Argon主题选项中的页头脚本：

<!-- 添加LXGW WenKai Screen字体 -->
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/lxgw-wenkai-screen-webfont/1.6.0/style.min.css" />

额外CSS：

/* 隐藏左侧menu的搜索框 */
.leftbar-menu {
    display: none;
    margin-top: 10px;
    margin-left: 0;
    margin-right: 0;
    padding: 0;
}
.leftbar-search-button {
    display: none;
    padding-top: 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0, 1);
}
.leftbar-banner {
    border-radius: var(--card-radius) var(--card-radius) var(--card-radius) var(--card-radius);
}

/* 白天卡片背景透明 */
.card{
    background-color:rgba(255, 255, 255, 0.8) !important;
    /*backdrop-filter:blur(6px);*//*毛玻璃效果主要属性*/
    -webkit-backdrop-filter:blur(6px);
}
/*夜间卡片透明*/
html.darkmode.bg-white,html.darkmode .card,html.darkmode #footer{
    background:rgba(66, 66, 66, 0.9) !important;
}
html.darkmode #fabtn_blog_settings_popup{
    background:rgba(66, 66, 66, 0.95) !important;
}
/*分类卡片透明*/
.bg-gradient-secondary{
    background:rgba(255, 255, 255, 0) !important;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter:blur(10px);
}
/*小工具栏背景完全透明*/
/*小工具栏是card的子元素，如果用同一个透明度会叠加变色，故改为完全透明*/
.card .widget,.darkmode .card .widget,#post_content > div > div > div.argon-timeline-card.card.bg-gradient-secondary.archive-timeline-title{
    background-color:#ffffff00 !important;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
}
.emotion-keyboard,#fabtn_blog_settings_popup{
    background-color:rgba(255, 255, 255, 0.95) !important;
}
/*分类卡片文本居中*/
#content > div.page-information-card-container > div > div{
    text-align:center;
}

/*更改字体*/
body {
  font-family: "LXGW WenKai Screen", sans-serif;
}

.navbar-nav .nav-link {
    font-family: "LXGW WenKai Screen", sans-serif;
}

/*正文字体大小（不包含代码）*/
.post-content p{
    font-size: 1.25rem;
}
li{
    font-size: 1.2rem;
}

Argon主题选项中的页脚内容：

<div>Copyright © 2020-2023 SXJ</div>
<span id="momk"></span><span id="momk" style="color: #ff0000;"></span>
<div>Theme <a href="https://github.com/solstice23/argon-theme" target="_blank">Argon</a> Powered by <a href="https://wordpress.org" target="_blank">WordPress</a></div>

<style>
/* 让id为footer的标签的所有子标签中的最后一个div不显示*/
#footer > div:nth-last-child(1) {display:none}
</style>

<script type="text/javascript">
    function NewDate(str) {
        str = str.split('-');
        var date = new Date();
        date.setUTCFullYear(str[0], str[1] - 1, str[2]);
        date.setUTCHours(0, 0, 0, 0);
        return date;
    }
    function momxc() {
        var birthDay =NewDate("2020-03-01");
        var today=new Date();
        var timeold=today.getTime()-birthDay.getTime();
        var sectimeold=timeold/1000
        var secondsold=Math.floor(sectimeold);
        var msPerDay=24*60*60*1000; var e_daysold=timeold/msPerDay;
        var daysold=Math.floor(e_daysold);
        var e_hrsold=(daysold-e_daysold)*-24;
        var hrsold=Math.floor(e_hrsold);
        var e_minsold=(hrsold-e_hrsold)*-60;
        var minsold=Math.floor((hrsold-e_hrsold)*-60); var seconds=Math.floor((minsold-e_minsold)*-60).toString();
        document.getElementById("momk").innerHTML = "本站已安全运行："+daysold+"天"+hrsold+"小时"+minsold+"分"+seconds+"秒<br>";
        setTimeout(momxc, 1000);
    }momxc();
</script>

参考资料

1. Running WordPress on Docker: The Definitive Guide
2. Docker系列 WordPress系列 特效
3. Argon 主题修改记录