利用Hexo和Vercel搭建博客
方法參考Fomalhaut文章:Hexo博客搭建教程(一)、Hexo博客搭建教程(二)
使用的主题是butterfly官方文档
前言
我們平時搭博客通常要麼買個服務器用wordpress搞一個，或者布署到github page上，前者需要億點點的錢(去華為雲看了下一個普通服務器一年要几百大洋，果斷放弃)，後者只能放靜態頁面，可玩性和便捷程序就差了點。而vercel將會拯救我們，這是一個站點托官的平台，提供Production和Development环境，还支持持續集成，功能和速度比github page好，还支持部署serverless接口，可以部署動態網站，會自動幫你配置https，最重要的是,他還不收錢!簡直想立馬跪拜了好嗎!
Hexo官方文檔:https://hexo.io/zh-cn/
環境與工具準備
- 操作系统:Windows11
- Node
- Git
- Hexo
- GitHub帳號
- 域名(可選)
開始!
安裝Node.js
Node.js是一个基于Chrome V8引擎的JavaScript运行環境，可謂是把原本只能由浏覧器解析的js给抬起來了。下載地址:https://nodejs.org/en/download/，最好下個穩定版，也不用因為怕以後要裝的東西版本不兼容而跑去裝上古版本，到時真不行就用nvm管理一下嘛。安完可以命令行打 node -v 看版本信息
安裝Hexo
1 | npm install -g hexo-cli |
打hexo -v可以看安裝成功否
Github Page
- 官網:https://github.com，自個去注册就行了
- 注册完了後，創建新倉庫(New repository)，创建一个叫
<用戶名>.github.io的倉庫，注意一定要是”用戶名”+”github.io”，因為每個帳號只允許有一個github page。下面的隨意設置，然後點击創建。
安裝Git
- 去官網https://git-scm.com/downloads下個最新的就好了，安裝就狂點下一步就好了，如果有想知道每個選項具體是在干嘛的探索精神，可以參考Git 详细安装教程（详解 Git 安装过程的每一个步骤)。
- 配置用戶名和郵箱
1 | $ git config --global user.name "你的用戶名" |
想寫哪個都行，只是用來標識你的身份而已
- 在git bash上輸入git config -l可以檢查是否配置成功
1 | $ git config -l |
連接去Github
- 執行以下命令生成ssh公匙，用於計算機連接Github
1 | $ ssh-keygen -t rsa -C "你的郵箱" |
- 打開C://user/#用戶名#/.ssh，会發現多了几個文件，打開id_rsa.pub文件，复制里面的內容。
- 進入github配置頁，選擇
SSH and GPG keys，填進去，确定。 - 測試連接，輸入:
1
$ ssh -T git@github.com
如果連不上，出現
Could not resolve hostname github的話，在cmd打ping www.github.com 也不行的話，可以嘗試修改本地 DNS 文件，打開C:\Windows\System32\drivers\etc 目录下的 hosts 文件，在最後添加140.82.113.4 github.com，然后保存，应該就能ping通了。
初始化Hexo項目
Hexo是一個快速、简洁且高效的博客框架，可以一鍵布署，支持MarkDown和各種插件。
- 首先我們打開cmd窗口，cd到想放置文件的目標路徑，執行
hexo init [項目名]初始化項目。 - 然后進入該目錄，輸入
npm i - 文件结構:
- node_modules: 依赖包
- scaffolds: 生成文章的一些模板
- source: 用来存放你的文章
- themes: 主题
- _config.landscape.yml: 用的什么主題後面就會是甚麼名
- config.yml: 博客的配置文件
- package.json: 项目名称、描述、版本、运行和开发等信息
- 輸入
hexo server或者hexo s启動項目 - 進入瀏覽器打開網址即可見到效果
將靜態博客挂載到GitHub Pages
安裝hexo-deployer-git
1
npm install hexo-deployer-git --save
修改_config.yml文件，修改最後一行配置，將repository修改為自己的github項目地址，分支改為main代表主分支
1
2
3
4deploy:
type: git
repository: git@github.com:a2064777923/a2064777923.github.io.git
branch: main將代碼部署到GitHub
1
2
3hexo clean //刪除之前生成的文件
hexo generate //生成靜態頁面
hexo deploy //部署上去看到Deploy done代表成功了
Vercel部署
vercel是一個免費的代碼托管平台，除了靜態頁面還能托管node.js、python等服務端腳本，可以說非常好用
- 首先注册賬號，推荐用GitHub賬戶關聯，可以在vercel直接托管GitHub庫中的項目，這樣你push到github后就會同步部署到vercel，它還會發郵件來提醒你部署好了。
- 把GitHub裏項目導入成為new project，並部署
- 國內環境你懂的，經常vercel經常被墙，所以最好買一個域名，並綁定上去。點击Vercel控制面板右上角的View Domains就可以看到他分配的域名，这時輸入刚買的域名，它就會自動提示添加DNS解析記錄了。一般一級域名會提示添加’@’开頭的和’CNAME’開头的解析記錄，在購買域名的網站添加解析記錄，記錄类型对应Type，主機記錄对应Name，記錄值对應Value，其他的默認。
- 有了新域名后，需要把_config.yml文件里的url配置項改成自己的新域名，博客文章鏈接才能正确生成。
安裝主題
Hexo的基礎頁面過於單調，但我們可以安裝不同的主題來使其變得又帥又好看!我選擇的是hexo-theme-butterfly主題，用npm方式安裝或是git clone下來到目錄中的themes文件夾里都可以。
此方法只支持 Hexo 5.0.0以上版本
在根目錄打開控制台1
npm install 我選擇的是hexo-theme-butterfly
安裝成功后可在./node_modules文件夹下找到hexo-theme-butterfly文件夹
升級方法是运行npm update hexo-theme-butterfly
升級前記得先備份!
在根目錄运行1
git clone -b 4.5.0 https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly
在./themes里可找到butterfly文件夾，升級方式是运行git pull
應用主題
- 改下配置文件
_config.yml1
theme: butterfly
- 安裝
pug和stylus的渲染器1
npm install hexo-renderer-pug hexo-renderer-stylus --save
- 建議把主題的配置文件复制到根目錄，重命名為
_config.butterfly.yml，這樣方便配置同時也避免它被覆盖掉。Hexo也會优先使用它里面的配置。
配置文件說明
Front-matter
markdown文件最上方以---分隔的区域，用于指定檔案的設定參數
頁面的Page Front-matter:1
2
3
4
5
6
7
8
9
10
11
12
13
14
15---
title: 【必需】页面标题
date: 【必需】页面创建日期
updated: 【可选】页面更新日期
type: 【必需】标籤、分类和友情链接三个页面需要配置
comments: 【可选】显示页面评论模块(默认 true)
description: 【可选】页面描述
keywords: 【可选】页面关键字
top_img: 【可选】页面顶部图片
mathjax: 【可选】显示mathjax(当设置mathjax的per_page: false时，才需要配置，默认 false)
katex: 【可选】显示katex(当设置katex的per_page: false时，才需要配置，默认 false)
aside: 【可选】显示侧边栏 (默认 true)
aplayer: 【可选】在需要的页面加载aplayer的js和css
highlight_shrink: 【可选】配置代码框是否展开(true/false)(默认为设置中highlight_shrink的配置)
---
文章的Post Front-matter: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---
title: 【必需】文章标题
date: 【必需】文章创建日期
updated: 【可选】文章更新日期
tags: 【可选】文章标籤
categories: 【可选】文章分类
keywords: 【可选】文章关键字
description: 【可选】文章描述
top_img: 【可选】文章顶部图片
comments: 【可选】显示文章评论模块(默认 true)
cover: 【可选】文章缩略图(如果没有设置top_img,文章页顶部将显示缩略图，可设为false/图片地址/留空)
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)
---
頁面生成
- 生成標簽頁面:source文件夾里link里的index.md
1
hexo new page tags
1
2
3
4
5---
title: tags
date: 2022-11-20 12:00:00
type: "tags"
--- - 友情鏈接
1
hexo new page link
去1
2
3
4
5---
title: link
date: 2022-11-20 12:00:00
type: "link"
---source/_data下創建一個link.yml文件，寫入1
2
3
4
5
6
7
8- class_name: 分類名，支持html格式，可以留空
class_desc: 分類描述，支持html格式，可以留空
link_list:
- name: 友鏈名
link: 友鏈鏈接
avatar: 友鏈圖標
descr: 东連描述
siteshot: 网站截圖 - 圖庫
圖庫頁面用hexo new page xxx創建，然后用外挂標簽galleryGroup就好了
子頁面也是普通的頁面，用外挂標簽gallery就好了
語言
_config.yml文件里修改
- en
- zh-CH
- zh-TW
網站資料
- title
- subtitle
- description
- keywords: 關鍵詞，支持多個
- author
- language
- timezone: 時區，默認使用電腦時區，可以設置America/New_York,japan,UTC,Asia/Shanghai等等
導航菜單
就是最上面那條東，修改_config.butterfly.yml1
2
3
4
5
6
7
8
9
10menu:
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
- 必須是
/xxx/，用||分開然后寫圖標名 - 可以直接在子目錄里添加hide隱藏子目錄
List||fas fa-list||hide: - 文字可自行修改
代碼块
- 代碼块高亮主題
修改highlight_theme，支持6種樣式:
- darker
- pale night
- light
- ocean
- mac
- mac light
代碼复制
1
highlight_copy: true
代碼框展示/關閉
1
2
3highlight_shrink: true #true全部不展開,要點>打開
#false展開,有>
#none不顯示>代碼換行
1
code_word_wrap: true
代碼高度限制
超过高度的部分才隱藏1
highlight_height_limit: false #可以填寫高度，單位是px，如200px
社交圖標
在頭像框底部的社交圖標，Butterfly支持font-awesome v6圖標
格式: 圖標名: url || 標述1
2
3social:
fab fa-github: https://github.com/xxxxx || Github
fas fa-envelope: mailto:xxxxxx@gmail.com || Email
頂部圖
不要的話配置disable_top_img: true
- index_img: 主页的 top_img
- default_top_img: 默认的 top_img，当页面的 top_img 没有配置时，会显示 default_top_img
- archive_img: 归档页面的 top_img
- tag_img: tag子页面的默认 top_img
- tag_per_img: tag子页面的 top_img，可配置每个tag的top_img
- category_img: category 子页面的默认top_img
- category_per_img: category 子页面的top_img,可配置每个category的top_img
文章置頂和封面
- 可以直接在文章的
front-matter區域裏添加sticky: 1属性來把這篇文章置頂，數值越大，置頂優先級越高 - 在
Front-matter添加cover，填圖片地址，不設置就顯示默認cover。
在_config.butterfly.yml中1
2
3
4
5
6
7
8
9
10
11
12cover:
# 是否显示文章封面
index_enable: true
aside_enable: true
archives_enable: true
# 封面显示的位置
# 三个值可配置 left , right , both
position: both
# 当没有设置cover时，默认的封面显示
default_cover: - XXXXXXXX
- XXXXXXXX
- XXXXXXXX #當配置多張圖片時，會隨机選擇一張作為cover
文章頁配置
文章meta信息
_config.butterfly.yml1
2
3
4
5
6
7
8
9
10
11
12
13post_meta:
page:
date_type: both # created or updated or both 主页文章日期是创建日或者更新日或都显示
date_format: relative # date/relative 显示日期还是相对日期
categories: true # true or false 主页是否显示分类
tags: true # true or false 主页是否显示标签
label: true # true or false 显示描述性文字
post:
date_type: both # created or updated or both 文章页日期是创建日或者更新日或都显示
date_format: relative # date/relative 显示日期还是相对日期
categories: true # true or false 文章页是否显示分类
tags: true # true or false 文章页是否显示标签
label: true # true or false 显示描述性文字
文章版權和協議許好
_config.butterfly.yml1
2
3
4
5
6post_copyright:
enable: true
decode: false
author_href:
license: CC BY-NC-SA 4.0
license_url: https://creativecommons.org/licenses/by-nc-sa/4.0/
如果有文章不需要顯示，可在文章頁Front-matter中單獨設置copyright: false，也支持對單獨文章設置版權信息
文章打賞
_config.butterfly.yml1
2
3
4
5
6
7
8
9reward:
enable: false
QR_code:
- img: /img/wechat.jpg
link:
text: wechat
- img: /img/alipay.jpg
link:
text: alipay
文章目錄toc
_config.butterfly.yml1
2
3
4
5
6toc:
post: true # 文章页是否显示 TOC
page: false # 普通页面是否显示 TOC
number: true # 是否显示章节数
expand: false # 是否展开 TOC
style_simple: false # for post 简洁模式（侧边栏只显示 TOC, 只对文章页有效 ）
相關文章推荐
_config.butterfly.yml1
2
3
4related_post:
enable: true
limit: 6 # 显示推荐文章数目
date_type: created # or created or updated 文章日期显示创建日或者更新日
文章錨點
开启文章锚点后，当你在文章页进行滚动时，文章链接会根据标题ID进行替换。
注意: 每替换一次，会留下一个歷史记录。所以如果一篇文章有很多锚点的话，网页的歷史记录会很多。
_config.butterfly.yml1
2
3# anchor
# when you scroll in post , the url will update according to header id.
anchor: true
文章過期提醒
_config.butterfly.yml1
2
3
4
5
6
7
8# Displays outdated notice for a post (文章过期提醒)
noticeOutdate:
enable: true
style: flat # style: simple/flat
limit_day: 365 # 距离更新时间多少天才显示文章过期提醒
position: top # position: top/bottom
message_prev: It has been # 天数之前的文字
message_next: days since the last update, the content of the article may be outdated. # 天数之后的文字
文章分頁按鈕
_config.butterfly.yml1
2
3
4
5
6# post_pagination (分页)
# value: 1 || 2 || false # false:为关闭分页按钮；1:下一篇显示的是旧文章；2:下一篇显示的是新文章
# 1: The 'next post' will link to old post
# 2: The 'next post' will link to new post
# false: disable pagination
post_pagination: false
頭像
_config.butterfly.yml1
2
3avatar:
img: /assets/head.jpg
effect: false # true则会一直转圈
文章內容复制
_config.butterfly.yml1
2
3
4
5
6
7# copy settings
# copyright: Add the copyright information after copied content (复制的内容后面加上版权信息)
copy:
enable: true # 是否开启网站复制权限
copyright: # 复制的内容后面加上版权信息
enable: true # 是否开启复制版权信息添加
limit_count: 50 # 字数限制，当复制文字大于这个字数限制时，将在复制的内容后面加上版权信息
Footer設置
_config.butterfly.yml1
2
3
4
5
6footer:
owner:
enable: true
since: 2022 # 站点起始时间
custom_text: # 是一个给你用来在页脚自定义文本的选项。通常你可以在这里写声明文本等,支持 HTML。
copyright: false # Copyright of theme and framework
tzy大佬的示例:1
custom_text: I wish you to become your own sun, no need to rely on who's light.<p><a target="_blank" href="https://hexo.io/"><img src="https://img.shields.io/badge/Frame-Hexo-blue?style=flat&logo=hexo" title="博客框架为Hexo"></a> <a target="_blank" href="https://butterfly.js.org/"><img src="https://img.shields.io/badge/Theme-Butterfly-6513df?style=flat&logo=bitdefender" title="主题采用butterfly"></a> <a target="_blank" href="https://www.jsdelivr.com/"><img src="https://img.shields.io/badge/CDN-jsDelivr-orange?style=flat&logo=jsDelivr" title="本站使用JsDelivr为静态资源提供CDN加速"></a> <a target="_blank" href="https://vercel.com/ "><img src="https://img.shields.io/badge/Hosted-Vervel-brightgreen?style=flat&logo=Vercel" title="本站采用双线部署，默认线路托管于Vercel"></a> <a target="_blank" href="https://vercel.com/ "><img src="https://img.shields.io/badge/Hosted-Coding-0cedbe?style=flat&logo=Codio" title="本站采用双线部署，联通线路托管于Coding"></a> <a target="_blank" href="https://github.com/"><img src="https://img.shields.io/badge/Source-Github-d021d6?style=flat&logo=GitHub" title="本站项目由Gtihub托管"></a> <a target="_blank" href="http://creativecommons.org/licenses/by-nc-sa/4.0/"><img src="https://img.shields.io/badge/Copyright-BY--NC--SA%204.0-d42328?style=flat&logo=Claris" title="本站采用知识共享署名-非商业性使用-相同方式共享4.0国际许可协议进行许可"></a></p>
也可以寫ICP備案號1
custom_text: <a href="icp链接"><img class="icp-icon" src="icp图片"><span>备案号：xxxxxx</span></a>
右下角按鈕
_config.butterfly.yml
簡繁轉換
1 | translate: |
夜間模式
1 | # dark mode |
閱讀模式
会去掉除文章外的内容，避免干扰阅读1
readmode: true
側邊欄設置
_congit.butterfly.yml
排版
1 | aside: |
訪問人數
1 | # busuanzi count for PV / UV in site |
運行時間
1 | # Time difference between publish date and now (網頁運行時間) |
最新评论
如果未配置任何評論，先不要開启
最新评论只会在刷新时才会去读取，并不会实时变化。
由于 API 有 访问次数限制，为了避免调用太多，主题默认存取期限为 10 分鐘。也就是説，调用后资料会存在localStorage里，10分鐘内刷新网站只会去localStorage读取资料。 10 分鐘期限一过，刷新页面时才会去调取 API 读取新的数据。（3.6.0 新增了 storage 配置，可自行配置缓存时间）。1
2
3
4
5
6
7# Aside widget - Newest Comments
newest_comments:
enable: true
sort_order: # Don't modify the setting unless you know how it works
limit: 6 # 显示的数量
storage: 10 # 设置缓存时间，单位 分钟
avatar: true # 是否显示头像
綱站背景
_config.butterfly.yml1
2
3
4# 图片格式 url(http://xxxxxx.com/xxx.jpg)
# 颜色（HEX值/RGB值/颜色单词/渐变色)
# 留空 不显示背景
background: url(https://source.fomal.cc/img/dm1.webp)
打字效果
_config.butterfly.yml
詳見: (activate-power-mode)[https://github.com/disjukr/activate-power-mode]1
2
3
4
5
6
7# Typewriter Effect (打字效果)
# https://github.com/disjukr/activate-power-mode
activate_power_mode:
enable: false
colorful: true # open particle animation (冒光特效)
shake: true # open shake (抖動特效)
mobile: false
footer背景
_config.butterfly.yml1
2# footer是否显示图片背景(与top_img一致)
footer_bg: true #默認false: 顯示默認顏色;圖片鏈接: 顯示圖片;頻色值(HEX值 - #0000FF | RGB值 - rgb(0,0,255) | 颜色单词 - orange | 渐变色 - linear-gradient( 135deg, #E2B0FF 10%, #9F44D3 100%): 顏色; true: 跟top_img一樣
背景特效
_config.butterfly.yml
详细配置可查看(canvas_ribbon)[https://github.com/hustcc/ribbon.js]1
2
3
4
5
6
7canvas_ribbon:
enable: false
size: 150
alpha: 0.6
zIndex: -1
click_to_change: false #設置是否每次點擊都更換彩带
mobile: false # false 手機端不顯示 true 手機端顯示
1 | canvas_ribbon: |
1 | canvas_nest: |
鼠標點击效果
_config.butterfly.yml
1 | fireworks: |
1 | # 点击出現爱心 |
1 | # 点击出现文字，文字可自行修改 |
自定義字體
_config.butterfly.yml
全局字體
1 | # Global font settings |
Blog標題字體
1 | # Font settings for the site title and site subtitle |
網站副標題
_config.butterfly.yml1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18# the subtitle on homepage (主頁subtitle)
subtitle:
enable: true
# Typewriter Effect (打字效果)
effect: true
# loop (循環打字)
loop: true
# source 調用第三方服務
# source: false 關閉調用
# source: 1 調用一言網的一句話（簡體） https://hitokoto.cn/
# source: 2 調用一句網（簡體） http://yijuzhan.com/
# source: 3 調用今日詩詞（簡體） https://www.jinrishici.com/
# subtitle 會先顯示 source , 再顯示 sub 的內容
source: false
# 如果關閉打字效果，subtitle 只會顯示 sub 的第一行文字
sub:
- "進來玩啊🤣🤣🤣"
- "請你吃糖🍭🍭🍭"
頁面加載動畫
开启preloader后，会显示加载动画，等页面加载完，加载动画会消失。1
2# 加载动画 Loading Animation
preloader: true
字數統計
必須安裝依赖才能設為true
安裝插件:npm install hexo-wordcount --save1
2
3
4
5wordcount:
enable: true
post_wordcount: true
min2read: true
total_wordcount: true
Pjax
当用户点击链接，通过ajax更新页面需要变化的部分，然后使用HTML5的pushState修改浏览器的 URL 地址。这样可以不用重复加载相同的资源(css/js)， 从而提升网页的加载速度。1
2
3
4
5
6
7
8
9
10
11# Pjax [Beta]
# It may contain bugs and unstable, give feedback when you find the bugs.
# https://github.com/MoOx/pjax
pjax:
enable: true
# 对于一些第三方插件，有些并不支持 pjax 。
# 你可以把网页加入到 exclude 里，这个网页会被 pjax 排除在外。
# 点击该网页会重新加载网站。
exclude:
- /music/
- /no-pjax/
具體參考(Pjax文檔)[https://github.com/MoOx/pjax]
Injext
如想添加额外的 js/css/meta 等等东西，可以在 Inject 里添加，head(</body>標簽前)，bottom(</html>標簽之前)1
2
3
4
5
6
7
8# Inject
# Insert the code to head (before '</head>' tag) and the bottom (before '</body>' tag)
# 插入代码到头部 </head> 之前 和 底部 </body> 之前
inject:
head:
- <link rel="stylesheet" href="/xxx.css">
bottom:
- <script src="xxxx"></script>
本地搜索系統
- 安裝依赖:
npm install hexo-generator-search --save - 修改
_config.yml:1
2
3
4search:
path: search.xml
field: post
content: true - 在
_config.butterfly.yml中開启1
2local_search:
enable: true
在其他電腦上使用
把文件夾完整拷貝到新設備，依次執行:
- npm install hexo
- npm install
- npm install hexo-deployer-git
