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 共同学习,共同进步!