Hexo GitHub Pages 搭建个人博客的心酸历程

Published: 2015-03-22 Updated: 2018-05-26

摘要: 在网站看了很多关于Hexo搭建GitHub Pages的相关文章, 按照文章上一步一步来似乎都未能成功. 现在看来可谓步步都是坑. 接下来我把我作为一个小白搭建blog的过程以及遇到的问题都记录下来, 以便缅怀下自己逝去的一个星期

前言

为什么使用Hexo, GitHub Pages的原因我这里就不说了, 太俗套了, 想了解的话大家自行baidu

念念碎: 为啥我就不能像大牛那样前言写的那么好呢rz~

使用GitHub Pages搭建blog的初衷

本人平时虽然不写blog, 但是习惯写笔记, 所有也积攒下来了不少的东西. 偶尔的也会翻出来看看, 那么问题来了, 虽然有分类但是查阅起来仍然不是很方便\(╯-╰)/. 其中也受GitHub分享精神的影响, 也就有了搭建个人blog的想法, 期初想使用大名鼎鼎的wordpress, 后来在找空间时才得知GitHub Pages也能搭建blog, 瞬间感觉好牛的说

念念碎: 其实最主要的原因是逼格实在是太高了, 说出去倍有面子*^ο^*

注册GitHub账号

这个是必须的, 自然不用多说
访问: https://github.com
注册实在比较简单, 这里就不说了, 实在不会的话就请自行baidu
不过要注意一点, 用户名和邮箱很重要, 别乱填

念念碎: google是什么伦家才不知道呢

新建GitHub Pages仓库

新建GitHub Pages实质上就是新建了一个对应的 (username).github.io 的GitHub repository
新建仓库
仓库名很重要
相当成功, 阶段性胜利

此时已经可以对外访问了(http://username.github.io/xxx), 什么你打开的是404, 那么就去确认下你的仓库里有没有文件 ,解决方法尝试上传一个文件到仓库内即可

是不是很简单, 没错就是这么简单. 当然作为程序员自然不能用直接写html页面的方法来些blog(GitHub Pages不支持动态语言, 自然不能直接用CMS咯, 估计我这样说有人要喷我了(ˇˍˇ), 我觉得作为小白这样理解就行了), 效率不高还很挫(主要是很挫). 那么问题又来了(我为什么要说又(^ω^)), 要怎样规避这个问题呢, 请接着往下看

安装相关软件

nodejs
Git

MacOSX

首先安装homebrew 使用OSX系统这么能不会用brew呢

1 2	$ brew install -g nodejs $ brew install -g git

Linux

Git直接用源安装
nodejs貌似不推荐用源安装, 找到一篇帖子Linux下Nodejs安装（完整详细）没试, 不行别怪我

Windows

额, 上面官网直接二进制包

配置ssh-keygen

也可以不配置, 不配置的话每次向GitHub提交的时候需要输入账号密码, 比较麻烦, 推荐配置一下

生成ssh key

$ ssh-keygen
Generating public/private rsa key pair.
Enter file in which to save the key (/Users/your_user_directory/.ssh/id_rsa):<回车>
Enter passphrase (empty for no passphrase):<输入加密串, 也可以不输, 直接回车>
Enter same passphrase again:<再次输入加密串, 也可以不输, 直接回车>

The key's randomart image is:
看到这个表示成功了

添加ssh key到GitHub

1	$ less ~/.ssh/id_rsa.pub

拷贝里面的字符串搞GitHub保存
保存ssh key

使用Hexo搭建blog

这里以MacOSX为例, 其他平台大同小异

安装hexo

打开终端(Ps: 千万别问我终端是什么)
执行:

1	$ npm install hexo-cli -g

初始化一个hexo项目(工程)

执行:

1	$ hexo init hexo

会自动生成hexo相关文件

安装hexo依赖包(关键)

执行:

1 2	$ cd hexo $ npm install

不执行会各种报错, 然后就干脆不报错了

念念碎: 神坑啊, 看过的所有教程都没有这一步, 虽然使用nodejs这是常识, 但是作为小白::><::. 还好我最近在使用gulp, 也是几天后才突然想起来需要解决下依赖关系, 再次::><::

预览效果

1 2	$ hexo g $ hexo s

浏览器打开http://127.0.0.1:4000
默认4000端口

Ps: 先别管上面的命令上面意思, 下面再介绍

安装Hexo主题

我安装的是jacman, 你可以选择其他主题http://hexo.io/thenes/

1 2	$ cd hexo $ git clone https://github.com/wuchong/jacman.git themes/jacman

修改默认主题, 找到theme

1
2
3

$ vim hexo/_config.yml

theme: jacman

预览效果

1
2
3

$ hexo clean
$ hexo g
$ hexo s

需要注意的是_config.yml有两个, 分别是:
Hexo的配置文件:
hexo/_config.yml

Hexo模板的配置文件:
hexo/themes/landscape/_config.yml

RSS

hexo的一个RSS自动生成插件, 非常好用
安装RSS

1	$ npm install hexo-generator-feed --save

修改配置文件, 开启服务

$ vim hexo/_config.yml

plugins:
- hexo-generator-feed

feed:
  type: atom
  path: atom.xml
  limit: 20

Ps: 千万不要忘记 --save 要不然就要坑爹了

念念碎: 为什么我就是不去看官方文档呢, 被坑死活该

Sitemap

同上, hexo 插件

安装Sitemap

1	$ npm install hexo-generator-sitemap --save

修改配置文件, 开启服务

$ vim hexo/_config.yml

plugins:
- hexo-generator-sitemap

sitemap:
  path: sitemap.xml

编辑Hexo与GitHub通信

上面的操作完成了, 还只是个本地的blog. 接下来要和线上(GitHub)进行联动, 外网才能访问

关键配置如下

$ vim hexo/_config.yml

deploy:
  type: git
  repository: git@github.com:MakeHui/MakeHui.github.io.git
  branch: master

注意: 如果没有配置ssh key的话repository的值应该是
https://github.com/MakeHui/MakeHui.github.io.git
github.io前缀改成自己用户名, 也就是最上面新建的那个GitHub仓库

将文件部署到GitHub仓库

$ cd hexo
$ hexo clean
$ hexo g
$ hexo d

预览效果
http://username.github.io此时已经可以外网访问了本地修改的文件了

本人的完全配置

$ vim hexo/_config.yml

# Hexo Configuration
## Docs: http://hexo.io/docs/configuration.html
## Source: https://github.com/tommy351/hexo/

# Site
title: MakeHui's Blog
subtitle: あの日見た花の名前を僕達はまだ知らない。
description: 超平和バスターズはずっとなかよし
author:  MakeHui
email: hulifu521003@gmail.com 
language: zh-CN

# URL
## If your site is put in a subdirectory
url: http://huyaohui.com
root: /
permalink: :year/:month/:day/:title/
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code

# Directory
source_dir: source
public_dir: public

# Writing
new_post_name: :title.md # File name of new posts
default_layout: post
auto_spacing: false # Add spaces between asian characters and western characters
titlecase: false # Transform title into titlecase
external_link: true # Open external links in new tab
max_open_file: 100
multi_thread: true
filename_case: 0
render_drafts: false
post_asset_folder: false
highlight:
  enable: true
  line_number: true
  tab_replace:

# Category & Tag
default_category: uncategorized
category_map:
tag_map:

# Archives
## 2: Enable pagination
## 1: Disable pagination
## 0: Fully Disable
archive: 2
category: 2
tag: 2

# Server
## Hexo uses Connect as a server
## You can customize the logger format as defined in
## http://www.senchalabs.org/connect/logger.html
port: 4000
server_ip: 0.0.0.0
logger: false
logger_format:

# Date / Time format
## Hexo uses Moment.js to parse and display date
## You can customize the date format as defined in
## http://momentjs.com/docs/#/displaying/format/
date_format: YYYY-MM-DD
time_format: H:mm:ss

# Pagination
## Set per_page to 0 to disable pagination
per_page: 10
pagination_dir: page

# Disqus
disqus_shortname:

# Extensions
## Plugins: https://github.com/tommy351/hexo/wiki/Plugins
## Themes: https://github.com/tommy351/hexo/wiki/Themes
theme: jacman
plugins:
- hexo-generator-feed
- hexo-generator-sitemap

#sitemap
sitemap:
  path: sitemap.xml

#Feed Atom
feed:
  type: atom
  path: atom.xml
  limit: 20

# Markdown
## https://github.com/chjj/marked
markdown:
  gfm: true
  pedantic: false
  sanitize: false
  tables: true
  breaks: true
  smartLists: true
  smartypants: true

# Stylus
stylus:
  compress: false

# Deployment
## Docs: http://hexo.io/docs/deployment.html
deploy:
  type: git
  repository: git@github.com:MakeHui/MakeHui.github.io.git
  branch: master

参数说明参考官方文档http://hexo.io/docs

念念碎: 好羞耻的subtitle, description不要在意^_^”

hexo命令

下面列车一些常用命令, 其他参考官方文档http://hexo.io/docs/

hexo n == hexo new "articleName"  # 新建文章
hexo g == hexo generate           # 生成静态页面至public目录
hexo server                       # 开启本地预览访问服务(默认端口4000，'ctrl + c'关闭server)
hexo d == hexo deploy             # 将.deploy_git目录部署到GitHub

评论系统

上面有说道GitHub Pages是不支持动态语言的, 自然就没法承载评论咯, 这里我们使用第三方评论系统来弥补这个不足之处(Ps: 也谈不上说明不足啦)

第三方评论系统

disqus
多说
hexo 默然使用disqus, 国内的话多说比较流行, 原因大家都懂的

申请多说域名

我这里以多说为例, 毕竟本地化的服务, 对国能的支持也好, 也就仅此而已吧
进入多说官网http://duoshuo.com

1. 注册账号, 略
1. 创建站点
  千万注意是http://duoshuo.com –> 我要安装
  不是http://dev.duoshuo.com –> 下载插件

念念碎: 不是很理解为什么设置里面没有新建站点, 我很好奇. 哎, 说多了都是泪

修改配置文件

1
2
3

$ vim hexo/themes/jacman/_config.yml

duoshuo_shortname: makehui

注意如果配置文件中又duoshuo_shortname这个参数的话就只需要把上面申请的多说域名的前缀填上就行, 如果只看到disqus_shortname这个参数的话就需要参考多说文档修改模板源码了http://dev.duoshuo.com/

如何写blog

高大上的东西来了, Markdown标记语法

常用Markdown语法

新建新的文章

1 2	$ hexo n test INFO Created: ~/Development/Site/hexo/source/_posts/test.md

也可以直接在hexo/source/_posts/直接新建*.md文件

$ vim hexo/source/_posts/test.md

title: "test" #文章页面上的显示名称，可以任意修改，不会出现在URL中
date: 2015-03-23 16:00:59 #文章生成时间，一般不改，当然也可以任意修改
categories: list #分类
tags: [tag1, tag2, tag3] #文章标签，可空，多标签请用格式，注意:后面有个空格
description: 附加一段文章摘要，字数最好在140字以内。
---

<!--more-->   # 更多 适用于`expand: true`避免首页列表一次把文章内容全部加载出来, 下面的点击进入正文才显示

# 一级标题
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题

"```"
代码快, 中间可以放置代码(Ps: 没有双引号)
"```"

`突出文板块`

[这是一个连接](http://www.google.com)

![这是一张图片](https://www.google.com.hk/logos/doodles/2015/emmy-noethers-133rd-birthday-5681045017985024-hp.jpg "alt") # alt可以不写

- 列表1
- 列表2
- 列表2
...

详细参考文档

番外CNAME域名解析

按照上面的流程走完了的相信你已经能使用http://username.github.io 访问你的个人blog咯, 那么左看右看是不是觉得仍然有点美中不足呢, 对就是域名的问题, 是GitHub提供的公共域名. 接下来我们就把它改成自己的域名吧

购买域名

这个就无所谓在哪买了, 不过个人也推荐几个网站买域名

Ps: 购买域名什么的就不说了, 比较简单, 花钱的东西能难倒那里去

切换DNS

推荐切换到DNSpod
免费DNS中是我用过的最好的, 最良心的DNS服务商了, 32个赞

切换方法参考官方文档support.dnspod.cn

其实不切换问题也不是很大, 随意就好

完成最后是这样的
添加解析地址

注意: GitHub Pages的IP地址有可能是回发生改变的, 详细请留意https://help.github.com

添加CNAME到GitHub仓库

1
2
3

$ vim hexo/source/CNAME

huyaohui.com

把上面做CNAME解析的域名写到CNAME文件里面去

Ps: source里的文件会文件会直接编译到.deploy_git, 除了两个特殊的文件夹_posts, _drafts

参考资料

官方资料

git http://git-scm.com/
nodejs https://nodejs.org/
GitHub Pages https://pages.github.com/
Hexo http://hexo.io/
多说 http://duoshuo.com
disqus https://disqus.com/
DNSPod https://www.dnspod.cn/

如何搭建一个独立博客——简明Github Pages与Hexo教程 http://nfeat.com/2014/05/10/2014-05-11-how-to-build-a-blog/
hexo系列教程：（三）hexo博客的配置、使用 http://zipperary.com/2013/05/29/hexo-guide-3/
hexo你的博客 http://ibruce.info/2013/11/22/hexo-your-blog/

后记

这个我这个blog的第一篇文章, 花了两天近十个小时时间才写完. 写完这篇文章感觉自己又领悟了不少东西, 不像是写笔记随便记下就行了, 不用去担心别人看不懂. 恩, 不错, 还需努力

最后发现什么有错误的地方还请明示

MakeHui's 超平和バスターズはずっとなかよし

Hexo GitHub Pages 搭建个人博客的心酸历程

前言

使用GitHub Pages搭建blog的初衷

注册GitHub账号

新建GitHub Pages仓库

安装相关软件

MacOSX

Linux

Windows

配置ssh-keygen

生成ssh key

添加ssh key到GitHub

使用Hexo搭建blog

安装hexo

初始化一个hexo项目(工程)

安装hexo依赖包(关键)

预览效果

安装Hexo主题

RSS

Sitemap

编辑Hexo与GitHub通信

关键配置如下

本人的完全配置

hexo命令

评论系统

第三方评论系统

申请多说域名

修改配置文件

如何写blog

常用Markdown语法

番外CNAME域名解析

购买域名

切换DNS

添加CNAME到GitHub仓库

参考资料

官方资料

相关文章

后记