主题修改

在2019年10月20日之前,一直在使用叶落阁的主题。之后换到了Clic的主题,期间有一系列的报错导致Clic的主题不能部署在容器中,所以重构了网站结构,特此纪念。或许当某一天用不习惯Clic的主题,这篇文章就又会更新了。

叶落阁主题

https://github.com/yelog/hexo-theme-3-hexo

叶落阁

这个Hexo的内容是放在Linux主机中的,然后用NFS文件共享同步到Windows本地。只需在Windows本地编辑,即可上传。

Hexo容器生成命令:

1
docker run -d --name my-hexo -p 80:4000 -v /Log/:/opt/hexo/ipple1986/source/_posts ipple1986/hexo

我还开启了weavescope监控,但由于端口暴露在外面,别人可以轻而易举的访问Linux主机和Docker容器,所以一般情况下选择禁用。

1
2
3
sudo curl -L git.io/scope -o /usr/local/bin/scope
sudo chmod a+x /usr/local/bin/scope
scope launch

文件传输模式

File_Move

Clic主题

https://github.com/Siricee/hexo-theme-Chic#introduction

Clic Theme

在使用Hexo这个主题时,我是将其部署在docker中,但docker中hexo的版本很低,没有办法,只好换了方式部署。

1
2
3
4
[root@~ipple1986]# hexo -v
hexo: 3.3.7
hexo-cli: 3.1.0
node: 10.16.3

文件迁移过程:

File_Move

现在是将hexo生成静态网页,然后用Nginx部署。在windows本地写博客,然后把写好的博客推送到Github上,然后在服务器端写一个脚本,每天凌晨一点半下载Github上的静态页面,然后存储到本地/usr/share/nginx/html/blog下。
这样写有两点好处

  • 一是直接访问Github托管的网站,用户速度会很慢,影响使用体验
  • 而是可以用Nginx,对访问进行监管和记录,达到学习Nginx的目的。

拉取Github静态网站的脚本:

1
2
3
4
git clone https://github.com/ArchKS/ArchKS.github.io.git blog
rm /usr/share/nginx/html/blog -rf
mv blog /usr/share/nginx/html/
nginx -s reload

定时任务:

1
2
[root@niki important]# crontab -l
30 1 * * * bash /root/important/blog.sh

Pure主题

2019年12月25日,圣诞节,换了个主题,以前用的Chic的主题不用了,换成了pure的主题,但工作原理和流程和上面的那个一样,这里就不过多赘述了。先上图纪念一下以前用的那个主题:

也打算精简一下我的博客内容了,以前是什么笔记都网上放,现在尽量放一些整理的东西。

Butterfly主题

NAsYwQ.webp

  • 可以留下自己的个性签名,当时用的是<判天地之美,析万物之理,成一家之言>
  • 可以用自己的图标,每一条blog都可以配封面
  • 整体不错,但用的时间长了,想换换口味

fun主题

2020/06/23

NAyUBD.webp

  • 比较简洁,喜欢它的时间线
  • 很直观,没有太多的动画渲染
  • 有top置顶功能

又换回了Butterfly

2020/07/11

这次也不放在阿里云的服务器上了,直接跑在Github上,境内访问会有点慢,之前放在阿里云上,虽然这样可以看到每天访问量和ip,但同步更新有点烦了。

简单说一下放在阿里云上的思路:

流程图

阿里云定时任务

1
2
$ crontab -l
*/10 * * * * python3 /data/cron_script/judge_gitee_submit_info.py &>> /data/blog.log

judge_gitee_submit_info.py脚本会判断Gitee上的仓库是否更新,如果更新则拉取仓库:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
import requests
import re
import os
import time
url="https://gitee.com/archks/web"
new_db_path='/data/db/new_gitee_db'
old_db_path="/data/db/old_gitee_db"
print(time.strftime("%Y/%m/%d %H:%M:%S"),end='\t')
def write_list_to_path(path,rlist):
with open(path,"w",encoding="utf8") as f:
for r in rlist:
f.write(str(r)+'\n')
response=requests.get(url)
html=response.text
pattern=re.compile(">Site updated: (.*?)<",re.S)
new_results=re.findall(pattern,html)
write_list_to_path(new_db_path,new_results)
old_result=[]
with open(old_db_path,"r+",encoding="utf8") as f:
for line in f:
old_result.append(list(line.strip('\n').split(',')))
old_md5=os.popen("md5sum "+old_db_path).read().split(' ')[0]
new_md5=os.popen("md5sum "+new_db_path).read().split(' ')[0]
if old_md5==new_md5:
print("Git未变更")
else:
print("\033[1;32mGit发生变更,向Old_DB中写入新日期\033[0m")
msg=os.popen("sh /data/cron_script/gitee_website.sh").read()
write_list_to_path(old_db_path,new_results)

判断是否更新的实验是通过比较旧文件和新数据的md5值,如果一样,则仓库没有更新,如果更新了,则调用gitee_website.sh 脚本,将仓库拉下来,并且进行Nginx热部署。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
[root@ cron_script]# cat gitee_website.sh 
#!/bin/bash
# nginx站点的重新拉取,web界面在gitee上
cd /root/
git clone https://gitee.com/archks/web.git html &> /dev/null
rm /usr/share/nginx/html/ -rf
mv html /usr/share/nginx/
nginx -s reload
if [ ! -d "/usr/share/nginx/html/" ];then
echo "执行失败,文件未能拉取成功"
echo "正在重新拉取文件...."
git clone https://gitee.com/archks/web.git html
rm /usr/share/nginx/html/ -rf
mv html /usr/share/nginx/

else
echo -e "\033[42;30m 网页加载完毕,Nginx已热部署 \033[0m"
fi
#如果不同时使用错误和正确重定向,就会在界面上出现百分号
curl -I http://novel.ymlog.cn &> /tmp/status
cat /tmp/status | grep HTTP
date "+%Y-%m-%d %H:%M:%S"

以后可能不会再用到这个方法了,记一下。

尝试过服务器上用WordPress,性能太低,带宽受限,用起来会很卡!

使用hugo渲染

2020/8/7

hugo_blog.webp

博客的配置文件通过这样一个脚本推送到阿里云的服务器

1
2
3
4
$ cat upload.sh
ssh root@aliv2 'rm -rf /data/hugo/content/post/* && rm -rf /data/hugo/config.toml'
scp -CrB content/post/* root@aliv2:/data/hugo/content/post/
scp -CrB config.toml root@aliv2:/data/hugo/config.toml

阿里的服务器采用hugo server实时更新状态

1
2
3
screen hugo server --baseUrl=http://novel.ymlog.cn \
--port=80 \
--bind=0.0.0.0 &

更新日志

2020/07/16

  • 完善了博客的评论系统
  • 优化了页面的图片
  • 标签采用彩色显示
  • 开启PV等访问量的记录
  • 优化了分类,暂时定为:编程、运维、报错、摘录、数据库、容器几类
2020年7月16日修改结果 2020年7月16日修改结果

2020/07/17

  • 搞定了URL乱码问题
  • 将博客接入百度和Google分析
解决Hexo的URL乱码问题

2020/07/19

最近改主题改的有点上头,该干的事都没干

  • 调整了Poetry的格式

念两句诗

西风多少恨,吹不散眉弯。

image-20200719183312332

2020/07/20

  • 修改了URL链接分享乱码问题

原来

1
http://novel.ymlog.cn/2020/07/15/Typora-Gitee%E5%9B%BE%E5%BA%8A/

现在

1
http://novel.ymlog.cn/post/687d0838.html

更新部分

1
2
3
# permalink: :year/:month/:day/:title/
alg: crc32 # 算法:crc16(default) and crc32
rep: hex # 进制:dec(default) and hex

2020/08/03

将博客迁到Gitee,bug频出;

  • Gitee仓库名需要改成用户名
  • Gitee域名无法对应,比如我在腾讯云添加blog.ymlog.cn ====CNMAE====> archks.gitee.io 的解析,但是始终不成功

Gitee博客网站

2020/08/07

分离文学类和非文学类笔记,非文学类笔记使用hugo部署(http://novel.ymlog.cn) —— 静态页面在阿里云服务器,文学类笔记使用hexo部署(http://novel.ymlog.cn) —— 静态页面在Github。

2020/08/13

突然间发现Windows的Git软件内置了很多命令,像ssh、scp、awk、sed、tar,然后就想写一个一键同步hugo博客到服务器的脚本,本来是想把整个博客打包上传的,但由于服务器端采用hugo server渲染,这样上传会导致hugo中断,并且无法起来。后来就把content/post/config.toml文件打包了,上传到服务器。

ps:建议上传前先压缩,不然scp传输文件时,一个一个传,并且每次传输都会建立tcp连接,非常慢。

Windows下的脚本:

  1. 压缩
  2. 上传文件
  3. 解压
1
2
3
4
5
6
7
8
9
10
11
echo "========================Start compress file...."
tar -zcf post.tar.gz content config.toml

echo "========================Copy File To Remote Server..."
scp -i "C:\\Users\\ym\\.ssh\\v2ali" -o "StrictHostKeyChecking=no" post.tar.gz root@huawei:/root/

echo "========================Unzip File..."
ssh -i "C:\\Users\\ym\\.ssh\\v2ali" -o "StrictHostKeyChecking=no" root@huawei 'tar -zxf /root/post.tar.gz -C /data/hugo/'

echo "========================Remove File in This Directory..."
rm -f post.tar.gz

执行效果(如果文件是一个一个传,会很慢):

1
2
3
4
5
6
$ sh upload.sh
========================Start compress file....
========================Copy File To Remote Server...
post.tar.gz 100% 42KB 446.9KB/s 00:00
========================Unzip File...
========================Remove File in This Directory...

Linux下hugo运行方式:

1
2
3
cd /data/hugo 
# screen把hugo进程放到后台运行
screen hugo server --baseURL=http://novel.ymlog.cn --port=80 --bind=0.0.0.0 &> /data/log/hugo.log &

2020/08/19

加入Cloudflare CDN缓存,腾讯云域名管理不能修改根域,可以使用:http://cdn.*bnxb*.com/ 来指定CNAME记录。

1
2
@ 		====> 	ymlog.cn.cdn.cloudflare.net.
code ====> ymlog.cn.cdn.cloudflare.net.

2020/08/20

http://novel.ymlog.cn 使用CDN+Nginx缓存,目前响应速度从原来的3~5s优化到现在的1s左右,具体情况视网络而定。

因为是在Windows主机上把文件推到服务器,所以一开始是直接采用hexo渲染,但是为了加上代理服务器缓存,把hexo换成了nginx。如果使用nginx,则不能实时更新,所以写了个脚本,当博客的source文件夹改变(包括新增、修改、删除等操作),就会执行hexo 重新生成public文件夹,实时更新。

脚本如下,当/blog/source文件夹改变时,会触发hexo生成新的public页面

Inotify的用法

https://blog.csdn.net/halazi100/article/details/46807259

https://www.cnblogs.com/sunsky303/p/8117864.html

1
2
3
4
5
6
7
8
9
10
11
12
[root@huawei ~]# cat inotify.sh 
#!/bin/bash
#yum -y install inotify-tools
src1=/data/hugo/content/
src2=/data/hugo/config.toml
/usr/bin/inotifywait -mrq --timefmt '%d/%m/%y %H:%M' --format '%T %w%f %e' -e modify,delete,create,attrib $src1 $src2 | while read line
do
echo "$line" #&>> /data/log/hugo.log
cd /data/hugo/ && hugo # &> /data/log/generate.log
done

[root@huawei ~]# screen ./inotify.sh &

下面再列一下nginx的优化:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
[root@huawei ]# cat /etc/nginx/nginx.conf
user nginx;
worker_processes auto;
pid /run/nginx.pid;
include /usr/share/nginx/modules/*.conf;

events {
worker_connections 1024;
}

http {
proxy_cache_path /blog/cache levels=1:2 keys_zone=code_cache:10m max_size=10g inactive=60m use_temp_path=off;

sendfile on;
tcp_nopush on;
keepalive_timeout 65;
types_hash_max_size 2048;

include /etc/nginx/mime.types;
default_type application/octet-stream;

include /etc/nginx/conf.d/*.conf;

server {
listen 80 default_server;
server_name ymlog.cn;
root /blog/public/;
include /etc/nginx/default.d/*.conf;
location / {
gzip on;
gzip_comp_level 5;
root /blog/public/;
proxy_cache code_cache;
proxy_cache_valid 200 304 12h;
proxy_cache_valid any 10m;
add_header Nginx-Cache "$upstream_cache_status";
proxy_set_header Host $http_host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
include params;
}
}
}

2020/08/24

花了一个多小时,将所有的封面换成了webp格式了,总体大小减少了70%

hexo整个目录同步到Google云,如果是解压到Windows下的目录进行同步,整个过程会非常慢,后来参考了这篇文章:https://valiermedia.com/first-time-syncing-with-google-drive-try-this-pro-tip/

将hexo目录打包成zip,然后再Google Driver网页端解压,这样速度会快很多(虽然依然很慢),今天打开_post文件夹一看,文件名全部乱码了,以后还是不要用这种方式了:

乱码

2020/08/28

突然用hexo g 生成html文件一堆报错,node_modules那个文件夹一堆不兼容,hexo对类似

1
http://ip:port

的写法支持很不友好,如果是加粗的就直接报错,说URL ERROR。后来用yarn又装了一遍,把上传的脚本重新改了一遍:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
# 修改时间:2020/8/25
# Description:
# 0、yarn安装node_modules模块
# 1、将本地hexo的markdown渲染成html放到public目录
# 2、打包public目录并上传到云端解压
# 3、在云端解压到/blog/public/ ——该路径是nginx的root路径
# 4、删除public、node_modules,删除7天前的备份文件
# 5、备份当前hexo目录


echo "生成node_modules"
yarn install

echo "generate public"
hexo g

echo "删除node_modules"
rm -rf ./node_modules

echo "打包public目录"
tar -zcf public.tar.gz public


# 这里我是上传到华为云的主机,在windows的hosts文件映射了ip
# 即 x.x.x.x huawei
# 在.ssh/ 目录下放置了密钥做免密登录,-i指定密钥位置

echo "上传public目录"
scp -i "C:\\Users\\ym\\.ssh\\id_rsa" -o "StrictHostKeyChecking=no" public.tar.gz root@huawei:/root/

echo "解压云端文件"
ssh -i "C:\\Users\\ym\\.ssh\\id_rsa" -o "StrictHostKeyChecking=no" root@huawei 'rm -rf /blog/public && tar -zxf /root/public.tar.gz -C /blog/'

echo "清除public目录"
rm -rf public
rm -fr public.tar.gz

echo "删除7天前的备份"
find ../backup/ -name hexo_backup_* -ctime +15 -exec rm -rf {} \;

echo "备份当前hexo目录"
tar -zcf ../backup/hexo_backup_$(date '+%Y-%m-%d').tar.gz *

2020/08/30

改了文学博客的主题,之前那个主题名为lithium,缺点是不能文章置顶,而且日期显示是类似Aug 8 2020这种 格式,不符合国人感觉,于是换成了hugo-notepadium,感觉好多了。

notepadium主题

2020/09/05

  • 将所有图片收为本地存储

  • 将图片格式都改为webp

    1
    2
    3
    4
    sed -i 's#.webp#.webp#' *
    sed -i 's#.webp#.webp#' *
    sed -i 's#.jpg#.webp#' 博客历史.md
    sed -i 's#.webp#.webp#' 博客历史.md

本地存储

之前在七牛云的图片全丢了,最近Gitee+Typora+PicGo上传图片的方式一直失败,没有找到原因,单纯的PicGo上传试了Github和Gitee,都没成功,于是便把图片都拉到本地,正好服务器nginx有web容器的功能,可以在当前root下新建一个file,然后所有文件都放到file里

1
2
mkdir -p ./public/file/
cp ./source/_posts/https://ymlog.cn/file/* ./public/file
1
2
3
4
5
6
7
8
$ pwd
/c/Users/ym/Google 云端硬盘/博客/hexo/source/_posts

# 将图片路径从https://ymlog.cn/file/ 修改到服务器
$ sed -i 's#https://ymlog.cn/file/#http://novel.ymlog.cn/file/#' *.md

# 检查还有那些路径没有修改
$ grep 'https://ymlog.cn/file/' *.md

目前的存储路径都是https://ymlog.cn/file/,如果以后换了域名,直接sed全改了就行

示例

目前博客生成状态动画演示

2020/09/29

将ymlog.cn和ymlog.cn 服务使用nginx虚拟主机合并到同一台服务器

2020/10/18

想以后专注于内容输出,于是简化了butterfly主题,让用户的注意力更容易放在内容方面,而不是网页的效果

  • 取消封面图
  • 取消top图片
  • 缩小封面height

butterfly主题修改

修改之后

这样整个网站呈现灰白色掉,注意力不会被花花绿绿的东西分散,也可以更好地集中于内容了

2020/10/25

起源于这篇帖子,再次对网站开启了优化之旅:https://www.v2ex.com/t/718205#reply27

新的知识:HTTP2(SPDY协议)和SSL优化(OCSP Stapling机制)

  • 网站开启HTTP2
  • 再次配置HTTPS,但不打算开启强制跳转了
  • GooglePage Speed Insights 从65优化到了73
  • 开启OSCP stapling
PageSpeedImg

下方代码可以检测网站是否为http2,或者直接用别人的在线工具:https://myssl.com/http2_check.html

1
2
3
4
5
6
7
8
9
10
11
12
13
(function(){
// 保证这个方法只在支持 loadTimes 的 chrome 浏览器下执行
if(window.chrome && typeof chrome.loadTimes === 'function') {
var loadTimes = window.chrome.loadTimes();
var spdy = loadTimes.wasFetchedViaSpdy;
var info = loadTimes.npnNegotiatedProtocol || loadTimes.connectionInfo;
// 就以 「h2」作为判断标识
if(spdy && /^h2/i.test(info)) {
return console.info('本站点使用了 HTTP/2');
}
}
console.warn('本站点没有使用 HTTP/2');
})();

检测OCSP Stapling是否开启:

1
2
3
4
5
6
$ openssl s_client -connect ymlog.cn:443 -servername ymlog.cn -status -tlsextdebug < /dev/null 2>&1 | grep -i "OCSP response"
OCSP response:
OCSP Response Data:
OCSP Response Status: successful (0x0)
Response Type: Basic OCSP Response

测试网站打开速度:

http://t.qifeiye.com/page/whyslow#

https://gtmetrix.com/analyze.html

测试OCSP Stapling: https://www.ssllabs.com/

2020/11/01

解决Chrome加载不出博客图片的问题,因为我把图片放在了http://novel.ymlog.cn这个域名下,而博客在https://ymlog.cn下,导致Chrome对图片资源发起请求的时候显示:NET::ERR_CERT_COMMON_NAME_INVALID ,将所有文件放到HTTPS的域名下。

PS: 这种情况只有Chrome存在,试了FireFox、Edge、Safari都可以正常显示图片