Github Pages + Hexo 博客搭建记录

这篇文章对搭建这个Github Pages博客的过程、引用资料做一个记录。

Step 1: 创建Repo

按着Github Pages官网的指引一步步做下来即可。

Step 2: 配置所需环境

依赖的环境包括:

直接按着官网的说明下载安装即可,网上也有很多教程了。

Step 3: 安装hexo

hexo的官网是https://hexo.io/zh-cn/,使用npm安装hexo,运行:

1
npm install -g hexo-cli

Step 4: 创建博客

安装完hexo之后,在工作环境目录下,运行:

1
hexo init blog

hexo会在当前目录下新建一个文件夹blog,这个文件夹就是本地维护的博客的根目录。运行:

1
cd blog

进入到此目录之中,会发现hexo已经为你创建好了几个文件和文件夹。其中source/_post/就是存放发布的博文的文件夹,_config.yml是站点的
配置文件,例如可以配置站点的title等等。

hexo的命令很简单,日常使用经常用到的就4个命令:

  • hexo new [name]: 发布一篇新的博文,可简写为hexo n [name]
  • hexo generate: 生成静态站点,可简写为hexo g
  • hexo server: 在本地运行服务端,可简写为hexo s
  • hexo deploy: 部署静态站点,可简写为hexo d

当运行hexo n [name]的时候,会在source/_post文件夹下新建叫作[name].md的一个文件,表示你新需要发表的博文。随后你只需要对这个文件做修改即可。

当运行hexo g时,会在blog目录下生成public的一个文件夹,就是根据当前的项目情况生成的静态站点,已生成的静态站点可以通过hexo clean清除。

运行hexo s会在本地启动一个服务(默认4000端口),你可以通过浏览器访问http://localhost:4000/,看到生成的博客的样子。

运行hexo d会基于你在_config.yml中的deploy配置,将生成的静态站点通过你所指定的方式部署。

我的需求就是需要将生成的静态站点部署到之前创建的yym6472.github.io的Repo之中,因此需要修改根目录下的_config.yml文件,找到deploy对应的地方,修改为:

1
2
3
4
deploy:
type: git
repo: git@github.com:yym6472/yym6472.github.io.git
branch: master

这样一旦运行hexo d就会把生成的静态站点push到我的Repo上,从而实现部署。

使用git部署hexo需要额外安装一个工具,通过如下命令

1
npm install hexo-deployer-git --save

另外这里配置多个部署方式也是可以的,详见hexo的官方文档

Step 5: 使用主题

blog目录下,会发现有一个themes的文件夹,这里就是存放主题的文件夹了,每个主题将作为一个文件夹存放在其中,初始的情况应该是只有一种主题,叫作landscape。在运行hexo g的时候,会根据你配置的主题生成不同风格的站点。配置主题在站点的配置文件_config.yml中,能发现一行配置:

1
theme: landscape

这里就指定了当前博客的主题使用目录theme/landscape/中的主题。你也可以去官方的主题网站选取自己心仪的主题。

更换主题的方法为:

  1. 点击对应主题的标题(是那个蓝字的标题而不是预览的图),进入到github的项目页面
  2. 将对应的项目clone到blog/themes/文件夹下,并且将_config.yml中的theme: xxx修改为对应的文件夹名字。
  3. 以上两条为一般的切换主题的方式,具体可能还需要做额外的一些操作(安装新的依赖、主题的配置项等等),具体需要查看主题作者的说明

我目前使用的主题为melody。另外还试过nexT,感觉也挺好看的。

其他的一些配置项(TODOs)

参考自melody主题的文档

  • social图标 (rss, search)
  • [未使用] 幻灯片slides主题页面
  • [未使用] 相册主题页面
  • 导航菜单的关于、留言板
  • follow me
  • [未使用] 广告标签(自定义区域)
  • 文章置顶功能
  • 评论系统
  • top image
  • 自定义主题颜色
  • 友链
  • 站点的图标更新
  • about页面更新(版权等)
  • [未使用,感觉Github Pages默认的就够用了] 404page
  • [是可以的,但暂时没有需求] 能否自定义主题页面?
  • hexo提供的一些特性,可能以后会用到
Author: yym6472
Link: https://yym6472.github.io/2019/04/27/Github-Pages-Hexo-博客搭建记录/
Copyright Notice: All articles in this blog are licensed under CC BY-NC-SA 4.0 unless stating additionally.