如何用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目录 git 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，你就可以看到你写的文章了
【如何用Mac+github pages +hexo搭建博客】然后等一会打开https://username.github.io/（你自己起的名字）就可以看到上传后的博客啦。
其他文章：
如何利用Mac+Github pages+jekyll来编写博客