我的Hexo博客站的创建历程(一)【Github&Cod

本系列文章说明

<blockquote>
《我的Hexo博客站的创建历程》系列文章共有三篇
第一篇：Github&Coding双管齐下部署Hexo
第二篇：博客站必备第三方插件安装+装饰文章和版面
第三篇：心路历程总结
最终效果参见: 一叶染秋的博客
转载本文请注明文章链接和署名<br />
本文中出现勘误纰漏及相关问题，欢迎朋友们在文章下方留言，当日我均会回复。
</blockquote>

本篇文章你将看到

• 安装Node.js, Git, Hexo博客框架
• 在本地创建一个基础的Hexo原始博客站
• 配置Github和Coding的远程项目，各自配齐ssh连接(同一个ssh私钥)
• 多个ssh私钥的配置经验
• 将本地Hexo博客生成内容协同部署到Github和Coding的远程仓库上
• 域名购买及其配置DNS解析到我们Github与Coding上的博客站仓库

What is Hexo？&Why？

什么是Hexo

Hexo是一款基于当下热门的Node.js开发出来的静态博客框架。用其配合Markdown语法编辑文章发布是非常快捷方便的。

为什么选择Hexo

因为Hexo静态博客框架已经把我们个人博客常用的功能都已经设计好了，不需要我们把过多经历花费在博客布局设计上。并且它是静态的，所以数据库设计，交互设计这些都不用了，加大了我们部署个人博客上线的效率和日常使用的便捷性。

Hexo的延展配件丰富，第三方插件兼容好，基于Hexo的博客样式主题同样丰富，使用用户多，版本更新迭代健康，还有一个重要点是官方配套文档写的很友善。

前文提示

我的电脑操作系统是Ubantu 14.04版本，所以本篇文章中的所有指令都是基于Ubantu 14.04系统。对于linux其他发行版本的用户可参考性很大，对于Win和OS系统用户在具体Hexo框架搭建部分指导作用不大。本文中的Github&Coding同时部署和域名配置是完以参考的，这两处不局限与系统环境。

Git安装

我利用ubantu系统的apt-get方式安装。在终端中输入$ sudo apt-get install git
系统安装完毕后，在终端输入$ git --version,显示出git版本号，则说明安装成功。

其他安装git方式可参考：中文安装教程

Node.js安装

我ubantu系统下使用的是源码安装方法：

Step1

在Nodejs官网中下载源代码：下载链接

如上图所示，选择Linux类的源码，点击下载到本地

Step2

$ tar -zcvf 压缩文件名.tar.gz命令来把我的压缩包解压
$ sudo mkdir /usrl/local/nodejs命令来建立系统中node.js文件夹
$ sudo mv 解压后的文件夹名/* /usr/local/nodejs命令把node.js源码放在到刚才建立的文件夹中

Step3

$ sudo vim /etc/enviroment打开系统环境变量文件
把:/usr/local/nodejs/bin加入到本文件的PATH = ""的末尾，注意 : 是英文
按Esc，按shift和冒号按键后，键入wq！进行文本写入保存

Step4

我们重启电脑后，终端中键入$ node -v,显示出Node.js版本编号，即算安装成功。

优化Node.js的npm安装

目的：后续我们在使用Hexo框架的时候，要进行相关插件安装，但是原始npm源安装网络很慢，所以更换成国内的镜像并用cnpm替换之。国内镜像地址

方法:
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
自动配置完毕后，终端输入$ cnpm -v，显示出版本信息即为安装成功。

Hexo静态博客框架安装

安装Hexo

$ cnpm install hexo-cli -g
安装完毕后，终端输入
$ hexo -v 显示出版本信息，则hexo安装成功

在指定文件夹中搭建Hexo

$ mkdir 博客站存储信息文件夹名称 根据自己设计建立存储自己博客站信息的文件夹
进入上步创建的文件夹，输入$ cnpm install hexo --save 把Hexo安装到我们的空博客站文件中
再在此目录下分步输入以下面命令：
$ hexo init Hexo框架初始化
$ cnpm install 安装依赖包

安装Hexo必备插件

依然是博客站目录下
$ cnpm install hexo-server --save搭建本地服务器所需插件
$ cnpm install hexo-deployer-git --save使用git方式进行部署博客所需插件

本地预览Hexo博客站

Step0

首先$ git init 先把之前安装的git，在本地博客目录下初始化

Step1

$ hexo g 生成存放静态博客站信息的文件夹public

Step2

$ hexo s 启动本地博客站服务
用浏览器打开网址http://localhost:4000 即可看到本地Hexo博客站的主页面

当大家在自己的浏览器上看到相同的网页时，恭喜，你的Hexo静态博客已经在本地成功运行起来了，只需继续完成后面的github与coding配置，就能让我们的个人博客上线啦！！

Github与Coding的用前说明

两者均用的策略

通过DNS域名解析设置，使Github 作为外网的访问仓库，Coding作为国内的访问仓库。这样好处是保内外访问的稳定性，同时能让内外搜索引擎都能抓取到博客站，不会受到限制。这就是我们本文主题Github&Coding双管齐下的核心

必看提示

• 下面配置的顺序先是配置Github，再是Coding。

• 如果你还没有Coding帐号或者为了博客站同步部署新建一Coding个帐号，请用你的Github注册登陆的邮箱注册Coding帐号，这将方便很多

进行Github配置

• 如果你已经有了github和配置了ssh或者https，可直接跳到Coding的配置部分即可
• 如果你没有github，很好，按照下方步骤依次执行即可

Setp1 创建Github Pages 远程仓库

如果没有注册github帐号，先注册一个(注册网址)，登陆后回到github主页，点击start a project

紧接着会出现上图情况，在Respository name下位置填写：“自己设计的博客名称”+github.io组成。ps:这就是我们Github上个人博客的二级域名，需要把它记录下来，后面需要用。

点击下方的 Create respository，会出现下图的情况，点击ssh，后面的地址是我们要通过ssh来把本地和远程github仓库相连接的地址

这个地址就是Github远程仓库的连接地址，现在我们把这个地址复制保存下来，在后面Hexo上线部署时要用。
![Uploading githubsettings_128839.png . . .]

Step2 配置本地和Github的ssh传输连接

打开终端输入$ ssh-keygen -t rsa -b 4096 -C "你注册Github时的邮箱"回车
之后系统显示Enter file in which to save the key(/xxx/.ssh/id_rsa): 我们记住（）中的地址是保存私钥保存地址及文件，之后继续一路回车回车。结束上面的操作后，我们打开在上一步生成的ssh私钥$ sudo cat /Users/your_user_directory/id_rsa.pub ，把终端上显示的一大段结果复制下来

我们回到github页面点击我们github的登陆用户，在下拉菜单中点击Settings,如下图

现在已经跳转到了Settings页面，我们在左侧栏中点击SSH and GPG keys,再点击右侧的New SSH key按键

此时我们可以看到下图情况，Title给这个key起个别名，在Key中，粘贴进去我们之前一步从终端保存下来的那一大段密钥。之后点击下方Add SSH key

现在我们测试一下本地和github的ssh配置是否正确，打开终端输入$ ssh -T git@github.com
如果你看到了一句提示信息:
Hi (你的注册用户名)! You've successfully authenticated, but GitHub does not provide shell access.
那么说明已经配置好了github远程仓库与本地。

Coding配置

Setp1 创建Coding Pages 远程仓库

先到Coding官网注册一个帐号Coding官网，登陆后点击侧边栏的项目，再点击添加项目

项目名称填写：自己设计的名称+coding.me。color="#FF0000">(ps:这就是我们Github上个人博客的二级域名，需要把它记录下来，后面需要用。)
这里的选项可以选择私有或者公开，就看你想不想让别人看了。之后，我们点击底部的创建项目*

创建完项目之后点击左侧的代码一栏，就会出现下方状体

点击页面中的SSH，此处显示的内容就是我们Coding远程仓库的链接地址，复制保存下来，在后面Hexo上线部署时要用。

Step2 配置本地和Coding的ssh传输连接

回到浏览器，在Coding登陆后，点击右上角用户头像,
点击左边栏的账户-->SSH 公钥

我们打开之前在配置Github时候的ssh私钥$ cat /Users/your_user_directory/id_rsa.pub，把终端上显示的一大段结果复制下来,粘贴到公钥内容栏中，公钥名称可自己定义。
点击永久有效，再点击添加完成提交。

现在我们测试一下本地和Coding的ssh配置是否正确.。
打开终端输入$ ssh -T git@git.coding.net
如果你看到了一句提示信息:
Coding.net Tips : [Hello! You've connected to Coding.net via SSH. This is a deploy key.]
那么说明已经配置好了Coding远程仓库与本地。

多个SSH私钥配置经验

设置多个私钥

如果你的Coding 和 Github的注册邮箱不能满足一样，或者说他们有各自的ssh私钥。我们通过配置ssh连接时候，更换不同私钥文件名称来分别存储。

Step1

（ps:如果你Github已经本地生成了私钥，这块可以不做，但是coding部分的私钥文件名要区分你之前的私钥文件名）
终端输入$ ssh-keygen -t rsa -b 4096 -C "你注册Github时的邮箱"
终端显示Enter file in which to save the key(/xxx/.ssh/id_rsa):id_rsa_github
这里代表着，你的github远程仓库绑定的是这个邮箱，私钥名称为id_rsa_github
之后继续连续回车到结束

建立Coding的ssh私钥
终端输入$ ssh-keygen -t rsa -b 4096 -C "你注册Coding时的邮箱"
终端显示Enter file in which to save the key(/xxx/.ssh/id_rsa):id_rsa_coding
这里代表着，你的coding远程仓库绑定的是这个邮箱，私钥名称为id_rsa_coding
之后继续连续回车到结束

Step2

在本地保存ssh私钥文件所在的目录新建一个config配置文档，以我的为例
终端输入$ vim ~/.ssh/config，里面填写如下内容，其中IdentityFile是你自己存放ssh私钥的文件名和文件路径，切记。

Host github.com
    HostName        github.com
    User            git
    IdentityFile    /home/redredleaf/.ssh/id_rsa_github

Host coding.net
    HostName        coding.net
    User            git
    IdentityFile    /home/redredleaf/.ssh/id_rsa_coding

上面两步操作完后，我们的私钥文件所在目录的结构是：

注意权限

如果你在$ ssh-keygen -t rsa -b 4096 -C "你注册Github时的邮箱"这步的时候用了sudo，或者在root用户下执行的，那么你后续的ssh连接和hexo本地提交到远程仓库的命令都必须都是在root权限下执行，否则会出现Permission denied (publickey)的情况

Hexo的上线部署

我们在Coding和Github配置ssh的时候，就已经保存了各自的远程仓库ssh连接地址，现在把他们准备好。如果没有保存，那么可以在：

• 登陆coding后，点击左侧栏的项目-->点击建立的项目-->点击左侧栏的代码 ，之后页面中就能找到ssh的连接了
• 登陆github后，点击右上角自己的头像-->点击Your profile-->点击你的博客远程仓库，页面中就能找到ssh的连接了

Step1

通过终端 cd进入我们最开始建立本地博客站的文件夹下，执行$ vim _config.yml
在文件中找到下方图片中的位置，按照下方内容修改,并把自己的Github和Coding的ssh远程连接替换上。

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo:
        coding: 你的coding远程仓库ssh连接地址
        github: 你的github远程仓库ssh连接地址
  branch: master

coding 和 github后的内容就是我们保存下来各自的远程仓库连接。保存退出

Step2

终端输入 $ hexo clean 之前本地已经生成了一遍静态文件，现在清理一遍
终端输入 $ hexo g -d 等到命令执行完毕，我们的配置就算基本完成了

现在你可以在浏览器打开两个页面分别输入：你的博客项目名称.git，你的博客项目名称.github.io,当成功看到Hexo的hello world的页面，这代表你的Github与Coding配置Hexo站点成功啦啦。

域名配置

二级域名不好记，归属感也不强。那咱们就花一顿鱼香肉丝盖饭的钱，给自己买一个顶级域名，岂不美哉？

Step1 注册购买

我们先到阿里云官网注册一个帐号(官网地址)
之后打开域名购买地址,我这里推荐大家选择是.me的顶级域名，原因有三：

• 便宜，一般就是15块左右
• 不用备案，CNAME可以指定到我们的coding和github的项目二级域名
• 个人blog配me，有个性很搭，体现了一种我就是我，不一样的蹿天猴的feel
  自己的域名具体叫什么，就看自己的创意了。（我一般用自己的英文网名）

Step2 DNS域名解析

ps:回我们的阿里云到首页，如果大家还没有做实名认证可以先把实名认证做了，因为国内的网络管理越来越严格，在很多网络服务中这已经是必须做的了。

再登陆回我们的阿里云到首页，点击右上角的控制台，继续点击左侧栏域名与网站(万网)-->域名 此时主页中就会出现下图情况

这里我们看到刚刚购买的域名了，点击域名那行尾部的解析，之后我们就跳转配置解析页面。我们继续点击红色添加解析按键，若有认证信息请自己通过

按照上图的栏目填写选择，记录类型和主机记录其中Github和Coding设置不同之处是：

• github的解析线路处选择：海外，记录值填写自己之前保存的github二级域名地址（修改后，保存）

• coding的解析线路处选择：默认，记录值填写自己之前保存的coding二级域名地址（修改后，保存）

最终效果，以我的解析为例

Step3 Github与Coding项目的别名记录

在我们建立的本地博客目录下，进入source文件目录下，创建CNAME文件
$ vim CNAME
内容填写你购买的域名，比如我的redredleaf.me

redredleaf.me

回到Coding的我们建立的博客项目中，点击代码-->Pages服务，现在部署来源选项中，选择master 分支点击保存
再在自定义域名栏中，把我们的购买的域名填写进去，点击绑定如下图

最后我们在博客站本地目录下终端输入$ hexo g -d进行最后的提交。
当我们再次用浏览器打开我们自己域名网站的时候，成功看到Hexo基础页面，说明部署已经全部成功啦啦啦~

下期预告

• 我们的博客站需要自己的一些个性需求，需要换个主题呀，添加个文章评论转发什么的，安装配置各种有意思的装饰性配件。

• 我们的博客站还有一些必不可少的第三方统计插件来丰富我们的站点。

• Markdown写文章中，我们还可以做些什么。

以上这些在下篇文章中均会涉猎。现在我们已经把Hexo站点建立部署好了，大家可以先去Hexo官网上看文档(官文地址)，自己学习如何发布自己的文章及写作，让自己的站点先变得充实起来。