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

起因

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

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

  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 主题修改记录
暂无评论

发送评论 编辑评论


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