Hexo + GitHub Pages
可以更加专注于博客内容,而不是要如何搭建一个博客网站。
Hexo
是一个快速、简洁且高效的博客框架。Hexo
使用Markdown
(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。GitHub Pages
是一个静态网站托管服务,直接从Github
仓库托管你个人、公司或者项目页面 ,并且不需要你写任何后端语言来支持。GitHub Pages
的服务是免费的,但是也有一些限制*:GitHub Pages
网站可能不超过1 GBGitHub Pages
网站每月的带宽限制为100GBGitHub Pages
每小时更新不超过 10 次
优点
- 生成静态页面,访问速度快
- 免费,不需要服务器不需要后台
- 可以绑定自己的域名
- 基于
Github
版本管理,可修改和恢复历史版本 - 博客内容可以轻松打包、转移、发布到其它平台
准备工作
安装前,必须检查电脑中是否已安装下列应用程序:
本文使用的环境
- Window 10
- NodeJS 8.9.3 + npm 5.5.1
- Git 2.21.0
- Hexo 3.8.0
设置 Git 和 GitHub Pages
检查确定 Git
连接到 Github
。(具体参考Git安装教程)
SSH Key 配置
——使用 ssh key
来解决本地和 Github
服务器的连接,获取 Github
权限。
1 | $ cd ~/. ssh #检查本机已存在的ssh密钥 |
创建仓库 Repo
新建一个 user.github.io
的仓库,例如用户名是naed,那么 naed.github.io
。(必须是自己的用户名)。
具体参考 GitHub Pages官方网站教程
绑定域名
- 先
ping
一下刚创建的naed.github.io
获取IP - 域名解析,A类型以
@
的记录指向IP,CNAME以www
的记录指向域名naed.github.io
// TODO,有待验证
使用 Hexo 搭建博客
Hexo
搭建的详细内容建议参考 Hexo官方文档
安装 Hexo
打开 Git bash
中执行 npm install -g hexo-cli
安装 Hexo
1 | $ npm install -g hexo-cli |
初始化 Hexo
两种方式进行初始化
- 在路径
/d/Dean/Workspace/hexo/
创建blog
文件夹,在此打开Git bash
执行命令hexo init
进行初始化。(建议选择以后不随意变动的文件位置)
1 | $ hexo init |
- 或者,打开
Git bash
用命令进入文件夹进行初始化
1 | $ cd /d/Dean/Workspace/hexo/blog |
初始化完成后会生成目录结构。此路径 /d/Dean/Workspace/hexo/hexo/blog
将作为 Hexo
的根目录
1 | $ cd /d/Dean/Workspace/hexo/hexo/blog |
生成静态文件夹
执行命令 hexo d
生成网站静态文件到默认的 public
文件夹1
$ hexo g
hexo g
是hexo generate
的缩写public
文件夹将会是Github
上面显示的文件
启动本地服务器
1 | $ hexo s |
hexo s
是 hexo server
的缩写,启动本地服务器,可在浏览器输入 http://localhost:4000/
打开预览。
通过Hexo更新到Github
- 打开
Git bash
执行npm install hexo-deployer-git --save
安装依赖包 - 不安装可能会有报错
ERROR Deployer not found: git
的情况*。
1 | $ npm install hexo-deployer-git --save |
接着配置 _config.yml
中有关 deploy
的部分。(部署到 Github repo 仓库)
- 打开
/d/Dean/Workspace/hexo/blog
文件夹的_config.yml
文件 repo
建议使用SSH
,repo
也可以是repository
- 在冒号后面必须有一个空格
1 | deploy: |
完成添加后,在 Git bash
使用 hexo d
或者 进行部署即会把修改的文件更新上传到 Githubhexo g -d
写博客
新建文章
在博客目录中打开 Git bash
中执行命令 hexo new "new post"
即可新建一个以 new post
为标题的 md
文件。
1 | $ hexo new "new post" |
Hexo
会在source
下的_posts
里面生成相关md
文件。- 编辑并保存md文件,在
Git bash
执行hexo s -g
, 打开http://localhost:4000/
刷新就能看到修改。(同一个文件继续编辑,直接刷新就能看到修改)
组合命令1
2
3
4hexo s -g #生成并本地预览
hexo d -g #生成并上传
hexo clean && hexo d -g #清理缓存和生成上传
设置文章摘要
新建的文章,默认在列表页显示文章全文。在文章的 md
文件中,插入 <!-- more -->
到文章中,Hexo
会自动识别摘要并添加 Readmore
按钮。
1 | <!-- more --> |
设置文章 Tags
打开新建的 md
文件,设置文章的 tags
。
两种方式
1 | title: Tags Testing Article |
或者
1 | title: Tags Testing Article |
修改主题
NexT 主题安装
这里以主题 NexT 作为示例。
使用 Git
安装(这一方式将为你下载完整仓库,其中包含 .git
目录)1
2$ cd hexo
$ git clone https://github.com/theme-next/hexo-theme-next themes/next
安装完成后,会在 themes
目录下找到
打开 _config.yml
并找到 theme
修改为 next
,接着执行 hexo clean
和 hexo g
重新生成进行启用新主题。
NexT 启用本地搜索
- 安装。在
Hexo
的根目录/d/Dean/Workspace/hexo/hexo/blog
的以下面的命令安装hexo-generator-searchdb
1 | $ npm install hexo-generator-searchdb --save |
Hexo
配置。在Hexo
根目录的_config.yml
文件添加以下内容
1 | search: |
- NexT 配置。在
theme
文件夹进入next
文件夹,打开next
的_config.yml
文件,启用本地搜索enable: true
1 | # Local search |
NexT 其他设置
- 参考 NexT User Docs – Starting to Use ,新建About页和tags页、设置sidebar头像、修改默认语言、sidebar返回顶部等。在
themes/next/_config.yml
可以查看更多设置 - 在主题
_config.yml
中的busuanzi_count
启用enable
不蒜子访客计数显示功能。执行hexo d -g
部署到线上即可显示正常。
NexT 效果展示
Hexo 多台电脑设备同步管理
// TODO,后续更新
Hexo 常用命令
来源参考
hexo init
Hexo初始化1
$ hexo init [folder]
- 新建一个网站。如果没有设置
folder
,Hexo
默认在目前的文件夹建立网站
hexo s
启动本地服务器,默认访问地址: http://localhost:4000/
1
$ hexo s
hexo s
是hexo server
的缩写,命令效果一致- 对
Hexo
根目录_config.yml
的修改,需要重启本地服务器后才能预览效果 Ctrl + c
关闭server
hexo new
新建标题为 new post
的文章1
$ hexo new "new post"
- 在博客目录下的
source
->_posts
文件夹中新建md
文件,在标题可在对应md
文件修改 - 如果标题包含空格的话,请使用引号括起来
hexo d
1 | $ hexo d |
- 部署。自动生成网站静态文件,并部署到设定的仓库
hexo d
是hexo deploy
的缩写,命令效果一致
hexo clean
1 | $ hexo clean |
- 清除缓存文件
db.json
和已生成的静态文件public
- 在某些情况(尤其是更换主题后),如果发现对站点的更改不生效,可能需要运行该命令
hexo g
1 | $ hexo g |
- 编辑在博客目录下的
source
->_posts
文件夹中md
文件,使用hexo g
命令后,Hexo会把md
文件生成html
的网站静态页面到public
文件夹 - 便于查看网站生成的静态文件或者手动部署网站
hexo g
是hexo generate
的缩写,命令效果一致
hexo new page
1 | $ hexo new page Aboutme |
- 新建一个标题为
Aboutme
的页面,默认链接地址为主页地址/aboutme/
- 标题可以为中文,但一般习惯用英文
- 页面标题和文章一样可以随意修改
- 页面不会出现在首页文章列表和归档中,也不支持设置分类和标签
hexo version
1 | $ hexo version |
- 显示
Hexo
版本
hexo help
1 | $ hexo help |
- 查看帮助,指令和操作