基于Hexo和Github Pages搭建个人博客

前言

如果要搭建一个自己的个人博客,按照往常的经验,首选肯定是WordPress这种博客平台,基于PHP+MYSQL的黄金组合,买个服务器、买个域名,安装发布。过程繁琐不说,更是要花费一定的金钱。由于本人平时就是Markdown和Github的重度使用者,Github Pages就自然是首选了,至于为什么是Hexo而不是Git自家的Jekyll,这个看个人喜好吧, 因为两者都是基于Markdown的静态博客工具。

Github Pages是Github的一个网站工具,通过在Github中建立名字为username.github.io的项目(username就是你在Github上的用户名),Github就会自动解析你在该项目中的html内容。通过访问http://username.github.io就能访问你的网站了。

Hexo是一个支持Markdown进行写作,并解析成静态html页面,支持一键部署到Github上,与Github Pages无缝衔接。

所以基于Hexo和Github Pages的建站步骤应该是这样子的:

  1. 申请Github账号(如果没有)
  2. 配置Github Pages
  3. 安装Hexo
  4. 建站
  5. 配置
  6. 发布文章

Github Pages

Github账号的申请这里就不描述了,不懂的可以百度下,然后进入Github的个人页面,新建仓库(Repository),名称为username.github.io,注意:username必须和用户名一致

新增仓库

是的,到这里就已经可以具备使用能力了,是不是很简单,详细描述可以参考:Github Pages

安装Hexo

Hexo是基于Node.js,所以安装Hexo之前,需要安装Node.js,还有就是Git客户端也是必须的。如果2个都已经具备了,就开始安装Hexo吧,一个命令搞定!

$ npm install -g hexo-cli

建站

OK,下面就开始用Hexo建立你的站点目录吧, 具体可参考官网文档:官方文档

第一步:建立一个自己的站点,比如我的叫ioman

$ hexo init ioman
$ cd ioman
$ npm install

站点结构如下:

.
├── _config.yml     # 配置文件,大部分的配置都靠它
├── package.json    # 应用程序的信息
├── scaffolds       # 模板信息,创建文章时使用
├── source              # 资源和Markdown文件存放地方
|   ├── _drafts     # 草稿,当layout指定为draft时,默认不解析发布
|   └── _posts      # 准备发布的文章,每次generate会解析该目录下的文章
└── themes              # 主题, 静态文件会根据主题来生成

配置

建站完成之后,当然是要配置了,这里最重要的就是_config.yml文件,可以参考官方文档,记得要配置Github账号信息, 需要填写type, repo, branch三个配置, typebranch一般是固定的,repo请从自己的Github项目上复制。

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: https://github.com/leeis/leeis.github.io.git
  branch: master

写文章和部署

好了,现在万事俱备,可以开始写文章了, 一般的操作流程是:

新建文章

命令:hexo new [layout] <title>,可缩写为hexo n
这里的[layout]就是布局,默认布局配置在scaffolds目录下,分别是draft,post,page.

  • draft是草稿,当执行hexo n draft hello时,会在source/_draft下新增一个hello.md,在草稿中的文章默认不会被发布到网站上,直到你执行hexo publish命令将草稿中的文章发布。
  • post是默认布局,如果你想立刻开始写文章,可以直接hexo n hello,文章会存放在source/_post
  • page是独立的页面,当执行hexo n page hello时, 会在source/下生成对应的目录hello,该独立的页面需要单独引用,不会出现在文章中,比如可用于生成关于作者的about页面。
发布草稿

命令:hexo publish [layout] <title>,可缩写为hexo p
publish命令是将_draft中的文章发布到_post中

生成静态文件

命令:hexo generate,可缩写为hexo g
此命令将md文件解析成静态html文件。可选参数--watch,将观察文件的变化,自动解析,不需要再执行hexo g命令

部署到Github

命令:hexo deploy,可缩写为hexo d
当配置了Git服务器信息之后,执行该命令之后会将public目录中的文件推送到远程Git服务器上,这时候再访问leeis.github.io就自动更新了,一切就是如此简单。
hexo d -g 可以在部署之前重新生成静态文件,此命令和hexo g -d效果一样。

补充命令

hexo clean 用于清除本地静态页面缓存,可以在generate之前clean一下。
hexo server 自带的服务器,可用于本地测试,启动之后,默认端口是4000,可以访问http://localhost:4000进行本地预览,-p参数可更改端口。--draft命令可进行草稿的预览。

更换主题

主题就是指博客的样式,主题内容存在目录themes目录下,官方默认的主题是landscape,如果需要更换主题,步骤如下:

1.去主题页面中选择自己喜欢的主题,可以点击图片进入作者的主页浏览,如果喜欢的话,直接点击标题进入作者的Github。

官网主题页面

next主题的Github

2.从github上下载主题文件到本地,进入到本地站点根目录,执行如下命令,最终将theme文件下载到本地的themes/next目录

git clone https://github.com/iissnan/hexo-theme-next.git themes/next

3.更改站点配置文件_config.yml使主题生效

_config.yml

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next

备注:一般需要根据主题的README.md描述进行相关的配置修改,主要存在主题文件夹的_config.yml中。

Front-matter

Front-matter是指在文章开头部分的配置说明,可以指定文章的分类、标签、是否开启评论功能等等,具体参数可参考官方Docs

有些主题对文章没有开启全局目录功能,可以通过toc: true内嵌文章的目录结构,这个参数官网没有提及,可以参考。

Github Pages绑定域名

1.获取github pages主页的ip地址,比如我的地址是leeis.github.io

2.修改域名解析方式将, 将记录值修改为获取到的IP地址

3.进入github的leeis.github.io项目,进入setting中进行下图设置,配置自己的域名

这样等待10分钟左右就能正常解析了。

补充说明

Q: 为什么会出现Cannot GET /tags/Cannot GET /categories/

A: 不管是任何的主题,凡是从菜单中进入分类标签的,都是进入单独的page页面,需要我们手工新增。

1.分别执行hexo new page categorieshexo new page tags,新增categories和tags页面
2.修改/source/categories/index.md,添加type: "categories"
3.修改/source/tags/index.md,添加type: "tags"

Q: 语言如何切换

A: 在每个theme中,都会有对应的language目录,上面的文件名就是对应的语言,在站点配置文件中我们可以指定语言,即名称要对应,如next主题的中文默认名称叫zh_Hans,我第一次安装的时候就找不到,因为正常的中文语言一般使用zh_CN,所以如果语言切换有问题,记得核对下名字是否匹配。

Q: 如何自己开发主题

A: 一般的,要先了解主题的目录结构和构成,通过node.js的模板语言EJS或者Swig进行开发, 可以通过分析各个主题开发者的代码进行研究。可参考:写一个自己的Hexo主题,从零开始制作 Hexo 主题

Q:为什么Next主题中字数统计插件无效

A: 需要安装插件
npm install hexo-wordcount --save

Q:如何启用Ftp部署方式

需要安装ftp部署插件,支持ftpsyncsftp

1.安装:
FTPSync:npm install hexo-deployer-ftpsync --save
sftp:npm install hexo-deployer-sftp --save

2.修改_config.yml配置:

deploy:
  type: sftp
  host: xx.xx.xx.xx
  user: root
  pass: abcdefg
  remotePath: /
  port: 22

3.重新部署发布
hexo g -d

资料来源

Hexo Docs
Next主题文档
ejs.co ��
Hexo小书


文章来自IOMan的个人博客


推荐阅读更多精彩内容