基于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的个人博客


最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,362评论 5 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,330评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,247评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,560评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,580评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,569评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,929评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,587评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,840评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,596评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,678评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,366评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,945评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,929评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,165评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,271评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,403评论 2 342

推荐阅读更多精彩内容