GitHub Pages+Hexo搭建个人博客

本文最后更新于：2022年8月8日晚上

很多人都想搭建自己的博客，但是奈何技术有限，服务器部署，HTML，域名解析，等等，这一大堆东西可真有的折腾。

但是如果有这样一个机会，不需要太复杂的操作，不要服务器，不要域名，不用写html，你愿意去尝试吗？

✨进入正题

🎨准备工作

0.注册GitHub,不会请自行百度

1.安装Git

2.安装Node.js

安装后打开cmd输入以下命令

1
2
3

$ node -v
$ npm -v
$ git --version

结果如下：

1
2
3

> 8.5.5
> v16.15.0
> git version 2.36.0.windows.1

3.安装Hexo

在cmd中输入npm install hexo cli -g

之后输入hexo -v检查安装是否成功

4.配置Git

打开Git Bash

设置用户名和电子邮件

1 2	`$ git config --global user.name "你的GitHub用户名" $ git config --global user.email "你的GitHub注册邮箱"`

生成密钥

1	`$ ssh-keygen -t rsa -C "你的GitHub注册邮箱"`

找到id_rsa.pub, 复制全部内容

到GitHub_Settings_Keys界面,新建SSH Key

检查设置是否成功

1	`$ ssh git@github.com`

5.创建并设置GitHub储存库

登录后点击“+”号，选择New repository，下一步在Repository name下面填写你要创建的地址，这个地址是就是你的域名，以github.io结尾。例如填写yourname.github.io以后就在地址栏直接输入yourname.github.io就可以访问网站按照提示一步步完成创建，最后样子如下

6.初始化Hexo

创建一个文件夹，用于存放Hexo，然后右键选择Git Bash Here

克隆GitHub上的项目

1	`$ git clone https://github.com/yourname/yourname.github.io.git`

定位目录

1	`$ cd yourname.github.io`

安装相关工具

1	`$ npm install hexo --save`

完成后输入

1
2
3

$ hexo init
$ npm install
$ hexo g

此时已经基本完成，若想查看效果，可以输入

1	`$ hexo s`

打开http://localhost:4000即可查看

🎈个性化

这里的博客配置指根目录下的_config.yml，主题配置指/themes/fluid/_config.yml

安装主题

可以直接到GitHub上搜索hexo-theme，或在Hexo主题商店中搜索，也可以通过npm直接安装，具体详见主题说明

这里以Fluid主题为例

方式一：

1	`$ npm install --save hexo-theme-fluid`

方式二：

下载最新 release 版本解压到 themes 目录，并将解压出的文件夹重命名为 fluid。

在博客配置中修改内容

1
2
3

theme: fluid  # 指定主题

language: zh-CN  # 指定语言，会影响主题显示的语言，按需修改

同时，可以更改网站信息

# Site
title: 网站标题
subtitle: 副标题
description: 个人签名
author: 姓名
language: zh-cn
timezone:

1.所有的配置“:”符号后面都要带空格，否则执行本地测试直接失败。 2.language是设置语言。zh-cn是中文。 3.如果设置zh-cn后仍出现乱码问题。需要更改文件的字符编码集为UTF-8,方法很多具体就不详细介绍了。

注意同时要在博客配置中设置自己的远程仓库地址

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: https://github.com/yourname/yourname.github.io.git
  branch: main

其他花里胡哨的东西见进阶篇

🎉部署

继续在本目录命令行 1.安装部署工具（方便以后更新） npm install hexo-deployer-git --save 2.发布Hexo到GitHub Page hexo clean && hexo g && hexo d

以后可以用第二步命令部署。

一段时间后，访问https://yourname.github.io就可以看见你的博客了

👑进阶

先照着Fluid的文档操作吧。。。

评论插件

以Fluid支持的插件为例

Valine (基于LeanCloud) / Waline (从 Valine 衍生而来，额外增加了服务端和多种功能)

Gitalk/Utterances (基于GitHub Issues) Giscus(基于Github Discussions)

Disqus / 畅言 / 来必力(Livere) (基于第三方的服务)

Remark42 (需要自托管服务端)

Twikoo (基于腾讯云开发)

Cusdis (基于第三方服务或自托管服务)

1.Valine/Waline

注册LeanCloud，并按要求验证邮箱、手机号，账户类型选择个人

注意获取验证码时不要着急！不要着急！不要着急！

接着点击创建应用，名称随便填，计价方案选择开发版

创建之后在设置-应用凭据中复制AppID、AppKey、MasterKey

对于Valine，将AppID和AppKey复制到主题配置对应位置即可

valine:
  appId: #你的AppID
  appKey: #你的AppKey
  path: window.location.pathname
  placeholder: #评论框占位提示符
  avatar: 'retro' #Gravatar 头像展示方式
  meta: ['nick', 'mail', 'link'] #评论者相关属性
  requiredFields: ['nick','mail'] #设置必填项，默认匿名
  pageSize: 10 #评论列表分页，每页条数
  lang: 'zh-CN' #多语言支持
  highlight: false #代码高亮，默认开启，若不需要，请手动关闭
  recordIP: true #是否记录评论者IP
  serverURLs: '' 
  emojiCDN: #设置表情包CDN
  emojiMaps: #设置表情包映射
  enableQQ: true #是否启用昵称框自动获取QQ昵称和QQ头像

对于Waline，则需注册Vercel，并点击下面按钮部署Waline

看完满屏的烟花后，点击顶部的 Settings - Environment Variables 进入环境变量配置页，并配置三个环境变量 LEAN_ID, LEAN_KEY 和 LEAN_MASTER_KEY 。它们的值分别对应上一步在 LeanCloud 中获得的 AppID, AppKey, Master Key。

环境变量配置完成之后点击顶部的 Deployments 点击顶部最新的一次部署右侧的 Redeploy 按钮进行重新部署。该步骤是为了让刚才设置的环境变量生效。

此时会跳转到 Overview 界面开始部署，等待片刻后 STATUS 会变成 Ready。此时请点击 Visit ，即可跳转到部署好的网站地址，此地址即为你的服务端地址。

环境变量配置完成之后点击顶部的 Deployments 点击顶部最新的一次部署右侧的 Redeploy 按钮进行重新部署。该步骤是为了让刚才设置的环境变量生效。

将服务端地址复制到主题配置对应位置即可

waline:
  serverURL: ' ' #服务端地址
  path: window.location.pathname
  placeholder: #评论框占位提示符
  meta: ['nick', 'mail', 'link'] #评论者相关属性
  requiredMeta: ['nick'] #设置必填项，默认匿名
  lang: 'zh-CN' #多语言支持
  emoji: ['https://cdn.jsdelivr.net/gh/walinejs/emojis/weibo'] #Emoji样式，详见官方文档
  dark: 'html[data-user-color-scheme="dark"]' #暗黑模式样式
  avatar: 'retro' #Gravatar 头像展示方式
  avatarCDN: 'https://seccdn.libravatar.org/avatar/' #GravatarCDN
  avatarForce: false 
  wordLimit: 0 #字数限制
  pageSize: 10 #评论列表分页，每页条数
  highlight: true #代码高亮

2.Twikoo

申请 MongoDB账号
创建免费 MongoDB 数据库，区域推荐选择 AWS / N. Virginia (us-east-1)
在 Clusters 页面点击 CONNECT，按步骤设置允许所有 IP 地址的连接，创建数据库用户，并记录数据库连接字符串，请将连接字符串中的 <password> 修改为数据库密码， myFirstDatabase替换为数据库名
申请 Vercel账号
点击以下按钮将 Twikoo 一键部署到 Vercel
进入 Settings - Environment Variables，添加环境变量 MONGODB_URI，值为第 3 步的数据库连接字符串
进入Deployments , 然后在任意一项后面点击更多（三个点） , 然后点击Redeploy, 最后点击下面的Redeploy
进入 Overview，点击 Domains 下方的链接，如果环境配置正确，可以看到 “Twikoo 云函数运行正常” 的提示
Vercel Domains（包含 https:// 前缀，例如 https://xxx.vercel.app）即为您的环境 ID
将环境ID粘贴到主题配置中即可

twikoo:
    envId: #环境ID
    region: ap-shanghai
    path: window.location.pathname

3.Gitalk/Utterances/Giscus

对于Gitalk，需要到GitHub的Settings-Developer settings-OAuth Apps中申请新的OAuth App，Homepage URL和Authorization callback URL填自己博客网址

得到的Client ID和Client secrets填入主题设置

gitalk:
  clientID: #必须.GitHub Application Client ID.
  clientSecret: #必须.GitHub Application Client Secret.
  repo: 必须.用于提交Issue的GitHub repository.
  owner: #必须.GitHub repository所有者,可以是个人或者组织.
  admin: [''] #必须.GitHub repository的所有者和合作者(对这个repository有写权限的用户).
  language: zh-CN #设置语言
  labels: ['Gitalk'] #GitHub issue 的标签。
  perPage: 10 #每次加载的数据大小，最多 100。
  pagerDirection: last #评论排序方式,last为按评论创建时间倒叙,first为按创建时间正序.
  distractionFreeMode: false #类似Facebook评论框的全屏遮罩效果.
  createIssueManually: true #如果当前页面没有相应的isssue且登录的用户属于admin,则会自动创建issue.如果设置为true,则显示一个初始化页面,创建issue需要点击init按钮.
  # 默认 proxy 可能会失效，解决方法请见下方链接
  # The default proxy may be invalid, refer to the links for solutions
  # https://github.com/gitalk/gitalk/issues/429
  # https://github.com/Zibri/cloudflare-cors-anywhere
  proxy: https://cors-anywhere.azm.workers.dev/https://github.com/login/oauth/access_token

对于Utterances和Giscus ，

utterances:
  repo: #用于提交Issue的GitHub repository,格式为用户名/仓库名
  issue_term: title #Issue命名方式,见官网及生成代码中的"issue-term"行
  label: utterances #Issue标签
  theme: github-light #主题
  theme_dark: github-dark

giscus:
  repo: #用于提交Issue的GitHub repository,格式为用户名/仓库名
  repo-id: #用于提交Issue的GitHub repository ID,见官网生成代码，下同
  category: #Discussions标签
  category-id: #DiscussionID
  theme-light: light #主题
  theme-dark: dark
  mapping: pathname
  reactions-enabled: 1
  emit-metadata: 0
  input-position: top
  lang: zh-CN

4.Cusdis

创建账号后，点击Embled Code，将data-app-id复制到主题配置中

cusdis:
  host: https://cusdis.com #服务器,如不想部署使用这个即可
  app_id: #data-app-id
  lang: zh-cn #语言

5.畅言/来必力/Disqus/Reamrk42

畅言：注册账号后进入控制台，填写相关信息后到安装畅言-通用代码安装中复制AppID和Conf中的内容，粘贴到主题配置中

1
2
3

changyan:
  appid: '' #appid
  appkey: '' #conf

来必力：注册账号，填写相关信息后选择City版，在一般网站的安装代码中复制uid中的内容，粘贴到主题配置中

1 2	`livere: uid: '' #uid`

Disqus：被墙了。。。

国内用户可通过DisqusJs访问，但会报错

所以，换一个就是了

disqus: 
  shortname: #Disqus的网站简名,在Settings-General中可见
  # 以下为 Disqusjs 支持, 国内用户如果想使用 Disqus 建议配合使用
  # The following are Disqusjs configurations, please ignore if DisqusJS is not required
  # See: https://github.com/SukkaW/DisqusJS
  disqusjs: true #开启DisqusJs
  apikey: #DisqusAPI公钥,见DisqusJs文档

Reamrk42：

还得另搞个服务器，免了罢

remark42:
  host: #服务器地址
  site_id: #使用Remark42的站点(官方说是选填)
  max_shown_comments: 10 #每页评论数
  locale: zh #本地化
  components: ['embed'] #可选['embed' | 'last-comments' | 'counter'],为小部件,内容如下:
  		#componets:
  		#embed:基本评论小部件
  		#last-comments:最后评论小部件
  		#counter:计数器小部件
  		#具体内容参见官方文档

插入音频/视频

1.安装hexo-tag-aplayer

1	`$ npm install --save hexo-tag-aplayer`

2.配置MeetingJS

最新版的 hexo-tag-aplayer 已经支持了MetingJS的使用，可以直接解析网络平台的歌曲（简直是神器），首先要在站点配置文件中开启Meting模式，添加以下代码在博客配置的最后

1 2	`aplayer: meting: true`

3.插入代码

示例：

1	`{% meting "5221167" "netease" "song" %}`

有关参数如下

选项	默认值	描述
id	必须值	歌曲 id / 播放列表 id / 专辑 id / 搜索关键字
server	必须值	音乐平台: `netease`, `tencent`, `kugou`, `xiami`, `baidu`
type	必须值	`song`, `playlist`, `album`, `search`, `artist`
fixed	`false`	开启固定模式
mini	`false`	开启迷你模式
loop	`all`	列表循环模式：`all`, `one`,`none`
order	`list`	列表播放模式： `list`, `random`
volume	0.7	播放器音量
lrctype	0	歌词格式类型
listfolded	`false`	指定音乐播放列表是否折叠
storagename	`metingjs`	LocalStorage 中存储播放器设定的键名
autoplay	`true`	自动播放，移动端浏览器暂时不支持此功能
mutex	`true`	该选项开启时，如果同页面有其他 aplayer 播放，该播放器会暂停
listmaxheight	`340px`	播放列表的最大长度
preload	`auto`	音乐文件预载入模式，可选项： `none`, `metadata`, `auto`
theme	`#ad7a86`	播放器风格色彩设置

4.安装hexo-tag-dplayer

1	`$ npm install --save hexo-tag-dplayer`

5.插入代码

{% dplayer "url=https://upos-sz-mirrorcos.bilivideo.com/upgcxcode/99/91/137649199/137649199_u2-1-208.mp4?e=ig8euxZM2rNcNbKV7bdVhwdl7wdjhwdVhoNvNC8BqJIzNbfq9rVEuxTEnE8L5F6VnEsSTx0vkX8fqJeYTj_lta53NCM=&uipk=5&nbs=1&deadline=1652176861&gen=playurlv2&os=bcache&oi=1866715013&trid=0000ca486ebf27a34fabaf5a2673f985ea3fT&platform=html5&upsig=24557526f2dd14de85b5294ad7c6792b&uparams=e,uipk,nbs,deadline,gen,os,oi,trid,platform&cdnid=3280&mid=0&bvc=vod&nettype=0&bw=407108&orderid=0,1&logo=80000000"  "autoplay=true" "preload=metadata" "hotkey=true" %}

有关的选项列表如下:

选项	默认值	描述
url	必须值	视频地址
loop	`false`	视频循环播放
volume	`0.7`	播放器音量
hotkey	`true`	开启热键
autoplay	`true`	自动播放，移动端浏览器暂时不支持此功能
logo	`-`	在左上角展示一个 logo，你可以通过 CSS 调整它的大小和位置
mutex	`true`	该选项开启时，如果同页面有其他播放，该播放器会暂停
highlight	`[]`	自定义进度条提示点
preload	`auto`	视频文件预载入模式，可选项： `none`, `metadata`, `auto`
theme	`#ad7a86`	播放器风格色彩设置

注：如果使用腾讯视频、优酷视频等在线视频网站的资源，需要先进行视频地址解析，获取到实际的视频地址再插入。

6.其他方法

在使用一些视频网站时可以直接复制分享代码到文章中，如：

1	`<iframe height=498 width=750 src='//player.bilibili.com/player.html?aid=80433022&bvid=BV1GJ411x7h7&cid=137649199&page=1' frameborder=0 'allowfullscreen'></iframe>`

这里的height和width为视频的长和宽

live2D看板娘

1.安装hexo-helper-live2d

1	`$ npm install --save hexo-helper-live2d`

2.配置

将以下代码粘贴到博客(主题)配置中

live2d:
  enable: true #是否开启
  scriptFrom: local #默认
  pluginRootPath: live2dw/ #插件在站点上的根目录(相对路径)
  pluginJsPath: lib/ #脚本文件相对与插件根目录路径
  pluginModelPath: assets/ #模型文件相对与插件根目录路径
  tagMode: false #标签模式,是否仅替换 live2d tag标签而非插入到所有页面中
  debug: false #调试,是否在控制台输出日志
  model:
    use: live2d-widget-model-wanko #npm-module package name
  display:
    position: right #显示位置
    width: 150 #宽度
    height: 300 #高度
  mobile:
    show: true# 是否在移动端显示
  react:
    opacity: 0.7

3.安装模块

npm模型

live2d-widget-model-chitose
live2d-widget-model-epsilon2_1
live2d-widget-model-gf
live2d-widget-model-haru/01 (use npm install --save live2d-widget-model-haru)
live2d-widget-model-haru/02 (use npm install --save live2d-widget-model-haru)
live2d-widget-model-haruto
live2d-widget-model-hibiki
live2d-widget-model-hijiki
live2d-widget-model-izumi
live2d-widget-model-koharu
live2d-widget-model-miku
live2d-widget-model-ni-j
live2d-widget-model-nico
live2d-widget-model-nietzsche
live2d-widget-model-nipsilon
live2d-widget-model-nito
live2d-widget-model-shizuku
live2d-widget-model-tororo
live2d-widget-model-tsumiki
live2d-widget-model-unitychan
live2d-widget-model-wanko
live2d-widget-model-z16

你需要先使用 npm install 模型的包名 来安装,

然后将包名输入位于 _config.yml 的 model.use 中.

永久链接

安装插件

安装npm包：

1	`npm install hexo-abbrlink --save`

修改_config.yml文件中的配置项（记得把原来的permalink:删除掉）:

#设置永久链接
permalink: posts/:abbrlink.html  # 此处可以自己设置，也可以直接使用 :/abbrlink
abbrlink:
    alg: crc16   #算法： crc16(default) and crc32
    rep: dec     #进制： dec(default) and hex

插件设置

Abbrlink插件拥有两项设置选项:

alg: 算法(目前支持crc16和crc32算法，默认值是crc16)
rep: 形式(生成的链接可以是十六进制格式也可以是十进制格式，默认值是十进制格式)

示例

crc16 & hex
https://test.com/posts/55c6.html
crc16 & dec
https://test.com/posts/43212.html

crc32 & hex
https://test.com/posts/6ec16a2c.html
crc32 & dec
https://test.com/posts/1521457752.html

注意在生成之前就要改好算法和形式。不然后面再改的话会导致链接不统一。我就踩过坑，但后来是一个文章一个文章删除abbrlink:的值才改过来的，还好我文章不是很多。

话说最近看到了Hexo-abbrlink2这个插件，可以从1.html开始编。

PS：刚使用这个插件后，阅读人数和评论都会变为0，介意慎用！综上所述，这插件适合新站！

参考文章：

https://zhuanlan.zhihu.com/p/26625249

https://blog.csdn.net/wapchief/article/details/54602515

https://www.jianshu.com/p/f1005ae09e5a

https://blog.csdn.net/yimagudao/article/details/89524210

https://github.com/EYHN/hexo-helper-live2d/blob/master/README.zh-CN.md

https://zhuanlan.zhihu.com/p/169492685

技术教程

#杂谈

GitHub Pages+Hexo搭建个人博客

https://qwerx29.github.io/posts/39651.html

发布于

2022年5月8日

更新于

2022年8月8日

许可协议

NOI Linux的安装及其美化教程上一篇

国内外邮箱、电子邮件服务大全下一篇