GitHub 个人博客搭建
准备工作
Node.js
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
下载了最新的包并解压缩.
将整个文件夹命名为
material
移动到工程目录
博客/themes/
中将主题配置
博客/themes/material/_config.template.yml
改名为_config.yml
以便生效修改博客配置
博客/_config.yml
中的theme
主题字段值为material
全局配置
修改博客配置 博客/_config.yml
中来关联 GitHub 仓库
deploy:
type: git
repository: https://github.com/hanyx1992/hanyx1992.github.io.git
branch: master
代码高亮
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
中, 找到以下地方, 修改 enable
为 true
即可
prettify:
enable: true
theme: "tranquil-heart"
Material 中的 Prettify 主题在目录 material/source/css/prettify
中, 配置只需要加名称即可, 不需要加 .min.css
, 我这里随便选择了 tranquil-heart.
部署
//生成文件
hexo g
//本地服务预览
hexo s
//部署到GitHub
hexo d