1、环境配置

1.1 Git

Mac已内置

1.2 Nodejs

官网下载 http://nodejs.org/
默认安装即可

2、安装Hexo

参考官网 https://hexo.io/

2.1 npm 安装Hexo

执行命令

1
2
$ npm install -g hexo-cli

安装完成后，指定路径新建所需文件

1
2
3
4
$ hexo init <folder>
$ cd <folder>
$ npm install

完成后，目录文件结构如下

1
2
3
4
5
6
7
8
9
.
├── _config.yml	// 网站的配置信息
├── package.json	// 应用程序的信息
├── scaffolds		// 模板文件夹, 新建文章时根据模板生成文件
├── source			// 资源文件，Markdown 和 HTML 文件会被解析并放到 public 文件夹
|   ├── _drafts
|   └── _posts
└── themes			// 主题文件夹

注：npm 时报错，可能是网络问题，可使用代理或使用 淘宝NPM镜像

启动server

1
2
hexo server

2.2 _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

fancybox: true ## If you want to use fancybox please set the value to true.
duoshuo: ## Your duoshuo_shortname, e.g. username
disqus: ## Your disqus_shortname, e.g. username
google_search: true ## Use Google search, true/false.
baidu_search: ## Use Baidu search, true/false.
swiftype: ## Your swiftype_key, e.g. m7b11ZrsT8Me7gzApciT
tinysou: ## Your tinysou_key, e.g. 4ac092ad8d749fdc6293
self_search: ## Use a jQuery-based local search engine, true/false.
google_analytics: ## Your Google Analytics tracking id, e.g. UA-42425684-2
baidu_analytics: ## Your Baidu Analytics tracking id, e.g. 8006843039519956000
show_category_count: false ## If you want to show the count of categories in the sidebar widget please set the value to true.
shareto: true ## If you want to use the share button please set the value to true.
busuanzi: true ## If you want to use Busuanzi page views please set the value to true.
widgets_on_small_screens: false ## Set to true to enable widgets on small screens.
menu:
  - page: home
    directory: .
    icon: fa-home
  - page: archive
    directory: archives/
    icon: fa-archive
  - page: about
    directory: about/
    icon: fa-user
  - page: rss
    directory: atom.xml
    icon: fa-rss
widgets: ## Six widgets in sidebar provided: search, category, tag, recent_posts, rencent_comments and links.
  - search
  - category
  - tag
  - recent_posts
  - recent_comments
  - links
links:
  - title: site-name1
    url: http://www.example1.com/
  - title: site-name2
    url: http://www.example2.com/
  - title: site-name3
    url: http://www.example3.com/
    
timeline:
  - num: 1
    word: 2014/06/12-Start
  - num: 2
    word: 2014/11/29-XXX
  - num: 3
    word: 2015/02/18-DDD
  - num: 4
    word: More
    
 # Static files
	js: js
	css: css
 # Theme version
	version: 0.0.0
  • fancybox - 是否启用Fancybox图片灯箱效果
  • duoshuo - 多说评论 shortname
  • disqus - Disqus评论 shortname
  • google_search - 默认使用Google搜索引擎
  • baidu_search - 若想使用百度搜索，将其设定为true。
  • swiftype - Swiftype 站内搜索key
  • tinysou - 微搜索 key
  • self_search - 基于jQuery的本地搜索引擎，需要安装hexo-generator-search插件使用。
  • google_analytics - Google Analytics 跟踪ID
  • baidu_analytics - 百度统计 跟踪ID
  • show_category_count - 是否显示侧边栏分类数目
  • shareto - 是否使用分享按鈕
  • busuanzi - 是否使用不蒜子页面访问计数
  • widgets_on_small_screens - 是否在移动设备屏幕底部显示侧边栏
  • menu - 自定义页面及菜单，依照已有格式填写。填写后请在source目录下建立相应名称的文件夹，并包含index.md文件，以正确显示页面。导航菜单中集成了FontAwesome图标字体，可以在这里选择新的图标，并按照相关说明使用。
  • widgets - 选择和排列希望使用的侧边栏小工具。
  • links - 友情链接，请依照格式填写。
  • timeline - 网站历史时间线，在页面front-matter中设置layout: timeline可显示。
  • Static files - 静态文件存储路径，方便设置CDN缓存。
  • Theme version - 主题版本，便于静态文件更新后刷新CDN缓存。

3.3 主题安装

官网主题列表

1、Git Clone 到 themes 文件下

2、安装渲染器

1
2
3
$ npm install hexo-renderer-jade --save
$ npm install hexo-renderer-sass --save

3、编辑Hexo目录下的 _config.yml ，将 theme 的值改为 maupassant 。

3、新建文章

新建文章

1
2
hexo new "postName"

新建页面

1
2
hexo new page  "pageName"

生成静态页面至 public 目录
hexo generate

配置文章 front-matter

  • 标签 tags:
  • 分类 categories:
  • 是否显示评论 comments:
  • 摘要（列表显示的内容） description:
  • 是否显示目录 toc:

注： ： 后 内容之前 必须加一个 空格，否则生成文章时会报错。

4、部署Github

配置Github仓库

仓库名 your_user_name.github.io 格式，严格遵守

修改 _config.yml 

1
2
3
4
5
6
7
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: [email protected]:mayuan607/mayuan607.github.io.git
  branch: master

执行命令

1
2
npm install hexo-deployer-git --save

部署命令

1
2
hexo deploy

浏览器打开 your_user_name.github.io ,正常访问 部署完成。

之后，每次部署均是三个步骤

1
2
3
4
$ hexo clean
$ hexo generate
$ hexo deploy