如何用Mac+github pages +hexo搭建博客

实际上我是先用jekyll搭建博客的。后来发现没有找到好看的主题，看到大神用的hexo的主题，感觉很好看，所以尝试了用hexo来搭建博客，如果有需要用jekyll搭建的，可以参考如何利用Mac+Github pages+jekyll来编写博客。

安装hexo
安装Nodejs

安装GIT

安装hexo
基本配置

安装Hexo 插件

本地浏览

部署Git

使用hexo

安装NexT主题

修改_configyml中配置信息
修改站点目录下的_configyml

修改主题目录下的_configyml

其他配置项
添加标签tags页面

添加分类categories页面

修改post

添加404页面

创建博客
写文章

发布文章

安装hexo

安装环境：Node.js和Git。首先我们要安装这两个东西。

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。

安装Node.js

直接点击官网下载安装。

安装GIT

这个不多说了，还是github创建主页那一套，其他教程很多。

安装hexo

基本配置

## 如遇权限问题在命令前加sudo
mkdir hexo  #创建一个文件夹
cd hexo
npm install -g hexo-cli
npm install hexo --save
##部署Hexo：在Git shell 中输入
hexo init

这一步网上不同教程有不同做法。因为我是fork自大神EZLippi的主题。所以上面是这么写的。实际上我是看着几个教程做的。因为在我输入npm install -g hexo-cli后hexo里面已经有文件了，输入hexo无效了。然后也试了一开始hexo init blog命令。发现直接初始化的时候东西都安装好了。不过我理解大概意思是，首先建一个文件夹可以放hexo的配置文件。然后初始化，然后安装配置文件就可以了。

新建完成后，blog文件夹的目录如下:

_config.yml    // 站点的配置信息
package.json   // 应用程序的信息
scanffolds     // 模板文件夹
source         // 存放用户资源的文件夹
themes         // 主题文件夹，Hexo会根据主题生成静态页面

这个时候基本上就安装好啦。

安装Hexo 插件

自动生成sitemap,Rss，部署到git等，建议安装

npm install hexo-generator-index --save
npm install hexo-generator-archive --save
npm install hexo-generator-category --save
npm install hexo-generator-tag --save
npm install hexo-server --save
npm install hexo-deployer-git --save
npm install hexo-deployer-heroku --save
npm install hexo-deployer-rsync --save
npm install hexo-deployer-openshift --save
npm install hexo-renderer-marked@0.2 --save
npm install hexo-renderer-stylus@0.2 --save
npm install hexo-generator-feed@1 --save
npm install hexo-generator-sitemap@1 --save

本地浏览

启动本地服务器：

hexo server

此时打开网址http://localhost:4000，正常来讲就可以看到地平线的那个主题了。我这边没有出现，可能是之前设置的jekyll的原因？不过这边暂时不用所以不影响。

部署Git

github账号这个不多说了。这里我们要有一个类似username.github.io的repository。配置好SSH。详细参考其他教程。

此时我们需要配置_config.yml文件。

终端里cd到hexo文件夹下，编辑_config.yml，滑到最底部，将deploy里的内容改为如下:

deploy:
type: git
repository: git@github.com:chumingke/chumingke.github.io.git(这个具体看自己Clone with SSH的地址)
branch: master

使用hexo

执行如下命令生成静态页面

hexo generate

然后执行部署命令

hexo deploy

这两个命令执行完看到Github上文件修改了。等大概不到一分钟打开https://username.github.io/（你自己起的名字）就可以看到主页啦。

实际上这两个命令是每次提交都要用的。后面会提到。

安装NexT主题

这里安装的是NexT主题，详细请参考NexT使用文档。

下载主题：

cd hexo目录
gi
4000
t clone https://github.com/iissnan/hexo-theme-next themes/next

你会发现在themes文件夹中多了一个next文件夹。这就是我们下载的主题。

修改_config.yml中配置信息

需要注意的是，hexo文件夹下会包含两个_config.yml，一个位于站点根目录下，也就是刚才创建的hexo目录下，主要包含Hexo本身的配置；另一个位于主题目录下，主要用于配置主题相关的选项。

由于刚才我们下载了NexT主题，要是想用的话还需要修改下下_config.yml。

修改站点目录下的_config.yml

编辑hexo目录下的_config.yml，找到theme字段，修改为

theme: next

注意，冒号后有空格！！！

其他可以修改的

# Site
title: WalkStep's Blog                   // 站点标题
subtitle:                                // 站点副标题
description: First, crawl. Then, walk!   // 站点描述
author: WalkStep                         // 你的名字
language: zh-Hans                        // 站点语言
timezone:                                // 站点时区
avatar: /uploads/avatar.png              // 头像
##等等其他不一一赘述

修改主题目录下的_config.yml

menu:
home: /
categories: /categories
about: /about
archives: /archives
tags: /tags
#commonweal: /404.html
## 等等不一一赘述
## menu用来设置菜单，我这个地方设置了5个菜单选项，分别是首页、
## 分类、关于、归档和标签，不让显示的菜单选项可以用#注释掉

这个位置也有很多选项，其中比如常用的要设置tags，categories等一定要在这里配置好，不然后面显示不出来的。

其他配置项

添加标签tags页面

定位到 Hexo 站点目录下，使用 hexo new page 新建一个页面，命名为 tags，布局格式为page：

cd hexo目录
hexo new page tags

这时会在source文件夹下建一个tags文件夹。修改里面的index.md

修改为：

title: 标签            ##这个位置我试了好像中英文都可以
date: 2014-12-22 12:39:04
type: "tags"
comments: false
##如果要关闭tags页面的评论可以设置comments为false，因为如果设置多说评论的话会在每个页面都设置评论，所以需要关闭。
---

这样以后tags页面在每次执行hexo generate后自动更新。

添加分类categories页面

跟上面标签一样，执行

hexo new page categories

内容为：

title: 分类
date: 2014-12-22 12:39:04
type: "categories"
comments: false
---

修改post

之前我们添加了tags，categories。但是这时候即便我们写好博客分类也不会显示tags，categories。查了半天原来post的问题。

因为我们创建博客用的命令是hexo new [layout] “postName”其中layout是可选项，默认不填的话是post。

有哪些layout呢，请到scaffolds目录下查看，这些文件名称就是layout名称。当然你可以添加自己的layout，方法就是添加一个文件即可，同时你也可以编辑现有的layout，比如post的layout默认是hexo\scaffolds\post.md

找到post

没有修改之前是这样的

title: { { title } }
date: { { date } }
tags:
---

修改为

---
title: {{ title }}
date: {{ date }}
categories: {{ categories }}
tags: {{ tags }}
---

如果还设置了其他的页面，同样添加进去。

这里再严肃提醒，注意冒号及大括号中的空格！！！

添加404页面

新建一个404.html文件，放到themes\next\source目录下，内容自己定。

还有很多其他功能，下次有空添加~~

创建博客

写文章

执行new命令，生成指定名称的文章至hexo\source_posts\postName.md。

hexo new [layout] "postName" #新建文章

layout的问题前面提到过。

这个时候一个新文件被创建好了，进去编辑一下标签。格式类似

---
title: 如何利用Mac+Github pages+jekyll来搭建博客
date: 2017-10-01 04:38:04
categories: [jekyll]
tags: [jekyll]
---

然后可以在下面写博文啦。我是用csdn在线编辑好，然后复制到文件里面。这样本地文件就编辑好啦。

发布文章

在终端里依次执行：

hexo clean  ##清除缓存文件(db.json)和已生成的静态文件 (public)
hexo generate      ## 生成静态文件，可以简写hexo g
hexo deploy        ## 部署网点，可以简写hexo d

如果想现在本地看看效果，执行

hexo s    ## 启动本地服务器

打开网址http://localhost:4000，你就可以看到你写的文章了

然后等一会打开https://username.github.io/（你自己起的名字）就可以看到上传后的博客啦。

其他文章：

如何利用Mac+Github pages+jekyll来编写博客