GitHub 个人博客搭建

准备工作

Node.js

下载 node.js

Hexo

安装 hexo

执行如下命令

npm install -g hexo-cli

我这里安装报错了. 原因是安装全局模块没有权限

参照这个解决方案

选择了修改全局安装路径的方法:

创建一个默认的安装路径

mkdir ~/.npm-global

修改npm默认配置

npm config set prefix '~/.npm-global'

配置环境变量, 由于我使用的是 zsh, 所以编辑

vi ~/.zshrc

增加一行

export PATH=~/.npm-global/bin:$PATH

之后

source ~/.zshrc

初始化

GitHub 配置仓库

必须使用 username.github.io 的命名, 如我的 hanyx1992.github.io

本地

在本地选择安稳的地方创建文件夹作为自己的博客工程, 在目录中执行如下命令来进行初始化

hexo init
npm install
npm install hexo-deployer-git --save

配置

主题

我选择了Material

  1. 下载了最新的包并解压缩.

  2. 将整个文件夹命名为 material

  3. 移动到工程目录 博客/themes/

  4. 将主题配置 博客/themes/material/_config.template.yml 改名为 _config.yml 以便生效

  5. 修改博客配置 博客/_config.yml 中的 theme 主题字段值为 material

主题配置可参照 Material 详细文档

全局配置

修改博客配置 博客/_config.yml 中来关联 GitHub 仓库

deploy:
  type: git
  repository: https://github.com/hanyx1992/hanyx1992.github.io.git
  branch: master

其他配置可参照 Hexo 详细文档

代码高亮

hexo 自带的代码高亮几乎没有什么效果, 我这里使用了Google-code-prettify.

禁用默认高亮插件

博客/_config.yml 中将 highlight 插件禁用, 找到如下部分都改成 false 即可

highlight:
  enable: false
  line_number: false
  auto_detect: false
  tab_replace:

配置高亮风格

在最新版本 1.5.6 的 Material 中已经集成了 prettify, 无需引入了. 只需要在主题配置 博客/themes/material/_config.yml 中, 找到以下地方, 修改 enabletrue 即可

prettify:
  enable: true
  theme: "tranquil-heart"

Material 中的 Prettify 主题在目录 material/source/css/prettify 中, 配置只需要加名称即可, 不需要加 .min.css , 我这里随便选择了 tranquil-heart.

部署

//生成文件
hexo g
//本地服务预览
hexo s
//部署到GitHub
hexo d

Reference

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