Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。
这里我把个人博客托管在GitHub Pages上。GitHub Pages是一种静态站点托管服务,每个GitHub帐户或组织都可以有一个站点。
准备工作
安装 Hexo 前要先安装:
- Node.js
- Git
Git初始化安装配置详见:GitHub 初始化配置
Hexo原理简要介绍
由于GitHub Pages存放的都是静态文件,博客存放的不只是文章内容,还有文章列表、分类、标签、翻页等动态内容,假如每次写完一篇文章都要手动更新博文目录和相关链接信息,那就太繁琐了,毕竟博客的关键是内容,hexo做的就是将这些md文件都放在本地,每次写完文章后框架会批量生成相关页面,然后我们只需要将生成的静态文件提交到GitHub即可。
注意:建议使用Git Bash
来执行后续的所有命令。
GitHub Pages上搭建博客
GitHub创建仓库
新建一个名为你的用户名.github.io
的仓库,比如说,如果你的GitHub用户名是dta0502
,那么你就新建dta0502.github.io
的仓库,将来你的网站访问地址就是 https://dta0502.github.io。
由此可见,每一个GitHub账户最多只能创建一个这样可以直接使用域名访问的仓库。
几个注意的地方:
- 注册的邮箱一定要验证,否则不会成功
- 仓库名字必须是:
username.github.io
,其中username是你的用户名 - 仓库创建成功不会立即生效,需要过一段时间
Hexo安装
1 | npm install -g hexo |
Hexo初始化
在想要的路径下新建一个名为hexo的文件夹(名字可以随便取),比如我的是D:\document\GitHub\hexo
,这个文件夹内就是你的Hexo博客的源文件:
1 | cd /d/document/GitHub/hexo/ |
输入以上命令后,hexo会自动下载一些文件到这个目录,包括node_modules
,其中比较重要的几个文件的目录结构如下:
1 | . |
注意:hexo有2个_config.yml
文件,一个是站点根目录下的_config.yml
,一个是theme(主题)下的_config.yml
文件。
博客生成、预览:
1 | hexo g # 生成 |
执行以上命令之后,hexo就会在public文件夹生成相关html文件,这些就是你博客的静态文件,后续需要把这些提交到GitHub上。
hexo s
是开启本地预览服务,打开浏览器访问http://localhost:4000
即可看到内容,很多人会碰到浏览器一直在转圈但是就是加载不出来的问题,一般情况下是因为端口占用的缘故。
修改主题
这里以hexo-theme-yilia
这个主题为例做一下说明。
首先下载hexo-theme-yilia
这个主题:
1 | cd /d/document/GitHub/hexo/ |
下载的主题文件都在theme目录下。
然后我们将Hexo根目录下的_config.yml
中的theme: landscape
改为theme: yilia
,然后重新执行hexo g
来重新生成。
注意:如果出现一些莫名其妙的问题,可以先执行hexo clean
来清理一下public的内容,然后再重新生成。
部署到GitHub
如果你一切都配置好了,接下来就是把博客部署到GitHub上:
1 | hexo d |
注意:
- ssh key配置好。
- 配置
_config.yml
中有关deploy的部分(注意缩进)。
1 | deploy: |
直接执行hexo d
的话一般会报如下错误:
1 | Deployer not found: git |
这是因为缺少了一个插件,我们可以通过如下命令安装:
1 | npm install hexo-deployer-git --save |
然后输入hexo d
就会将本次有改动的代码全部提交。
常用的hexo命令
- 常见命令:
1 | hexo new "postName" # 新建文章 |
- 缩写命令:
1 | hexo n == hexo new |
- 组合命令:
1 | hexo s -g # 生成并本地预览 |
写文章
我们可以在hexo根目录下执行命令:
1 | hexo new 'my-first-blog' |
hexo会帮我们在_posts
下生成相关md文件,我们只需要打开这个文件就可以开始写博客了,用这个命令的好处是帮我们自动生成了文章创建时间。
默认情况下,生成的博文目录会显示全部的文章内容,我们可以在文章合适的位置加上<!--more-->
来设置文章摘要的长度。
举例来说:
1 | Hexo 是一个快速、简洁且高效的博客框架。 |