hexo搭建博客

搭建环境

centos7

安装 npm

Copy
curl -sL https://rpm.nodesource.com/setup_16.x | sudo bash -
sudo yum install nodejs
node --version
npm --version

安装 git

Copy
yum -y install git

安装 hexo 命令行

Copy
npm install hexo-cli -g

部署博客到 GitHub 上

创建 repo（注意名字格式，例如：1273732363.github.io）

配置文件_config.yml

Copy
deploy:
type: 'git'
repo: 'https://github.com/1273732363/1273732363.github.io.git'
branch: main

下载插件

Copy
npm install hexo-deployer-git --save

清理缓存、生成静态文件、部署到 github

Copy
hexo clean
hexo g
hexo d

第一次部署需要登录 GitHub 账号

部署成功

用户名必须一样

查看一下actions有 pages 有没起来

vercel 自定义域名加速访问 gitpages

注册一个账号，关联 GitHub

新增项目

导入 gitpages 那个项目

按照他给的记录值配置一个 cname，== 主机记录自定义 ==

改一下 hexo 配置文件的 url

修改内容之后再上传 GitHub

修改package.json

运行调试：deploy

出现问题

网络问题，多部署几次就好

部署到服务器上

一、安装宝塔

添加站点、配置 SSL

二、Git 仓库搭建

之前推 hexo 的静态文件都是推到 GitHub 的仓库，现在服务器也是一样，需要仓库来保存

1. 添加一个用户 git

在服务器端

Copy
adduser git #添加git用户

chmod 740 /etc/sudoers #改变sudoers文件的权限为文件所有者可写

vim /etc/sudoers

#在root ALL=(ALL) ALL 下方添加一行

git ALL=(ALL) ALL

chmod 400 /etc/sudoers #将其权限修改为文件所有者可读

2. 给 git 用户添加 ssh 密钥

这一步是为了建立主机与服务器连接，使其不需要密码也能登陆

Copy
#在主机端打开powershell，cd到C:\Users\admin\.ssh生成密匙，如已有密匙可跳过这一步

ssh-keygen -t rsa -C "taitres.cc"

# -t 指定密钥类型，默认是 rsa ，可以省略

# -C 用于识别这个密钥的注释，可以输入任何内容

# -f 指定密钥文件存储文件名，默认id\_rsa

#在服务器端

su git #切换到git用户

mkdir -p ~/.ssh

touch ~/.ssh/authorized\_keys #创建authorized\_keys文件

chmod 600 ~/.ssh/authorized\_keys #为authorized\_keys文件赋予文件所有者可读可写的权限

chmod 700 ~/.ssh #为.ssh文件夹赋予文件夹所有者可读可写可执行的权限

复制公匙 id_rsa.pub 内容到服务器 /home/git/.ssh/authorized_keys，关闭终端，使用ssh git@server重新登录服务器，测试是否能不要密码登录到 git 用户，如出现 Permission denied 的问题可尝试文章末尾的解决办法

3. 创建 Git 仓库

Copy
sudo mkdir /home/git/repos #新建目录，这是git仓库的位置

cd /home/git/repos

sudo git init --bare taiblog.git #初始化一个名叫taiblog的仓库

4. 配置钩子实现自动部署

找到 /home/git/repos/taiblog.git/hooks/post-update.sample 改名post-update，内容改为

sudo vim post-update

Copy
#!/bin/sh

git --work-tree=/www/wwwroot/taitres.cc --git-dir=/home/git/repos/taiblog.git checkout -f

#!/bin/sh

git --work-tree=/www/wwwroot/blog.burnchi.site --git-dir=/home/git/repos/taiblog.git checkout -f

然后给权限

Copy
cd taiblog.git/hooks/

sudo chmod +x post-update #赋予其可执行权限

sudo chown -R git:git /home/git/repos/ #仓库所有者改为git

sudo chown -R git:git /www/wwwroot/blog.burnchi.site/ #站点文件夹所有者改为git

5. 测试 Git 仓库是否可用

Copy
#在主机端，如果能将仓库拉下来，说明Git仓库搭建成功git clone git@154.31.162.142:/home/git/repos/taiblog.git

三、本地配置和测试

1. 本地配置

修改本地 Hexo 博客文件夹中的\_config.yml文件

Copy
deploy:

type: git

repo: git@server:/home/git/repos/taiblog.git

branch: master

2. 测试

Copy
hexo clean #清除缓存

hexo generate #生成静态页面

hexo delopy #将本地静态页面目录部署到云服务器

部署不上原因

_config 中 branch 写错了 master 和 main 要注意看一下

设置 webp

下载 libaom-devel

Copy
yum install libaom-devel

下载二进制 webp-server-linux-amd64

Releases

在 opt 下创建 webps 目录

Copy
chmod +x webp-server-linux-amd64
mkdir -p /opt/webps
mv webp-server-linux-amd64 /opt/webps/webp-server
cd /opt/webps
./webp-server -dump-config > config.json

修改配置文件

Copy
vim config.json

配置说明

我的配置

Copy
{
"HOST": "127.0.0.1",
"PORT": "3333",
"QUALITY": "80",
"IMG_PATH": "/www/wwwroot/blog.burnchi.site",
"EXHAUST_PATH": "/var/cache/webp",
"ALLOWED_TYPES": ["jpg","png","jpeg","bmp"],
"ENABLE_AVIF": false
}

开启 webp 服务

Copy
./webp-server -dump-systemd > /lib/systemd/system/webp-server.service
systemctl daemon-reload
systemctl enable webp-server.service
systemctl start webp-server.service

修改 nginx 虚拟主机配置

Copy
pwd
/www/server/panel/vhost/nginx （修改nginx配置文件的路径）

Copy
vim /www/server/panel/vhost/nginx/blog.burnchi.site.conf

修改如下

Copy
。。。
# location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$
# {
# expires 30d;
# error_log /dev/null;
# access_log /dev/null;
# }

。。。
location ~* \.(?:jpg|jpeg|gif|png)$ {
proxy_pass http://127.0.0.1:3333;
proxy_set_header X-Real-IP $remote_addr;
proxy_hide_header X-Powered-By;
proxy_set_header HOST $http_host;
add_header Cache-Control 'no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0';
}

。。。

}

如果不生效可能是图片的后缀名不对

我从 jpg 换成 png 就可以转换为 webp 了

设置图床

== 创建一个新仓库 ==

==token 获取 ==

点击 GitHub 头像

左侧开发者工具

personal access tokens 里生成一个 token

== 自定义域名 ==

加速访问 GitHub 仓库资源免费 CDN

https://www.jsdelivr.com/?docs=gh 免费 CDN

Copy
https://cdn.jsdelivr.net/gh/user/repo@version/file
https://cdn.jsdelivr.net/gh/用户名/仓库名

== 配置 picgo==

上传图片

随便截图一张，然后

== 上传不了的问题 ==

设置代理（需要魔法）

可能之前上传过了，直接改 md 文件里图片的 url 就能生效

看看 github 仓库有没那张图片

唠叨模块

Copy
docker run -d --name memos -p 5230:5230 -v ~/.memos/:/var/opt/memos neosmemo/memos:latest

新建网站

设置反代

部署命令快捷方式

终端

Copy
npm run dd

备份

Copy
git status 查看本地文件状态
git commit -a -m "主题差不多改好了" （-a表示add）
git remote -v 查看远程仓库（没有则下面添加）
git remote add origin https://github.com/burnchi/blog.git （blog是新建的仓库，只需执行一次，后面不需要，origin是仓库别名）
git push -u origin main 推送到远程仓库

恢复

Copy
git clone ...blog.git
cd hexo
npm install
hexo s

美化博客（butterfly）

标签页

Copy
前往你的 Hexo 博客的根目錄
輸入hexo new page tags
你會找到source/tags/index.md這個文件
修改這個文件：
記得添加 type: "tags"

參數 解釋
type 【必須】頁面類型，必須為 tags
orderby 【可選】排序方式 ：random/name/length
order 【可選】排序次序： 1, asc for ascending; -1, desc for descending

分类页

Copy
前往你的 Hexo 博客的根目錄

輸入hexo new page categories

你會找到source/categories/index.md這個文件

修改這個文件：

記得添加 type: "categories"

Copy
---
title: 分類
date: 2018-01-05 00:00:00
type: "categories"
---

导航栏

修改 主題配置文件

Copy
Home: / || fas fa-home
Archives: /archives/ || fas fa-archive
Tags: /tags/ || fas fa-tags
Categories: /categories/ || fas fa-folder-open
List||fas fa-list:
Music: /music/ || fas fa-music
Movie: /movies/ || fas fa-video
Link: /link/ || fas fa-link
About: /about/ || fas fa-heart

菜单图片

要写在各自的 md 文件加 top_img 属性

文章配置

文章描述

寫法 解釋
title 【必需】文章標題
date 【必需】文章創建日期
updated 【可選】文章更新日期
tags 【可選】文章標籤
categories 【可選】文章分類
keywords 【可選】文章關鍵字
description 【可選】文章描述
top_img 【可選】文章頂部圖片
cover 【可選】文章縮略圖 (如果沒有設置 top_img, 文章頁頂部將顯示縮略圖，可設為 false / 圖片地址 / 留空)
comments 【可選】顯示文章評論模塊 (默認 true)
toc 【可選】顯示文章 TOC (默認為設置中 toc 的 enable 配置)
toc_number 【可選】顯示 toc_number (默認為設置中 toc 的 number 配置)
toc_style_simple 【可選】顯示 toc 簡潔模式
copyright 【可選】顯示文章版權模塊 (默認為設置中 post_copyright 的 enable 配置)
copyright_author 【可選】文章版權模塊的文章作者
copyright_author_href 【可選】文章版權模塊的文章作者鏈接
copyright_url 【可選】文章版權模塊的文章連結鏈接
copyright_info 【可選】文章版權模塊的版權聲明文字
mathjax 【可選】顯示 mathjax (當設置 mathjax 的 per_page: false 時，才需要配置，默認 false)
katex 【可選】顯示 katex (當設置 katex 的 per_page: false 時，才需要配置，默認 false)
aplayer 【可選】在需要的頁面加載 aplayer 的 js 和 css, 請參考文章下面的音樂 配置
highlight_shrink 【可選】配置代碼框是否展開 (true/false)(默認為設置中 highlight_shrink 的配置)
aside 【可選】顯示側邊欄 (默認 true)

文章封面

主题配置文件

md 文件加个 cover:

文章置顶

加属性 sticky:1

转载文章

copyright: false （不开版权）

文章打赏

Copy
# Sponsor/reward
reward:
enable: true
QR_code:
- img: /img/wechat.png
link:
text: 微信
- img: /img/ali.png
link:
text: 支付宝

文章目录

单独不设置目录数字

md 加属性 number: false

添加交互

https://butterfly.js.org/posts/4aa8abbe/#tag-hide

版本控制

看备份那栏

侧边栏

主题配置

Copy
aside:
enable: true
hide: false
button: true
mobile: true # display on mobile
position: right # left or right
display:
archive: true
tag: true
category: true
...

博客创建时间

Copy
runtimeshow:
enable: true
publish_date: 2023/4/7 17:26:00

写文章

source/_posts下新建一个文件夹（当成一个分类）

写文章时，先新建创建分类模板（主要改 categories 属性）

内容如下

Copy
---
title: {{ title }}
date: {{ date }}
tags:
categories: web安全
cover: /img/1.jpg
---

然后新建一篇文章

Copy
模板：hexo new <layout> <文章标题> -p <保存的目录名>/<文件名>
例子：hexo new webanquan ssrf -p web安全/ssrf
hexo new pages -p web安全/ssrf

保存的目录它会自动新建

模板用的是分类模板，只需改下 cover 文章封面，标签看自己喜欢

参考资料