博客迁移记:从Hexo到WordPress
本文最后更新于 462 天前,如遇到任何问题欢迎在评论区留言呀!

起因

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

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

  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 主题修改记录

评论

  1. 1年前
    2023-4-02 9:53:23

    使用docker的话,备份还是建议duplicati。另外,wordpress更新可以在wordpress后台自动进行,似乎不需要专门更新docker镜像。

    • 博主
      Bensz
      11月前
      2023-5-17 10:22:27

      抱歉,最近比较忙┭┮﹏┭┮ 备份的话,我是觉得如果这个任务本身比较简单(只是保存一个文件),我更偏向于写个bash脚本,装额外的软件比较“重”,不过如果涉及很多软件的备份,确实用专门的软件统一管理会更好一些。
      wordpress是装在containner中的,我印象中,containner创建后就没法改变了,想改变必须销毁重建。所以我采用的是每天定时拉取新的image,销毁原有的containner,用新的镜像重新创建containner。关于wordpress的更新,我看官方文档里是这样解释的:

      The default configuration for this image matches the official WordPress defaults in which automatic updates are enabled (so the initial install comes from the image, but after that it becomes self-managing within the /var/www/html/ data volume).

      他的意思好像是说,wordpress的更新是通过更新 /var/www/html/ 中的文件来实现的,如果是这样的话,那确实应该不需要重新拉取新的image。但是不同版本的image间应该还是有区别的,所以我觉得重新拉取image会更稳妥一些,欢迎更多的讨论呀!o( ̄▽ ̄)ブ

      • SXJ
        11月前
        2023-5-17 10:24:08

        您说的对,镜像一般是要更新的

        • 博主
          Bensz
          11月前
          2023-5-17 10:26:46

          别用您😂,不然感觉好生分呀!有空我也去你的博客逛逛,最近实在事情太多了,基本没怎么维护博客

          • SXJ
            11月前
            2023-5-17 17:08:31

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇