how to use hexo to create blog in github on mac

本文主要介绍怎么在github 上使用hexo 来搭建你自己的blog

1.注册github 网址https://github.com/

2.创建一个代码仓库 在主页上可以看到“+Repository” 的button 点击创建一个代码仓库，请按照下面的图配置 仓库名字必须是username.github.io

image

3.在本地编辑上传git 代码，具体步骤如下（我是用的是mac os 10.10 windows 上面暂时没有做测试）
参考文档
1)更新ruby 安装jekyll

1
2
3
$gem update --system
$ruby --version #查看ruby版本 hexo需要ruby 支持
$gem install jekyll

2）将代码拉到本地 安装github desktop 步骤如下
image
因为我已经建了martin-ding.github.io 的本地仓库了，所以上面没有显示，我的本地路径是/Applications/MAMP/htdocs/martin-ding.github.io 所以我以后都会在这个目录下面编辑，
我安装了MAMP 具体的配置视频我发布在优酷上面链接 http://v.youku.com/v_show/id_XMTI4MzYwOTE1Ng==.html?from=y1.7-1.2

3）Install node & npm 安装hexo

1
2
$brew install node
$npm install -g hexo-cli

4）创建blog
进入到刚才的目录中，我用的是Path Finder 比mac 原装的Finder 要好用的多，而且可以直接在下面打开bash，比较方便
image
首先先要创建一些文件
参考文件
http://www.pchou.info/web-build/2013/01/05/build-github-blog-page-02.html

下面是摘录：

本地编辑及上传
在磁盘上创建一个目录，该目录与上面的项目名同名，在该目录下启用Git Bash命令行，并输入如下命令

1
$git init

该命令实际上是在该目录下初始化一个本地的仓库，会在目录下新建一个.git的隐藏文件夹，可以看成是一个仓库数据库。

创建一个没有父节点的分支gh-pages，并自动切换到这个分支上：

1
$git checkout --orphan gh-pages

在Git中，分支(branch)的概念非常重要，Git之所以强大，很大程度上就是因为它强大的分支体系。这里的分支名字必须是gh-pages，因为github规定，在项目类型的仓库中，只有该分支中的页面，才会生成网页文件。

在该目录下手动创建如下文件和文件夹，最终形成这样的结构：

image

_includes：默认的在模板中可以引用的文件的位置，后面会提到
_layouts：默认的公共页面的位置，后面会提到
_posts：博客文章默认的存放位置
.gitignore：git将忽略这个文件中列出的匹配的文件或文件夹，不将这些纳入源码管理
_config.yml：关于jekyll模板引擎的配置文件
index.html：默认的主页
在_layouts目录下创建一个default.html，在其中输入如下内容，特别注意：文件本身要以UTF-8 without BOM的格式保存，以防止各种编码问题，建议使用notepad++或sublime编辑

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
	<html>
	<head>
	　<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	　<title>一步步在GitHub上创建博客主页(2)</title>
	</head>
	<body>
	　{{content }}
	</body>
</html>

编辑index.html

1
2
3
4
5
---
layout: default
title: test title
---
<p>Hello world!</p>

编辑_config.yml

1
encoding: utf-8

再次打开Git Bash，先后输入如下命令：

将当前的改动暂存在本地仓库

1
$git add .

将暂存的改动提交到本地仓库，并写入本次提交的注释是”first post“

1
$git commit -m "first post"

将远程仓库在本地添加一个引用：origin

1
$git remote add origin https://github.com/username/projectName.git

向origin推送gh-pages分支，该命令将会将本地分支gh-pages推送到github的远程仓库，并在远程仓库创建一个同名的分支。该命令后会提示输入用户名和密码。

1
$git push origin gh-pages #如果你的项目时间建在master 就是master 而不是 gh-pages

点击相应的代码库 点击setting 就可以看到
image
据网友反应，如果是初次安装git的话，在commit的时候会提示需要配置username和email，请读者注意根据提示配置一下，至于username和email可以随便填

上传上去之后就可以通过你的地址访问了 我的是http://martin-ding.github.io 你现在看到的内容应该是hello world！

5）下面开始使用hexo 发布blog

1
2
3
4
5
6
$hexo init  #初始化hexo
$npm install #Generate and run the server
$hexo g #=hexo generate
$hexo s #=hexo server 这个时候它会显示可以在0.0.0.0:4000 这个网址查看 你在浏览器上面输入http://localhost:4000 可以预览
$control+c 结束进程 结束server 现在可以发布到github 上面了
$hexo deploy #发布 但是在发布之前还要做一些配置

刚才那张图片里面有一个_config.yml 文件在该文件的最后有一个 delploy 选项
按照我的配置配置

1
2
3
4
deploy:
  type: git
  repo: https://github.com/martin-ding/martin-ding.github.io.git
  banch: master #这个还要按照具体的情况 刚才我们建的是在 gh-pages 你如果代码是建在master下面的就是master

可能你们会疑惑怎么得到repo参数值
image
或者输入命令

git remote show origin

就能获得
type 现在是git了 之前是github 参考最新的文档
文档地址：https://hexo.io/docs/deployment.html
顺便说一下 这个_config.yml 的各个字段的意义
文档地址：https://hexo.io/docs/configuration.html
参考文档：http://zipperary.com/2013/05/29/hexo-guide-3/

下面是摘录

站点配置用到两个文件，一个是对整站的配置._config.yml，另一个是对主题的配置themes/light_config.yml，我们来分别介绍。
_config.yml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
# Hexo Configuration
## Docs: http://zespia.tw/hexo/docs/configure.html
## Source: https://github.com/tommy351/hexo/

# Site 这里的配置，哪项配置反映在哪里，可以参考我的博客
title: Zippera's blog #站点名，站点左上角
subtitle: Walk steps step by step #副标题，站点左上角
description: Walk steps step by step #给搜索引擎看的，对站点的描述，可以自定义
author: zippera #在站点左下角可以看到
email: #你的联系邮箱
language: zh-CN #中国人嘛，用中文

# URL #这项暂不配置，绑定域名后，欲创建sitemap.xml需要配置该项
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://zipperary.com
root: /
permalink: :year/:month/:day/:title/
tag_dir: tags
archive_dir: archives
category_dir: categories

# 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
max_open_file: 100
filename_case: 0
highlight:
  enable: true
  backtick_code_block: true
  line_number: true
  tab_replace:

# Category & Tag
default_category: uncategorized
category_map:
tag_map:

# Archives 默认值为2，这里都修改为1，相应页面就只会列出标题，而非全文
## 2: Enable pagination
## 1: Disable pagination
## 0: Fully Disable
archive: 1
category: 1
tag: 1

# 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
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: MMM D YYYY
time_format: H:mm:ss

# Pagination 每页显示文章数，可以自定义，我将10改成了5
## Set per_page to 0 to disable pagination
per_page: 5
pagination_dir: page

# Disqus Disqus插件，我们会替换成“多说”，不修改
disqus_shortname:

# Extensions 这里配置站点所用主题和插件，暂默认，后面会介绍怎么修改
## Plugins: https://github.com/tommy351/hexo/wiki/Plugins
## Themes: https://github.com/tommy351/hexo/wiki/Themes
theme: light
exclude_generator:
plugins:
- hexo-generator-feed
- hexo-generator-sitemap

# Deployment 站点部署到github要配置，上一节中已经讲过
## Docs: http://zespia.tw/hexo/docs/deploy.html
deploy:
  type: github
  repository: https://github.com/zippera/zippera.github.io.git
  branch: master

现在可以hexo generate，hexo server，打开localhost:4000查看效果了。

themes/light_config.yml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
menu: #站点右上角导航栏，暂时默认，后面介绍修改
  首页: /
  存档: /archives
  关于: /about
  ToDo: /todolist
  

widgets: #站点右边栏，暂时默认，后面介绍修改和添加
- search
- category
- tagcloud
- weibo
- blogroll


excerpt_link: 阅读全文 #替换为中文

plugins: 


twitter: #右边栏要显示twitter展示的话，需要在此设置
  username: moxie198
  show_replies: false
  tweet_count: 5

addthis: #SNS分享，身在天朝，当然用“百度分享”，暂时默认，后面会介绍
  enable: true
  pubid:
  facebook: true
  twitter: true
  google: true
  pinterest: true

fancybox: true #图片效果，默认

google_analytics: #要使用google_analytics进行统计的话，这里需要配置ID，暂时默认，后面介绍
rss:  #生成RSS，需要配置路径，暂时默认，后面介绍

上面改动的不多，更多的是介绍了下功能，后面会相继介绍具体的修改方法。
好了，站点配置好了，我想发表一篇文章，怎么做呢？

1
hexo new "my new post"

在H:\hexo\source_posts中打开这个文件（打开方式用“记事本”即可），配置开头。

1
2
3
4
title: my new post #可以改成中文的，如“新文章”
date: 2013-05-29 07:56:29 #发表日期，一般不改动
categories: blog #文章文类
tags: [博客，文章] 文章标签，多于一项时用这种格式

这里是正文，用markdown写，使用方法参照我原来的博客Introduction to markdown
hexo server，访问localhost:4000预览效果。（退出server用Ctrl+c）
hexo deploy，同步到github。访问网站看看效果。

4.遇到的问题可以参考这个文章：
参考文档：http://blog.csdn.net/wx_962464/article/details/44786929
安装NoteJs，出现问题，安装到最后提示error 52**
过程：重新下载安装了几次都不行，不懂为什么，最后通过Hexo的文档提供下载地址进行下载，然后安装问题就没有出现了。

可能原因：
a. 下载的安装包有问题的原因
b. 我的C盘占用过多，盘符标红，然后卸载一些不常用软件解决，再安装再加上上面重新下载的安装包，之后安装成功。

部署提示找不到git
解决办法：
在Hexo 3.0版本后deploy git 被分开的，所以需要安装，安装命令如下:npm install hexo-deployer-git –save ,安装好后在尝试一下就ok。

部署提示 ｀event type error *｀
解决办法：
安装了git bash没有配置到环境变量path中，添加进去在试试。

部署的时候执行：hexo deploy 命令行没有任何输出，也没有错误。
解决办法：
在部署的_config.yml文件中，找到deploy:标签，在每个冒号后面必须要空格，否则就会出现上述问题。我的配置如下：

1
2
3
4
deploy:
type: git
repository: https://github.com/wx962464/wx962464.github.io.git
branch: master

顺便提示下，如果使用ssh部署不成功的话，请使用https的方式试试，这个就是每次会让你输入用户名和密码。其实效果是一样的。

修改主题不起作用，而且hexo generate还报错
解决办法：
需要到相应的主题文件夹下面进行修改，比如我的主题为：themes\jacman 则在根目录下找到该文件夹下，修改_config.yml文件，根目录下面也有个同样的名字，不注意，容易弄混，要主要修改的文件是否正确。

执行hexo server显示running at http://0.0.0.0:4000/
问题说明：
开始的时候以为启动服务器有问题，一直在找问题，找了半天没有答案，最后在浏览器直接尝试http://0.0.0.0:4000/ 是没办法访问的，然后就试了下http://localhost:4000/ 发现是可以访问的，大喜！~~

执行hexo server提示找不到该指令
解决办法：
在Hexo 3.0 后server被单独出来了，需要安装server，安装的命令如下：npm install hexo-server –save 安装此server后再试，问题解决。

Tips
今天是我第一天使用github 所以有讲的不对的地方请指正，我的邮箱是testBysoft@126.com THX 共同学习，共同进步！