Hexo + GitHub 搭建我的个人博客记录

💙 搭建教程

参考了网上一些教程和官方文档：

对主题进行轻微改动，最终效果如下：
效果图

📗 搭建过程

  1. 在GitHub创建仓库dreamfields.github.io，并安装Hexo、Git、Node

  2. 本地拉取仓库，创建新文件夹blogs，运行命令hexo init进行初始化，并运行npm install安装依赖
    初始化过程
    初始化结果

  3. 获取主题ayer，在themes文件夹下多出一个文件夹，按照其GitHub上的教程进行相关插件的安装并设置相关页面—— Shen-Yu/hexo-theme-ayer

  4. 调整相关配置，包括主题的配置文件和hexo的配置文件

  5. 回到GitHub仓库，添加分支gh-pages，第4步中在hexo的配置文件中已经为部署到该分支上，此时运行命令hexo deploy进行部署即可

📋 常用命令

创建新博客

1
$ hexo new "My New Post"

创建新页面

1
$ hexo new page newPageName

生成静态文件

1
$ hexo generate (可缩写为 hexo g)

启动本地服务

1
$ hexo server (可缩写为 hexo s)

部署到远程网站

要先在_config.yml进行配置

1
$ hexo deploy

❌ 问题与解决

图片的添加

  • 首先要在配置文件_config.yml中进行如下更改
1
2
3
4
post_asset_folder: true
marked:
  prependRoot: true
  postAsset: true
  • 在引用的过程中，直接使用![图 1](Hexo-GitHub搭建博客/001.png)来引用同名资源文件夹下的001.png
  • 其它引用方式可见官方文档：Hexo文档-资源文件夹

Markdown的编辑

用VS Code尝试编辑了.md文件，效果一般，后来安装了几个插件，最终能基本上达到CSDN的在线编辑效果：

  • Markdown All In One：是一个组合包，一股脑把最常用的Markdown优化都给你装好
  • Markdown Preview Github Styling：使用这个样式，在本地就能预览Markdown文件最终在Github Pages中显示的效果
  • Markdown Shortcuts：绑定了快捷键，方便编辑 
    1
    2
    3
    4
    5
    6
    7
    ctrl+L 添加链接
    ctrl+B 加粗
    ctrl+I 斜体
    ctrl+shift+L 为图片添加说明文字
    ctrl+M+C 代码块
    ctrl+M+I 内嵌行代码
    ctrl+M+M 组合键，显示所有编辑快捷选项
  • Markdown Paste：用于在.md文件中直接粘贴图片，点击右键进行添加，同时将配置设置为${fileBasenameNoExtension}，表示将图片默认保存到与本.md文件同名且不包含扩展名的文件夹中。前提是Hexo的_config.yml中已经开启了post_asset_folder: true，这样每次添加新博客的时候就会自动创建与.md文件同名的资源文件夹。

自动部署travis-ci

看到官方文档上写：Travis CI 应该会自动开始运行，并将生成的文件推送到同一 repository 下的 gh-pages 分支下，而我的博客仅在master上，况且配置的时候出了问题，干脆放弃挣扎…

目前代替的方式是每次写完博客直接使用命令行即可直接部署

1
$ hexo g -d

后来的后来，还是想尝试把自动部署弄好，按照官网的步骤来的（将 Hexo 部署到 GitHub Pages）但是卡到这一步：

发现是yarn和npm包的问题，查了一些博客后，修改.travis.yml文件如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
language: node_js
node_js: stable

install:
  - npm install

script:
  - hexo g
  - hexo d

after_script:
  - git config user.name "xxx"
  - git config user.email "xxx"
  - git add .
  - git commit -m "Update docs"
  - git push --force --quiet "https://${GH_TOKEN}@${GH_REF}" master:master  # 自动引用之前在travis官网设置的GH_TOKEN

branches:
  only:
    - master
env:
 global:
   - GH_REF: github.com/DreamFields/dreamfields.github.io.git # 我的仓库地址

于是乎，每次写完博客，就可以直接push到master分支（这个过程可以用SourceTree软件实现，方便一些），接着travis便会自动部署到gh-pages分支上：
自动部署完毕

但是修改完博客之后，push的时候发现：
拒绝合并不相关的历史

即配置的时候只将public文件夹提交到master分支，导致远程和本地代码冲突…接着用命令行git push -f强制提交，让master恢复，再修改配置文件。

之后对博客更新，更新内容不能同步，继续更改配置。

使用VS Code插件Code Runner一键部署并更新代码仓库

在自动部署这部分放弃挣扎后，通过使用Code Runner插件使我找到了更好的自动部署办法

  1. 安装插件

  2. 设置插件执行映射：设置-扩展-Run Code Configuration-Executor Map-在setting.json中编辑

  3. 编辑setting.json，添加"shellscript": " & \"C:\\Program Files\\Git\\bin\\bash.exe\"",即可

  4. 编写脚本文件finish.bash，放到最外层目录

  5. 将bash.exe所在的bin目录C:\Program Files (x86)\Git\bin加入环境变量

  6. 本地编辑完博客后，打开finish.bash文件后，点击运行按钮即可

评论功能

参考：https://zhuanlan.zhihu.com/p/581640626

显示设置：
去官网按照文档设置即可：valine官方文档-快速开始，接着在主题的配置文件下修改应用的id和key。

评论管理：

  • 由于Valine 是无后端评论系统，所以也就没有开发评论数据管理功能，需要自行登录Leancloud应用管理。

  • 具体步骤：登录 > 选择你创建的应用 > 存储 > 选择Class > Comment，然后就可以对评论管理。（ Leancloud网站）
    测试评论

管理评论

🎈 标签和分类

博客的标签是随缘添加，格式如下：

1
2
3
tags:
- 标签1
- 标签2

博客的分类是参考官方文档，搬运如下：

1
2
3
4
categories:
- [日记, 日记下分类1]
- [日记, 日记下分类2]
- [技术博客]

🔵 展望

  • [x] 评论系统完善
  • [ ] 自动部署travis-ci
  • [ ] 首页图片加载过慢优化
  • [ ] 在线.md文件编辑功能
  • [ ] “about关于我”界面，使用模板打造个人简历
  • [ ] …