最简便的方法搭建Hexo+Github博客,基于Next主题

本文链接：https://blog.csdn.net/tx874828503/article/details/51577815

前言

如果你喜欢写作，我觉得你可以试试gitbook或者跟着本文搭建一个属于自己的博客空间（即使你不是IT行业的一员），不再受限于第三方博客地址，当然Hexo搭建的博客也是基于github托管的，但是并不需要你购买域名。
经过两天的探索加爬坑，终于把博客在git上安家了，感谢开源的大哥大姐们，由于并非js开发，所以遇到了很多坑，于是也想整理一篇比较完整的博客。这篇博客分为三部分：

1.搭建you_site服务器环境

2.部署到github上

3.优化博客的主题

ps:我选择的主题是Next

Hexo的安装

Hexo简介

在搭服务器环境之前，先简单介绍一下Hexo。Hexo 是一个简单地、轻量地、基于Node.js的一个静态博客框架。通过Hexo我们可以快速创建自己的博客，仅需要几条命令就可以完成。
Hexo特性：
- Hexo基于Node.js，支持多进程，几百篇文章也可以秒生成。
- 支持GitHub Flavored Markdown和所有Octopress的插件。
- Hexo支持EJS、Swig和Stylus。通过插件支持Haml、Jade和Less.

Hexo的官方网站，也是基于Github构建的网站。

Hexo环境配置

在安装Hexo之前需要先安装一些它所依赖的环境配置
这里说一下，mac上安装一些软件的时候，我个人建议先安装一下Homebrew — Github传送门，它相当于一个软件管理工具，不管是安装还是卸载都比较方便。
不多说，安装Homebrew也很简单，利用mac自带的ruby脚本功能，打开终端输入：

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

安装完成后，Homebrew 的主程序安装在 /usr/local/bin/brew。
接下来安装git和node.js就简单多了。

Git安装

安装过Xcode可以直接跳过这步，因为Xcode自带Git

个人建议使用这种方式安装，不要使用网上的安装包进行安装，安装node.js也是。因为有些博客里的安装包有些过时。
打开终端输入：

$ brew install git

使用 Homebrew 方式安装，Git 被安装在 /usr/local/Cellar/git/ 中

Node.js安装

$ brew install node

使用 Homebrew 方式安装，node 被安装在 /usr/local/Cellar/node/ 中，自带安装好npm组件
想测试自己是否安装成功了，可以新建一个简单的hello.js文件:

var http = require('http');
http.createServer(function(req, res){
   
    res.writeHead(200, {
  'Content-Type': 'text/plain'});
    res.end('Hello World\n');
}).listen(8808, '127.0.0.1');
console.log('Server running at http://127.0.0.1:8808');

放到根目录下，然后在终端输入：

node hello_node.js
Server running at http://127.0.0.1:8124/

然后用浏览器打开用浏览器打开 http://127.0.0.1:8124/就可以看到Hello World 字样了。

当然安装node.js还可以手动安装或者利用nvm安装，这里就不介绍了。
接下来就可以安装Hexo了

Hexo安装

在终端输入：

npm install hexo -g

这样，就把 Hexo 本体和其相依套件安装完毕了，很简单吧。
以后更新Hexo到最新版直接在终端输入：

npm update hexo -g

接下来，就可以初始化一个放置你以后写文章的专属文件夹：

hexo init <folder>

这里的folder参数如果指定，便会在终端当前的资料夹建立一个名为 folder 的新资料夹；否则会在当前资料夹初始化。所以建议都指定。因为初始化之后会有很多的文件夹出现。就像我刚开始接触电脑解压一个文件里面会有很多东西直接出现在我的桌面一样，那种感觉，好恶心。
初始化之后会稍等一会，然后终端会出现

INFO  Start blogging with Hexo!

这样的字样就成功了，去目录查看，可以看见生成了
Snip20160531_1
这几个文件夹，以后我们的操作基本都是在这里面了。

终端输入：

pwd

显示当前路径，如果不是在我们刚才init的文件夹里，那么就切换进取。
接下来，我们终端cd进入刚刚init的文件夹，我的文件夹是TongXingBlog
Snip20160531_3

进入我们的Blog文件夹后，在终端输入：

hexo s

s是简写：hexo server

终端结果显示：
Snip20160531_5
复制地址，在浏览器打开，结果显示：
Snip20160531_4
说明Hexo在你的电脑已经安装成功了，里面出现的是默认的一篇文章，当然你也可以自己新建一篇文章:
Ctrl+C停止服务器，在终端输入：

hexo new "Hello Hexo"

新建的文章，可以在根目录的source/_posts目录下找到，并且可以使用支持Markdown语法的编辑器来对它进行编辑。
再次启动服务器，复制地址打开浏览器，发现刚刚新建的文章已经出现了。
这样第一部分就完成了，吐呀吐个槽，但是有没有发现，系统默认的样式很丑，反正我觉得很丑…….，还有怎么让别人看见你发表的文章呢，你现在只能在自己的电脑上看到，那么接下来就要借助github来实现对我们文章的托管。

将文章部署到github

创建github仓库

首先，你得有一个github账号，没有的话去申请一个吧,

没有github账号的童鞋申请的时候用户名想好了哦，因为你的博客域名将会以它为基础。
- 这里推荐一个翻墙软件，Lantern，我手上有解版永久有效，之前传到CSDN上不知道为什么一直没通过。

注: 已经有github账号的跳过这节

登录github账号后，点击右上角的+号创建一个新的创库： Snip20160531_6

进入创建创库界面：
Snip20160531_7

一切填完之后，就可以点击Create按钮了。
这里，切记切记：

Repository name 不可以乱写，是固定的写法
也就是必须是你的用户名+github.io这种格式，它也将是你个人博客的域名。也就是别人输入这个网址来访问你的博客。

到这里创库就创建完成了，它将会与你本地init的那个文件夹相关联，大致就是将你本地的文件夹上传到服务器，供别人访问你的博客内容。

配置本地文件

打开我们init好的那个文件夹，找到_config.yml文件，这就是全局配置文件，通过配置里面的参数，来与我们的github上得仓库进行关联。
打开这个文件，找到最下面：

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type:

这段代码，然后修改成，我这样

deploy:
    type: git #部署类型，使用github
    repository: https://github.com/chaserr/chaserr.github.io.git #部署的仓库的SSH
    branch: master #部署分支， 一般使用master主分支
    message: update #默认类型

这里有两个重要的参数：（其他两个参数可以参照着写）
1. type：Hexo之前的版本好像是填github，但是Hexo3.0之后，必须填git，我的Hexo是最新的3.2.0，填写git。
2. repository这个参数，很重要，它就是用来链接我们在github上创建的创库。看网上有的人使用SSH，但是SSH配置起来相对有些复杂，我这里用的是HTTPS方式，也是可以成功的。

打开github的Repositories，找到我们创建的仓库，点进去
Snip20160531_88

Snip20160531_9
点击Use HTTPS,然后复制文本框里的网址，填到上面的repository参数后面即可，

注意每个参数：后面必须留有一个空格，否则会出现语法错误。

然后在终端输入：

npm install hexo-deployer-git --save

会出现信息：

└── hexo-deployer-git@0.1.0

接下来就可以把你的文章部署到github上去了。
在终端输入命令

hexo d

d是 hexo deployer的缩写，

待终端出现

INFO  Deploy done: git

就表示成功啦。
现在你可以在浏览器输入http://your_username.github.io
这里的your_username就是你的github账号昵称

以后每次新建文章后，待你完成编辑。即可以此执行下面几个命令来把新的文章部署到服务器上:
- hexo clean
- hexo g
- hexo d

附：

Hexo部署常见问题解决方案 – 传送门

至此，Hexo的部署算是完成了。接下来就是优化你的主题了。
我使用的是Next主题，如果喜欢其他主题的童鞋，可以跳走了。

优化主题

样式预览

Next主题的安装使用

首先从github上clone到本地，在终端cd / 切换到你通过Hexo init生成的根目录，
然后在终端输入命令：

$ git clone https://github.com/iissnan/hexo-theme-next themes/next

进入站点的全局配置文件：_config.yml
找到theme字段：设置为

theme: next

到这里可以验证一下主题是否被启用。终端输入：

hexo s -- debug

然后本地访问http://localhost:4000，看看效果，在没有部署到github上之前，一般都可以这样在本地进行预览。

关于站点全局_config.yml配置文件的其他一些参数：

# Site
title: 朝夕 #博客名
subtitle: 朝闻道，夕死可以。 #博客副标题