一、背景

2月4号，放着旧博客（WordPress）的Docker炸掉了，把东西搬到了备用站【2023/06/24 搬站时注：已经停止解析】，在重建的时候我就在想：这wp有点过于臃肿了，后台效率也不高，上了https之后在我这20M的小水管跑的是奇慢无比，有没有什么比较好用的轻量博客呢?而且原先的wp主题“Sakura”的作者在筹备Sakura2，暂时停了Sakura的更新，所以就有了更换博客的想法。

Sakura是一个非常好的主题，非常简洁好看，所以在新博客也想要继续使用Sakura主题，正好在翻Sakura的Github时发现了有人已经做了重构theme-react-sakura，但是这个要搭配plumemo使用。

根据plumemo的官网和Github介绍

本项目，主要宗旨在于，简单、易用、不烧脑的博客，并且基于helloblog，搭建一个属于博主们的博客圈

plumemo [plumemo]，plume（羽） + memo（备忘录）

基于SpringBoot实现零配置让系统的配置更简单，使用了Mybatis-Plus快速开发框架，在不是复杂的查询操作下，无需写sql就可以快速完成接口编写。后台管理系统使用了vue中流行的ant，另外前后交互使用了JWT作为令牌，进行权限、登录校验。。

是这么说的，既然简单、易用、不烧脑，咱就来赶紧试试吧！

二、部署plumemo

官网给了比较详细的教程,连一键脚本这样的神器都准备好了，话不多说，这就上车！

我们选择的是~~CTOS（误）~~ huaji CentOS8，安装时选择最小安装。

在我这种情况，直接安装是出各种错误，跑不起来，啊这，说好的一键呢？？？

吓得java都不冒烟了

脚本作者没有考虑全缺环境的情况，根据我的实践，各组件需要的环境如下：

1、下载脚本

没啥说的，wget，解压要tar，建议不要换源，前面我换源之后下不来tar

yum install wget tar

2、mysql

需要的是libncurses库

yum install libncurses*

3、nginx

脚本检查了对openssl-devel、pcre-devel、zlib-devel、gcc的依赖，我们自己要装的是make

yum install make

4、相关工具

为了编辑nginx的conf，我们需要vim，后面看端口情况还要net-tools

yum install vim net-tools

提前把依赖装好，我们就可以跑一键脚本了。我家是电信移动双线，跑的时候发现电信居然下不动，而移动却很快，这……~~丢人电信请您面壁去嘞~~

我为了方便管理备份数据库，选择新建了一个宝塔Docker做远程数据库，这样数据库可以方便的定时FTP备份出来（见使用FTP定时备份网站，防止服务爆炸。

用远程的mysql，要记得在宝塔里面开数据库远程访问，在本地deploy脚本或者一键脚本安装时指定远程数据库的ip地址，还要记得开放防火墙端口

firewall-cmd --zone=public --add-port=3306/tcp --permanent
firewall-cmd --reload

三、优化、功能调整

3.1 技巧

作为一个不会java、不会js、不会html，什么都不会只会摸鱼的~~five~~小白来说，咱应当充分利用大佬的成果，我们小白有两大利器：

F12！

F12！抄代码，定位脚本位置就靠它！~~你的代码真好，但是它下一秒就是我的啦~~ huaji

Ctrl+F

定位类似代码，快速照抄现学语法

准确定位位置，代码丛中寻一点绿

在服务器内的合适的文本编辑器

vim拿来写长文档简直没法用，更不能定位，真拿它写配置文件、js脚本要死人的，由于plumemo和宝塔jdk不是一个版本，所以我们没装宝塔，我选择的是Verysync（微力同步），因为我们还需要传递https证书，需要用到它的同步功能。

微力同步的安装请参见这里，建议网络不好的同学下好包传服务器上，带-l参数本地安装。

装完记得开需要用的8886端口，公网的机器记得到微力设置里面加认证

3.2 优化开始，问题就像这样一个个地轻松搞定吧

nginx

SSL

默认的文档没有SSL，我们需要上https，所以加上

#SSL-START
    #error_page 404/404.html;
    ssl_certificate    /usr/local/plumemo/https/fullchain.pem; #换成你自己的https CA文件的位置
    ssl_certificate_key    /usr/local/plumemo/https/privkey.pem; #换成你自己的https key文件的位置
    ssl_protocols TLSv1.1 TLSv1.2;
    ssl_ciphers EECDH+CHACHA20:EECDH+CHACHA20-draft:EECDH+AES128:RSA+AES128:EECDH+AES256:RSA+AES256:EECDH+3DES:RSA+3DES:!MD5;
    ssl_prefer_server_ciphers on;
    ssl_session_cache shared:SSL:10m;
    ssl_session_timeout 10m;
    add_header Strict-Transport-Security "max-age=31536000";
    error_page 497  https://$host$request_uri;
    #SSL-END

另外，后端用了1.2.0记得按照文件内的注释进行替换

#后端服务器，v1.2.0以后hello-blog-service改为plumemo-service

自动启动

一键脚本没有做自动启动，我们来做一个吧

cd
chmod +x /etc/rc.d/rc.local
vim nginx_auto_start.sh
#nginx_auto_start.sh file-start
nginx
#nginx_auto_start.sh end of this file
chmod +x nginx_auto_start
vim /etc/rc.d/rc.local
#rc.local file-start
···
···
···
#在最下面添加
/root/nginx_auto_start.sh
#rc.local end of this file

~~淦哦~，启动个nginx你写这么复杂干嘛~~

上面是我实际操作的，当时想一起启动jdk，写的sh，其实只启动nginx直接怎么写就好

chmod +x /etc/rc.d/rc.local
vim /etc/rc.d/rc.local
#rc.local file-start
···
···
···
#在最下面添加
nginx
#rc.local end of this file

碎碎念：jdk（跑博客的api）不能通过自动脚本启动，因为它要占一个shell一直运行，~~所以重启就必须手动开一次，不然服务就挂~~

index优化

位置在前端（主题）文件夹下的index.html

IE浏览器提示换核

<!-- 
IE浏览器提示换核（strat）
-->
<script type="text/javascript">
if (!!window.ActiveXObject || "ActiveXObject" in window) { //is IE?
  alert('朋友，IE浏览器未适配哦~\n如果是 360、QQ 等双核浏览器，请关闭 IE 模式！');
}
</script>
<!-- 
IE浏览器提示换核（end）
-->

Sakura背景

由于我菜的原因，切换背景我并不会做，所以只抄了个Sakura背景过来 xiaoku

<body class="home blog hfeed chinese-font sans-serif" style="background-image: url(&quot;https://cdn.jsdelivr.net/gh/spirit1431007/cdn@1.6/img/sakura.png&quot;);">

设置网页语言中文防浏览器提示、主题颜色、站点描述、标签页icon、站点标题

<html lang="zh-CN"><head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width,initial-scale=1"/>
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
    <meta name="description" content="Luckykeeper's Blog"/>
    <link rel="icon" href="/sakura_favicon.ico"/>
    <link rel="stylesheet" href="//at.alicdn.com/t/font_1569838_jvrdyorwtit.css">
    <title itemprop="name">
    LuckyBlogV2
    </title>
    <meta name="theme-color" content="#31363b">

卖萌

<!-- 
Theme by Mashiro
                      /^--^\     /^--^\     /^--^\
                      \____/     \____/     \____/
                     /      \   /      \   /      \
                    |        | |        | |        |
                     \__  __/   \__  __/   \__  __/
|^|^|^|^|^|^|^|^|^|^|^|^\ \^|^|^|^/ /^|^|^|^|^\ \^|^|^|^|^|^|^|^|^|^|^|^|
| | | | | | | | | | | | |\ \| | |/ /| | | | | | \ \ | | | | | | | | | | |
########################/ /######\ \###########/ /#######################
| | | | | | | | | | | | \/| | | | \/| | | | | |\/ | | | | | | | | | | | |
|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|

-->

在index的最前面还可以卖个小萌 huaji ，这样别人F12可以整个活

折腾js

估计可能是我前面乱搞index的原因，有很多东西后台没法调了，只能自己来了

需要修改的js在前端（主题文件夹）下 ~/static/js/main.*.js

主页上方的文字LOGO

Ctrl+F，搜索HelloBlog，会找到类似这样的代码

o.a.createElement(Qn,{style:{backgroundImage:e,height:a+"px"}},o.a.createElement(Pn,null,o.a.createElement("h1",{className:"glitch","data-text":"LuckyBlog!"},"LuckyBlog!")

替换HelloBlog的部分就好（我换的LuckyBlog!）

banner图，是没有设置特色图片文章显示的随机图片

Ctrl+F，搜索bannerList，就能找到，格式是这样的，建议本地编辑好直接传上去

bannerList:[{img:"img1_url"},{img:"img2_url"},{img:"img3_url"}]

首页展示图

是最上面文字LOGO下的随机图片

Ctrl+F，搜索return{ListImg就能找到，语法与banner图类似

文章上方的头像

每篇文章上面有作者头像

Ctrl+F，搜索className:”entry-census”在后面紧接着的地方找到

o.a.createElement("img",{src:"https://cdn.jsdelivr.net/gh/luckykeeper/LuckyBlog_RS@main/header-tou.jpg",alt:""})

加上头像地址即可

菜单

说的是下面这个哒

blog-menu

成长记录、站内导航、音乐播放器的图标是后加的

我们就以这个为例展示下小白怎么用F12+Ctrl+F大法搞定吧，so easy哦~

——————————

首先，对已有的“首页”二字使用F12大法让它现形 huaji

<li class="sc-EHOje haOjDv"><a class="nav-item" href="/"><i class="iconfont icon-fort-awesome"></i><span>首页</span></a></li>

从最上面sc-乱七八糟的东西，结合博客程序的性质，我们判断这是写在js脚本的，而js脚本基本都在~/theme/static/js/main.*.js里，所以我们去这里面找

接着，我们拿出Ctrl+F大法，上面”nav-item”应该是说是首页导航组件，我们找找看

o.a.createElement($,{className:"flex-items"},o.a.createElement(nn,null,o.a.createElement(u.b,{to:"/",className:"nav-item"},o.a.createElement("i",{className:"iconfont icon-fort-awesome"}),o.a.createElement("span",null,"\u9996\u9875")))

有类似这样的代码，稍稍分析一波

{className:"iconfont icon-fort-awesome"}

这里应该就是图标了，说是react开发，不难想出这是react的图标，去看看，果然如此，而icon-fort-awesome就是调用里面的图标

o.a.createElement("span",null,"\u9996\u9875")

有一堆\uxxxx的东西，难道是汉字？去转换看看

code-trans

果然是

——————————

分析完毕，我们来上手操作吧

,o.a.createElement(nn,null,o.a.createElement(u.b,{to:"/article/7",className:"nav-item"},o.a.createElement("i",{className:"iconfont icon-file"}),o.a.createElement("span",null,"\u6210\u957f\u8bb0\u5f55")))

这样就把成长日志添加到了菜单

它链接到了文章：~/article/7

使用的图标：icon-file

显示汉字：\u6210\u957f\u8bb0\u5f55

类似的，我们放上站内导航和音乐播放器的代码

——————————

站内导航

o.a.createElement(nn,null,o.a.createElement(u.b,{to:"/article/8",className:"nav-item"},o.a.createElement("img",{src:"https://cdn.jsdelivr.net/gh/luckykeeper/LuckyBlog_RS@main/icon/icon-navi(16x16).550ijf2d0uw0.png",alt:""}),o.a.createElement("span",null,"\u7ad9\u5185\u5bfc\u822a")))

这里演示了怎么自定义图标

"img",{src:"url",alt:"图片文字描述"}

注意图标大小为16x16

——————————

音乐播放器

o.a.createElement(nn,null,o.a.createElement("a",{href:"https://musicplayer.luckykeeper.site:44443/",target:"_blank",className:"nav-item"},o.a.createElement("img",{src:"https://cdn.jsdelivr.net/gh/luckykeeper/LuckyBlog_RS@main/icon/icon-music(24x24).5m7nn0a41us0.png",alt:""}),o.a.createElement("span",null,"")))

这里演示了跳转新建标签页的方法，自定义图标以及不加文字描述的方法

——————————

数据库

用phpAdmin改数据库

我们用数据库做这么两个事情，自定义页尾、设置文章特色图

自定义页尾

在plumemo_config表里面就可以定义页尾

设置文章特色图

plumemo_posts的封面图，本来只能用本地图，如果用CDN图就可以到这里

四、结语

~~全部设置完成，就可以愉快的上手使用啦~~

好家伙，原来

本项目，主要宗旨在于，简单、易用、不烧脑的博客

是给写博客而不是部署博客的人说的 doge doge xiaoku

不过相比WordPress，无论是简洁度、流畅度都好了太多！

LuckyBlog，由plumemo带入2.0时代！

plumemo，带LuckyBlog进入2.0时代！

一、背景

二、部署plumemo

三、优化、功能调整

3.1 技巧

F12！

Ctrl+F

在服务器内的合适的文本编辑器

3.2 优化开始，问题就像这样一个个地轻松搞定吧

nginx

SSL

自动启动

index优化

IE浏览器提示换核

Sakura背景

设置网页语言中文防浏览器提示、主题颜色、站点描述、标签页icon、站点标题

卖萌

折腾js

主页上方的文字LOGO

banner图和首页展示图

文章上方的头像

菜单

数据库

自定义页尾

设置文章特色图

四、结语