Hexo+GitPage+Gitments+yilia博客搭建手记

发表于 | 分类于 |

说明: 经过两天的折腾, 也算把这个事情搞定了,顺手写下这边手记.笔者之前已经使用SpringBoot搭建了个人博客站点, 博客预览 . 完整代码已开源,可见博客站点的说明页. 而之所以又着手搭建这个站点,主要考虑到,那个服务器租期为一年,后期维护麻烦,为减少成本,打算慢慢迁移至此. 这边随笔主要记录使用Hexo+GitHub搭建博客的流程,希望对您有所帮助,喜欢点个Star,谢谢.

1. 主要步骤

  • 安装Git、 Node.js(本文示例为Windows平台)
  • 创建Github仓库,开启GitPage
  • 安装、使用Hexo,更换主题
  • 图床、 Markdown编辑器
  • 多端同步，Gitment评论等其他问题

2. 安装Git、Node.js

  • 安装Git，本文就不详述步骤，具体可参考-廖雪峰Git教程
  • 安装Node.js，下载网站，笔者下载的是LTS-Windows64位 5.6.0安装版本
  • 安装时注意保持勾选 add to path，任意目录右键 Git Bash Here，输入 npm -v，检验安装是否成功，显示版本号，则表示正常

3. 创建GitHub仓库，设为GitPages

  • 创建一个仓库，命名为 用户名.github.io,如 briarbear.github.io

  • 这样的命名即为开启 GitPages，点开仓库的setting，可以看到GitHub Pages说明

  • 则博客站点域名即为 用户名.github.io

4. 安装Hexo

  • 安装教程可参看 官方文档，中文版，详尽易懂

  • 主要步骤为

    • 安装： npm install -g hexo-cli

    • 初始化：

      1
      2
      3
      $ hexo init <folder>
      $ cd <folder>
      $ npm install

    • 配置：重点配置deploy ，使用Git同步方式与GItHub同步，具体详见 官方说明

      如笔者的配置，完整的详细配置，可见文末本博客站点的开源：

1
2
3
4
5
6
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy: 
type: git
repo: git@github.com:briarbear/briarbear.github.io.git
branch: master

  • 安装Git插件：npm install hexo-deployer-git --save

    • 启动：

  • 此时就可以依次输入命令； hexo clean， hexo generate, hexo server

  • 即本地启动完成：在浏览器输入：http://localhost:4000,即可以看到初始效果

5. 使用Hexo

  • 常用命令:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
hexo init [folder] # 新建一个网站。如果没有设置 folder ，Hexo 默认在目前的文件夹建立网站。

hexo new [layout] <title>
#新建一篇文章。如果没有设置 layout 的话，默认使用 _config.yml 中的 default_layout 参数代替。如果标题包含空格的话，请使用引号括起来。

hexo generate  # 生成静态文件。-d 文件生成后立即部署网站 -w 监视文件变动 
hexo g #简写

hexo publish [layout] <filename>  # 发表草稿。

hexo server
# 启动服务器。默认情况下，访问网址为： http://localhost:4000/。
# -p 重设端口 -s 只使用静态文件 -l 启动日志记录

hexo deploy  # 部署网站。-g 部署之前预先生成静态文件
hexo d #简写

hexo clean  #清除缓存文件 (db.json) 和已生成的静态文件 (public)。

6. 使用主题

hexo官方提供了大量的 优秀主题，如果选中某款主题，点击主题，移至页面底部，一般都可以看到主题的版权说明，点击即可以进入主题的github仓库，如选中第一个主题A-RSnippet，下图所示：

  • 笔者使用的 yilia主题
  • 在hexo的目录中，主题文件位于 ./themes, 主题的主要流程
    • 在主题目录中，git clone 主题仓库
    • 修改主题的配置文件：_config.yml
  • 具体使用流程，可参考一个 yilla主题使用教程
  • 如果喜欢笔者的主题,已做了一些修改，可以在文本的github仓库中clone下来，./themes/yilla

7. Markdown编辑器与图床

  • 笔者使用的 Typora编辑器，一款非常优秀的markdown编辑器，满足你对markdown编辑器所有的幻想，（即时预览，仅此一家）
  • 在hexo中，使用hexo new新建文章后，再去./source/_posts目录下找到目标文档，使用Typora编辑器编辑
  • 而使用Markdown编辑器，我们经常会遇到图片问题，这里提供两种处理方案
    • 第一种方案：【相对路径】在hexo配置文件中，开启 post_asset_folder: true，新建文件会生成文件对应的文件夹，在markdown中可以使用相对路径来引用图片
    • 第二种方案：【绝对路径】笔者使用的方案，使用在线的图床，这样可以更好的方便使用markdown文件，在任意地方打开都能正确的渲染，而使用绝对路径，就得使用图床网站来保存图片
  • 关于图床
    • 推荐 七牛云，实名认证，送免费存储空间，存储图片够用
  • 但是，使用图床，如果我们每次使用一个图片，都要先上传到图床，再复制外链，再粘贴 ，这样效率就低的可怕，有没有一种工具，我复制一张图片，后台自动上传到图床，然后返回外链至剪切板，这样在markdown编辑器中直接就可以使用呢？
  • 有，当然有！！！！Mac下有付费的应用，Windows下推荐 qImage，使用方法参看具体链接
  • 最终效果：使用 Alt + S 截图（推荐截图贴图软件 snipaste ），复制图片，在typora中使用快捷键 Ctrl + Alt + V，则直接生成图片

8. 多端同步与Gitment

  • 在hexo中，通过git连接github仓库，它同步的文件实际上仅为经过hexo生成的静态文件，那么怎样将源文件在多端同步，这样是可以在多台设备都可以编辑博客，解决思路：Git 分支

  • 详细的解决方案，知乎：使用hexo，如果换了电脑怎么更新博客？

  • 到此为止，静态博客基本可用，但由于是静态网站，无法评论，解决思路是结合Gitments来解决，同时，yilia主题也提供了多种评论方式，具体可参看 wiki

  • 而使用Gitments，使用教程

  • 笔者的配置文件

相关链接