hexo搭建博客

搭建环境#

centos7

安装 npm#

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

安装 git#

yum -y install git

安装 hexo 命令行#

npm install hexo-cli -g

部署博客到 GitHub 上#

创建 repo（注意名字格式，例如：1273732363.github.io）
配置文件_config.yml

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

下载插件

npm install hexo-deployer-git --save

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

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#

在服务器端

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 密钥#

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

#在主机端打开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 仓库#

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

#!/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

然后给权限

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 仓库是否可用#

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

三、本地配置和测试#

1. 本地配置#

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

deploy:

  type: git

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

  branch: master

2. 测试#

hexo clean  #清除缓存

hexo generate #生成静态页面

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

部署不上原因#

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

设置 webp#

下载 libaom-devel

yum install libaom-devel

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

Releases

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

修改配置文件

vim config.json

配置说明

我的配置

{
  "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 服务

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

修改 nginx 虚拟主机配置

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

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

修改如下

。。。
#    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

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

== 配置 picgo==

上传图片

随便截图一张，然后

== 上传不了的问题 ==

设置代理（需要魔法）

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

看看 github 仓库有没那张图片

唠叨模块#

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

新建网站

设置反代

部署命令快捷方式#

终端

npm run dd

备份#

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  推送到远程仓库

恢复#

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

美化博客（butterfly）#

标签页#

前往你的 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

分类页#

前往你的 Hexo 博客的根目錄

輸入hexo new page categories

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

修改這個文件：

記得添加 type: "categories"

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

导航栏#

修改主題配置文件

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

转载文章#

文章打赏#

# 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

版本控制#

看备份那栏

侧边栏#

主题配置

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

博客创建时间#

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

写文章#

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

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

内容如下

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

然后新建一篇文章

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

保存的目录它会自动新建

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