Mac搭建Hexo博客及NexT主题配置优化

前言

最近看到阳春面的博客，感觉非常漂亮，正好最近也想自己搭个博客，记录一下自己的学习经历和生活感悟，给自己留下点回忆，同时整理一下自己的思路，于是就想仿照着弄一个类似的静态博客网站，正好最近有时间，而且内心搭博客的念头越来越汹涌，所以，说干就干！

主要内容

拉到阳春面博客的最下方，发现他的静态博客是Hexo驱动，使用的NexT.Mist主题，而且我非常喜欢这个主题，所以我完全就是冲着阳春面的博客效果去的，所以这片文章主要介绍：

1. 基于Hexo和github pages搭建静态博客

2. Next主题配置及优化

最终目标是实现阳春面博客那样的效果！另外，因为我用的电脑是Mac Pro，所以这篇文章所说的方法都是在mac下才有用的，windows下基本步骤类似，可能只是依赖工具安装方法不同。最后，我还没有申请和绑定自己的域名，所以域名注册和绑定都没有介绍，我认为，在自己真正开始经营博客之前，没有必要花钱注册域名，所以这部分工作留在博客小有名气，有一定流量之后再做！

基础准备

好，下面正式开始搭建博客！首先要想使用Hexo和github pages搭建博客，需要以下环境：
1. Github账号一枚，并创建一个指定名字的repo
2. Homebrew套件管理器，主要用来安装git和node.js
3. Git版本管理工具
4. node.js
5. 配置SSH key（可忽略）
6. 安装Hexo
7. 同步Hexo博客到github
8. NexT主题配置及优化（如果你喜欢别的主题，请忽略）

这些东西都不熟悉没关系，下面都会详细介绍。

注册Github账号并创建repo

因为我们的博客是基于github pages的，也就是博客内容都托管在github pages，所以需要有一个github账号，并且创建一个公开库（repo），用来存放你的博客。Github账号大家应该都有了，俗话说，没有Github 账号的程序员，不是好段子手，身为程序员，不加入这个全球最大的技术（搞基）社区怎么说的过去呢。如果还没有github账号，去这里申请一个就好了，申请步骤很简单，不再详述，记住选免费服务就可以。在github上创建public库是免费的，也就是传说中的创建开源库。创建private库是要付费的，我们使用github主要就是为了拥抱开源，如果没有特殊需求，创建public库就可以，我们一会儿要创建的博客仓库就是public库。

申请完账号，登陆之后，就可以创建repo了，点击New repository，会跳转到这个界面:

需要注意的地方，我都在图上做了标注，这些标注里最需要注意的就是新创建的库的名字，必须是username.github.io，等你创建库的时候，把username换成你的用户名就可以，例如我的用户名是madongqiang2201，那库名就是madongqiang2201.github.io。信息填写完毕，点击create repository就可以把库创建出来。

要想进一步深入了解github，可以阅读这些资料：

Github秘籍

GotGithub

stormzhang 从0开始学习github系列

安装Homebrew套件管理器

Homebrew并不是必须的，你也可以通过其他途径安装git和node.js，但是，个人认为Homebrew相当nice，而且在mac下管理安装包特别方便，所以在这里强行安利一波，Homebrew需要你的mac安装了Xcode，很多其他mac应用也需要，所以建议先安装一下，appstore里就有。装完Xcode之后，剩下的步骤就特别简单了，打开mac terminal终端，输入以下命令

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

就可以自动完成该工具的安装，如果这条命令失效了，可能是Homebrew更新了安装方式，可以去这里查看最新安装命令以及Homebrew的简要介绍。Homebrew安装完成之后，安装git和node.js简直简单的不要不要的。

Homebrew一些常用命令可以阅读以下资料，深度应用请自行检索：

Homebrew常用命令

常见问题

安装Git版本管理工具

Git是一个强大的版本管理工具，Github的版本管理就是基于Git的，现在svn基本过时了，使用Git进行版本管理才是王道。安装完Homebrew之后，安装Git几乎零成本，还是在terminal终端，输入以下命令：

brew install git

然后等一段时间就ok了，Homebrew会自动去帮你完成下载安装。

Git使用教程，可以参考以下资料：

stormzhang Git快速应用系列

Pro Git中文版

安装node.js

Hexo是基于node.js的，所以要让Hexo运行，node.js环境是必不可少的。使用Homebrew安装node.js也特别简单，在terminal终端输入如下命令：

brew install node

然后等着Homebrew帮你完成下载安装就可以了，舒爽到爆炸！安装完node.js就可以使用常见的npm命令了。

配置SSH key

这一步可以忽略，配置SSH key与否，并不影响博客的搭建和使用，只是配置了之后，更新博客方便一点，不用每次都输用户名和密码。

检查本机上是否存在SSH key

打卡终端，输入如下命令：

cd .ssh
ls -la

检查终端输出的文件列表中是否已经存在id_rsa.pub 或 id_dsa.pub 文件，如果文件已经存在，那么你可以跳过步骤2，直接进入步骤3.

创建一个SSH key

在终端输入以下命令：

$ ssh-keygen -t rsa -C "[email protected]"

回车，接着会提示你，让你输入文件名，直接回车会创建使用默认文件名的文件（推荐使用默认文件名）；然后会提示你输入两次密码（输入密码之后没有反馈，显示还是空白，但是你确实已经输入了），当然密码也可以不输，直接回车，如果这里没有输入密码，以后提交博客更新的时候就不需要输入密码了。

添加SSH key到github

经过第二步，如果你没有指定文件名（也就是使用的默认文件名），那么你的.ssh文件夹下，应该有一个id_rsa.pub文件了，打开该文件，复制里面的文本。然后登陆github，点击右上角头像右边的三角图标，点击Settings，然后在左边菜单栏点击SSH and GPG keys，点击new ssh key，title 随便填一个，在key 栏填入你复制的内容，点击add ssh key，就可以添加一个ssh key了，如下图：

验证SSH key是否配置成功

在终端输入以下命令：

ssh -T git@github.com

如果你创建的key没有设密码的话，直接一顿回车，到最后提示你

Hi yourusername! You've successfully authenticated, but GitHub does not provide shell access.

说明你的ssh key添加成功了。如果过程中提示你perimission deny相关错误，就在命令前加上sudo 然后执行命令的时候输入你的appleid密码应该就可以了。sudo用来说明用管理员权限运行。

以上简略介绍了怎么配置SHH key，如果想知道命令里面参数的含义，或者配置过程不顺利的话，可以看这里的详细教程。

安装Hexo

经过以上步骤的铺垫，终于到了Hexo安装了，前面我们安装了node.js,装完node之后，我们就可以使用npm命令了，而Hexo安装就是使用npm，在终端输入以下命令：

npm install -g hexo

然后等待一会儿，hexo会自动完成下载安装。Hexo安装完成之后，在你喜欢的位置随意创建一个文件夹，这个文件夹以后就是你存放本地博客的地方了，通过cd filepath(filepath替换成你创建的文件夹目录)命令，进入到你创建的文件夹目录，然后执行以下命令：

hexo init
npm install

这样Hexo会在该文件夹创建本地博客所需的一切资源。这样本地博客就搭建好了，输入以下命令：

hexo g  // 全拼是：hexo generate，可以简写成 hexo g
hexo s  // 全拼是：hexo server，可以简写成 hexo s

这样就开启了一个本地博客服务器，打开浏览器，在地址栏输入localhost:4000，就可以查看本地博客了，hexo默认生成了一片hello world博客。注意，以上hexo开头的命令，执行目录必须是你创建的博客文件夹目录。

同步Hexo博客到Github

现在你已经可以在本机查看你的博客了，但是要想让别人通过网络可以查看你的博客，还需要一步，那就是将你的博客发布到github仓库。在terminal终端，将当前目录切换到你的本地博客目录，执行以下命令：

npm install hexo-deployer-git --save

安装完成之后，打开本地博客目录的_config.yml文件，编辑其中的deploy节点：

deploy:
  type: git
  repo: [email protected]:yourusername/youusername.github.io.git
  branch: master

将上面yourusername替换成你的github用户名即可，你也可以去你开始的时候创建的名为yourusername.github.io的仓库去直接复制完整的地址，如下图：

当前复制出来的值，就是通过SSH方式clone的地址，配置完成后，以后提交博客更新不用输用户名和密码（如果你ssh key没有设置密码的话）；点击上图右上角Use HTTPS，复制出来的clone地址也可以配置到repo，但是这样，提交更新的时候，就需要输入用户名和密码了。

保存配置之后，在本地博客目录执行以下命令：

hexo clean  // clean本地项目，防止缓存
hexo g      // 根据你编辑的md格式的博客，生成静态网页
hexo d      // 将本地博客发布到github

然后，在浏览器地址栏输入yourusername.github.io就可以访问你的博客了，别人也可以通过这个地址访问你的博客。

如果想了解Hexo常用命令可以点击这里，Hexo常用命令没几个，常用的有创建新博客、clean、生成静态文件、发布等，上述官方文档有详细介绍

NexT主题配置及优化

NexT主题是一套简约的主题，设置完成之后，就像我的博客现在的样子，NexT主题的详细配置请看这里，这个是NexT主题作者维护的配置文档，作者是国人，所以文档是中文的，而且写的非常详细，对照文档，所有功能都能轻松实现。等你配置完成后，你的博客将拥有评论系统，访问次数统计，站内搜索，代码高亮，百度统计，社交分享（分享到微博，微信，qq等）等等强大的功能。官方文档很详细，我就不再赘述了。

其他遗漏的点

1.如何删除一篇博文

当然，我们辛辛苦苦写了博文，一般是不会删除的，最多修改一下，但是我们搭建的过程中或者刚搭建好个人博客站点，可能一激动就发了好多测试博文，如果想删除这类文章，在Finder中，找到本地博客所在目录，找到/source/_posts文件夹，里面放了所有我们写的博客，想删除哪篇，直接在这里删除，然后再重新发布到github，这篇博文就不见了

2.fork me on github

如果你访问我的个人博客，你会发现右上角有一个倾斜的fork me on github 图标，想要集成这个图标，只需要去这里挑选你喜欢的样式，把样式代码复制过来，然后打开你本地博客目录下的themes/next/layout/layout.swig文件，然后把你复制过来的样式代码粘贴到如下位置：

<body itemscope itemtype="http://schema.org/WebPage" 
    // ...
    <a href="https://github.com/madongqiang2201"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/a6677b08c955af8400f44c6298f40e7d19cc5b2d/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f677261795f3664366436642e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png">a>
    <header id="header" class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"> {%- include '_partials/header.swig' %} div>
    header>
    // ...

其中哪个超链接就是复制的样式代码，粘贴位置在body内header标签之上。

3.给博文添加tag和分类
使用如下命令：

hexo new "blog title"

创建的新博文文件，打开之后顶部会有一段自动生成的文本，在其中加入tag和category标签即可指定tag和分类。

---
title: blog title
date: 2016-07-20 10:59:31
tag: hexo
category: hexo
---

4.手动实现某条博文置顶
Next主题没有博文置顶相关设置（或许这个功能Hexo应该提供，但我分不清），但是我发现发布的博文是根据发布日期倒序排序的，即：越早发布的，排的越靠后！而发布日期，我们可以通过博文的头部date字段指定：

---
title: blog title
date: 2016-07-20 10:59:31  // 指定发布日期
tag: hexo   
category: hexo   
---

所以我们可以给想要置顶的博文，指定一个将来的日期，这样就可以让这篇博文一直排在别的博文前面，达到手工置顶的目的！但是要注意：对于已经发布的博文，发布日期和文件名称（不是title字段的值，而是md文件名）是该文章访问url的组成部分，也就意味着，已经发布的文章如果改了发布日期，针对这篇文章的链接就都不能用了，而且浏览统计等信息都会受到影响，所以手工置顶应该慎重使用！

总结

Hexo博客至此搭建完毕，并且应用了简约美丽的NexT.Mist主题，但是仍有一些不足之处，例如没有通过正常方式博文置顶功能；该主题的主页过于简单，没有边栏，导致主页展示的有效信息减少，不利于访客浏览，也不利于推广自己的其它渠道，这可能就是简约付出的代价，主题作者以后可能也会改进吧！如果不喜欢这个主题，可以参看一下开源实验室或者stormzhang的个人博客主题，我感觉这两个都不错。但是最重要的还是博客要有内容，没有内容，再好的个人站点也没有意义！所以样式先这样吧，这段时间先写技术文章，如果以后自己开始认真经营博客了，再绑定域名和优化样式。最后，如果大家有什么问题，欢迎留言讨论！

关于我

我的Github

我的个人博客

我的简书

我的CSDN