手把手教从零开始在GitHub上使用Heo搭建博客教程(一)-附GitHub注册及配置

2016-07-04 13:35:00

前言

有朋友问了我关于博客系统搭建相关的问题，由于是做开发相关的工作，我给他推荐的是使用github的gh-pages服务搭建个人博客。

推荐理由：

免费：github提供gh-pages服务是免费的，有300MB空间；
开源：由于github开源的原因，有很多人参与其中，自然技术支持很好。
便捷：博客完全托管在github上，基本上不需要花时间去管理，博客使用Markdown语法，上手很容易。

需要了解的内容（能掌握更好）：

html+css+javascript
git基本语法
markdown语法
nodejs

目前，在github上搭建博客系统使用最多就是Hexo和Jekyll。
Hexo是基于Nodejs开发的，Jekyll是基于Ruby开发的。

通过两个系统使用的比较，个人习惯喜欢Hexo，所以本文介绍的是Hexo搭建博客，如果你对Jekyll也有兴趣，可自行学习。

安装Git客户端

已安装过的用户略过

下载Git客户端：下载地址
安装Git客户端：Windows用户直接Next就可以了。Mac和Linxu系统的用户可通过命令方式安装，这里不详细介绍了。

注册GitHub

老手和已注册过的用户略过

打开GitHub官网：https://github.com/
填写注册信息进行注册操作：没有登录的用户打开网站首页就会显示注册的操作（如图所示），或者是点击Sign up按钮进入注册详情页。
填写好注册信息，点击Sign up for GitHub(注册)按钮后，接下来是选择协议部分。根据自己的情况选择相关的协议，一般人选的都是免费的那一项。

创建仓库

登录github账号：在github首页点击Sign in按钮进入登录页面。填写用户名或邮箱和密码，点击Sign in按钮登录。
点击创建仓库：点击在登录的用户图像左边的+号和下三角符号按钮。
填写创建仓库信息：
仓库名称必须是用户名.github.io（别问我为什么，人家就是这样规定的），比如我的用户名是SeayXu，就是SeayXu.github.io。
填写好相关信息，点击Create repository(创建仓库)按钮。

配置SSH

老手和已配置过的用户略过

打开Git Bash终端：在桌面右键，会出现"Git Bash here"的选项，点击即可。
设置user name和email：

$ git config --global user.name "你的GitHub用户名"
$ git config --global user.email "你的GitHub注册邮箱"

生成ssh密钥:输入下面命令

$ ssh-keygen -t rsa -C "你的GitHub注册邮箱"
一般情况下是不需要密码的，所以，接下来直接回车就好。
此时，在用户文件夹下就会有一个新的文件夹.ssh，里面有刚刚创建的ssh密钥文件id_rsa和id_rsa.pub。
注：id_rsa文件是私钥，要妥善保管，id_rsa.pub是公钥文件。

添加公钥到github：
点击用户头像，然后点击显示的Settings(设置)选项；

在用户设置栏，点击SSH and GPG keys选项，然后点击New SSH key(新建SSH)按钮；

将id_rsa.pub中的内容复制到Key文本框中，然后点击Add SSH key(添加SSH)按钮；

测试SSH：

$ ssh -T git@github.com
接下来会出来下面的确认信息：

The authenticity of host 'github.com (207.97.227.239)' can't be established.
RSA key fingerprint is 17:24:ac:a5:76:28:24:36:62:1b:36:4d:eb:df:a6:45.
Are you sure you want to continue connecting (yes/no)?
输入yes后回车。
然后显示如下信息则OK(其中的SeayXu是用户名)。

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

以上是准备工作。

创建本地仓库

打开Git Bash终端，等待执行命令。

新建仓库文件夹：这里就取名为blog。

$ mkdir blog

进入到blog文件夹：

$ cd blog # 切换到blog目录

初探Hexo

如果没有安装Nodejs，请先安装Nodejs，Nodejs官网；
以下操作是在blog文件夹中。

安装Hexo

$ npm install hexo-cli -g
hexo全局安装一次就够了，后面可以直接使用hexo相关的操作。

初始化Hexo

$ hexo init

安装依赖

$ npm install

启动Hexo

$ hexo server
启动之后，打开浏览器，在地址栏输入：http://localhost:4000，你会看到Hexo的示例页面。

注：此时可以初始化git本地仓库了，或者是等本地博客搭建好之后也可以。

再探Hexo

新建文章：

$ hexo new
此时在source_posts文件夹中便会多出一个文档"title.md".
如果要删除，直接在此文件夹下删除对应的文件即可。

生成静态页面

$ hexo generate
生成的静态内容在public文件夹内。

清除生成内容

$ hexo clean
执行此操作会删除public文件夹中的内容。

部署Hexo

$ hexo deploy
该操作会将hexo生成的静态内容部署到配置的仓库中，请看下面介绍。

部署Hexo

编辑配置文件，关联远程仓库：
在编辑器中打开Hexo配置文件_config.yml，找到下面内容：

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

添加github仓库信息：

# Deployment## Docs: https://hexo.io/docs/deployment.htmldeploy:  type: git  repo: git@github.com:SeayXu/seayxu.github.io.git # github仓库地址  branch: master # github分支

注意：type、repo、branch的前面有两个空格，后面的:后面有一个空格