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 文章封面，標籤看自己喜歡