基于Github和Coding的Hexo框架独立博客搭建

原文链接，持续更新：https://blleng.cn/180809/

本文将带领大家利用Hexo框架和Github或Coding从零开始初步搭建起个人独立博客。

准备工作

为何Hexo?

我第一次尝试独立博客的搭建就是从了解到Hexo框架开始，后来又转到wordpress，再后来因为云主机和配套数据库过期，我穷，不想续费，就放弃了wordpress，回到Hexo。现在想了想，还是Hexo好啊，为什么呢？

官方回答:

• _超快速度
• Node.js带来的超快生成速度，让上百个页面在几秒内瞬间完成渲染。
• _支持Markdown
• Hexo 支持 GitHub Flavored Markdown 的所有功能，甚至可以整合 Octopress 的大多数插件。
• _一键部署
• 只需一条指令即可部署到 GitHub Pages, Heroku 或其他网站。
• _丰富的插件
• Hexo 拥有强大的插件系统，安装插件可以让 Hexo 支持 Jade, CoffeeScript。

我的回答:

• 个人认为Hexo的可定制化程度更高。
• 因为是静态博客(虽然没有了动态博客的优点)，不需要数据库支持，节省了一笔钱。
• 以上都是废话，来看看真正的原因吧！
• 用Hexo框架才能更完美地装逼！

搭建环境

Hexo的官方文档里已经说得很清楚了，所以大家可以去看看官方文档。

在开始搭建之前，我们需要准备好如下几样东西：

• Node.js
• 下载地址: https://nodejs.org/en/download/
• Git
• 下载地址: https://git-scm.com/downloads

Windows用户就不用多说了，Linux用户和Mac用户如果不清楚如何安装的话，可以参考一下Hexo的官方文档: https://hexo.io/zh-cn/docs/#安装前提

在安装好Node.js和Git之后，我们开始Hexo的安装:

方法很简单，一条命令全局安装Hexo：

$ npm install -g hexo-cli

安装顺利完成。然后，对于Ubuntu用户，Hexo是放在Node.js安装目录的bin里的，所以还需要软链接(不一定，视具体情况而定)：

$ sudo ln -s /home/###/data/application/node-v##-linux-x##/bin/hexo /usr/local/bin/hexo

• ###是你的电脑用户名,node-v##-linux-x##这里具体看你的Node.js版本

开始搭建

现在我们正式开始博客的搭建工作！

本地搭建

初始化

首先，你需要建立一个文件夹，建在哪里，名字叫什么随便你，这个文件夹将是我们的大本营。

进入这个文件夹，在终端里（Windows用户右键打开Git Bash）依次执行如下命令，开始Hexo的初始化：

$ hexo init
$ npm install

完成初始化后你的文件夹内的主要结构将是这样的：

.
|--- _config.yml  //它是站点配置文件
|--- package.json //应用程序信息，一般 用不上
|--- scaffolds    //模板文件夹，新建文章时，将根据它建立文件
|--- source       //存放用户资源，除_posts外，所有以_开头的文件(夹)、隐藏文件将被忽略，Markdown、html文件将被渲染并存至public文件夹，其他文件也会被拷贝过去
|	 |--- _drafts
|	 |--- _posts
|
|--- themes        //主题文件夹，将根据主题来生成静态页面

上述操作完成后，大家可以尝试依次运行如下命令，在本地查看博客情况：

$ hexo g //相当于 hexo generate 生成静态页面
$ hexo s //相当于 hexo server  在本地服务器运行

如果一切正常，你将看到如下提示信息：

$ Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.

然后你就可以打开浏览器，访问http://localhost:4000/，你将看到：

这就是我们的博客啦，接下来你可以更改站点配置文件来初步设置你的博客信息，如博客名称(title)、作者(author)等。因为可能会更换主题的缘故，暂时不对主题配置文件进行修改。

主题配置

我们此时所使用的是默认安装的landscape主题，如果不喜欢这个主题，可以更换。

Hexo的主题安装也很简单，只需将主题文件拷贝到themes目录下即可，大家可以去Hexo的官网看看有哪些主题。

我在这里推荐两个主题：

• NexT
• 最受欢迎的主题之一，以精于心，简于形为理念，目前正在很稳定地更新，我用的是NexT的7.0.1版本。这是一款非常完备的主题。
• 效果可以参考我的博客（虽然经过了我的小规模改造…）
• NexT使用文档: https://theme-next.org/
• 最新版本Github地址: https://github.com/theme-next/hexo-theme-next
• yilia
• 最受欢迎的主题之二，比较漂亮的一款主题，以极佳的移动端体验和加载速度著称，我曾经也用过。作者是腾讯大佬。
• 效果可以参考作者的博客: http://litten.me/
• Github地址: https://github.com/litten/hexo-theme-yilia

另外，知乎上有不少朋友的推荐: https://www.zhihu.com/question/24422335

我们这里以NexT为例：

在站点根目录下：

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

克隆好主题后，我们打开点配置文件,将themes字段更改如下：

theme: next

然后运行hexo s在本地查看效果。

大家在themes目录下的next目录中也能看见一个_config.yml文件，它是主题配置文件，将帮助大家完成主题的配置。NexT主题是非常强大的，具体配置请大家查看next文档，百度一下也能找到很多关于next主题的文章，足以帮助大家完成主题配置，以后有时间我也会写一些关于next优化的文章。

文章

如果要新建文章或页面，可以执行以下命令:

$ hexo new "文章名字" //生成新文章，可以在_posts中看到。也可以直接在_posts里新建文本文档，后缀改成md就行...
$ hexo new page "页面名称" //生成新页面

到_posts目录下，打开你新建的md文件，你就可以开始编辑了，一篇文章的结构一般是这样:

---
title: 文章名称
date: 建立日期
categories: 文章分类 //如有多个，格式为[分类1,分类2,分类3]
tags: 文章标签  //如有多个，格式同上
---
//以下是正文部分，支持Markdown格式

...

<!--more--> //如果有这个标签，后面的内容需点击“阅读全文”方可见.

...

Markdown的具体语法请自行查阅。

部署博客至Github和Coding

配置好主题后，我们就已经基本完成了博客的搭建工作，接下来我们要做的是将它部署至Github和Coding，然后大家就可以通过https://yourname.github.io或https://yourname.coding.me来访问自己的博客啦。

是部署到Github上还是Coding上随便大家啦，这里说这么几点：

• Github是最专业的！最专业的！最专业的！
• 但是github page是封禁了百度蜘蛛的，也就是说，部署到github的话，百度很难收录你的博客。
• 以上都不重要，重要的是，github是专业的！专业的！专业的！
• Coding是国内的网站
• Coding目前已被腾讯收购
• 我同时将博客部署到了github和coding，然后blleng.top域名的CNAME解析到了blleng.github.io,而blleng.top则解析到了blleng.coding.me。（也可以选择同一个域名CNAME解析国内线路到Coding，国外线路到GitHub）

注册Github和Coding

怎么注册我就不说了吧，唯一提醒一点，用户名请三思，以后博客的地址就是https://用户名.gihtub.io或https://用户名.coding.me。

{% note danger %}
然后，在Github上:

• 创建一个Repository
• 将它取名为用户名.github.io
• 请勾选README//我的习惯，随便大家

如果要部署到Coding上:

• 新建一个项目
• 取名为用户名.coding.me
• 也启用README
  {% endnote %}

部署博客

接下来我们就要将博客部署到github或coding了。

我们先为Git设置一下username和email:

$ git config --global user.name "your_name"
$ git config --global user.email "your_email"
//用你的用户名代替your_name，电子邮箱地址代替your_email

接下来我们设置SSH Key避免麻烦的密码输入：

运行命令：

$ ssh-keygen -t rsa -C email_address
//用你的电子邮箱地址代替email_address

下面只需不断回车就好，成功之后，将在~/文件夹下(windows用户具体为你的C盘用户文件夹下)生成一个.ssh文件夹，进入这个文件夹，打开id_rsa.pub文件，将里面的全部内容复制下来，它们长这样:

ssh-rsa ....一长串字符.....

添加 SSH Key:

github:

• 点击头像，进入setting，进入SSH and GPG keys，点击New SSH key，粘贴好你刚刚复制的内容,随便填个title，然后添加

coding:

• 点击头像，进入我的账号，进入SSH公钥，粘贴，添加，完毕

添加SSH后效果如图：

可以验证一下SSH到底设置好没有:

github:

$ ssh -T git@github.com //可能会提示是否继续，输入yes然后回车

成功的话，结果是：

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

coding:

$ ssh -T git@git.coding.net

结果：

$ Coding 提示: Hello blleng, You've connected to Coding.net via SSH. This is a personal key.
$ blleng，你好，你已经通过 SSH 协议认证 Coding.net 服务，这是一个个人公钥

部署之前，我们还需要一个插件的支持:

$ npm install hexo-deployer-git --save

然后更改站点配置文件，在最后面：

deploy:
  type: git
  repo:
    github: git@github.com:你的用户名/你的用户名.github.io.git,master
    coding: git@git.coding.net:你的用户名/你的用户名.coding.me.git,master

//如果只部署到github就把coding那一行删了就好

我们接下来可以开始部署，运行命令:

$ hexo clean && hexo d -g
//相当于依次运行 hexo clean(清除缓存文件和已生成静态文件，更改某个配置后却没有效果时可以用),hexo g,hexo d (hexo deploy)

命令运行完成且未报错的话，下面，我们就开始最后的检查工作：

• 到注册的仓库，检查生代码是否已上传到此处。
• 检查pages服务是否开启。
• github:
• 进入刚刚创建的仓库，进入setting，往下翻，找到GiHub Pages一栏，看看source分支选的是不是master，如果不是，就改成master。
• coding:
• 进入项目，点击代码，进入pages服务，然后选master分支，运行静态pages服务就好。

Pages开启后，效果如图:

检查之后，若无其它问题，我们就可以通过https://yourname.github.io或https://yourname.coding.me来访问你的博客了。

至此，博客的初步搭建工作就完成了。

本文永久链接，持续更新：https://blleng.cn/180809

终