【首篇】记录本博客www.gcidea.info的搭建过程

2016-03-16

1. 前言
2. 关键词
3. 托管服务器
4. Git的安装与使用
5. 建立本地与服务器之间的ssh连接
6. 安装Node.js
7. 博客框架Hexo的安装、部署、配置、使用、更换主题
8. Jacman主题的配置
9. 域名绑定
10. 结语

前言

　　在探索各类技术的道路上，我从无数博客中学到了很多东西。这些博文中往往都是大家在实践过程中遇到的各类问题最真实的反映和汇总，因此有很强的参考性。
　　但同时，由于环境、版本、配置等等方面的不同，一些问题在每个人面前又有着不同的具体表现，让人摸不着头脑。因此，我也十分乐意分享出一些自己的经验，让大家在遇到问题时多一些尝试办法。当然，能做到这一点自然是最好了，更多的，我是想借用这样一个平台记录自己在技术学习过程中的点点滴滴，是一种总结，也是一种约束。
　　平台的选择考虑过CSDN，博客园等，可以有更多的人交流。但反而一想，搭建博客本身就是一次探索尝试的过程，因此我选择最终选择了“自己动手”，同时，在一个相对安静的环境中，也好“修炼”自己。

关键词

github | git | node.js | hexo | 域名

托管服务器

　　要搭建一个在公网可访问的博客，必须具备稳定可靠的服务器，现在有阿里云之类的不少选择，而我最终选择了使用github提供的Github Pages，这也符合github推出该项服务的宗旨。
　　选择Github Pages，自然要先有一个github账号，关于账号注册相关的内容，网上有大量资源供大家参考。这里就说明几个要点：

在自己的账号下新建的Github Pages仓库，其仓库名一定要和github账号一致。
比如，用户名为：1qaz，则仓库命名为： 1qaz.github.io　如下图所示：
建立好该仓库后，选择Settings，按默认设置即可，

选择“Launch automatic page generator”,按照自己的需求填写Tagline,Body等内容，

选择“continue to layouts”,

再在页面上方选择一个自己喜欢的主题即可（这里可以随便选一个主题，我们还使用hexo提供的更为丰富的主题，后续会说明），这时候点击“Publish page”,一个最基本的个人页面就生成了。

Git的安装与使用

　　关于Git与Github的关系，是一个老生常谈的问题了，不必多说。
　　我是在Windows上完成这个过程的，推荐使用msysgit，它是Windows版的Git，从http://msysgit.github.io/下载，然后按默认选项安装即可。安装成功后，可以在桌面右键选择“Git Bash Here”，打开一个类似于cmd的窗口如下图。

通过以下命令配置一下自己的git账户。
例如用户名为：1qaz 邮箱为1qaz@example.com，则配置如下：
git config --global user.name "1qaz"
git config --global user.email "1qaz@example.com"
想更多了解以上过程，推荐参考廖雪峰的官方网站-git教程

建立本地与服务器之间的ssh连接

　　写博客的过程自然是在本地完成内容后，将其推动到github的仓库中（不要担心，这个完整的过程是重头戏，稍候会详细说明）。这个推送的过程，每次都会弹窗提示你输入github账户的用户名和密码，很不方便。对此，github为我们提供了SSH KEYS服务，我们只要将本地的公钥手动添加到github账户的“Personal settings-SSH keys”中即可。
　　怎么生成这个公钥呢？
　　打开刚刚我们安装提到的“Git Bash”，输入以下命令：
ssh-keygen -t rsa -C "1qaz@example.com"
对于之后的提示全按回车即可。之后，进入系统盘用户(user)目录下找到.ssh目录，其中有id_rsa和id_rsa.pub两个文件，这就是SSH Keys秘钥对，id_rsa是私钥，id_rsa.pub是公钥。我们打开公钥这个文件，将其中的内容全部复制，粘贴到github账户的“Personal settings-SSH keys”中即可。这样，对于之后所有的推送请求，github账户能够识别出“你是谁”，从而有相应权限，不必每次输入用户名和密码。

安装Node.js

　　为何需要安装这个环境呢？
　　因为我们后面需要用到博客框架Hexo，而这是一个基于node.js技术开发的一个纯静态博客系统，因此自然需要Node.js的运行环境。
　　安装起来并不费力。直接从官网或者国内镜像下载安装包安装即可。在Windows下安装时务必勾选全部组件。一步步next安装完成之后，测试一下，在cmd窗口输入node -v，若提示相应版本号,则说明安装成功。
　　顺便提一下，npm是Node.js的一个包管理工具，我们在后面安装Hexo时候会用到，不过这个工具已经在安装Node环境时安装好了，我们只要测试一下能用即可。
　　输入npm -v，若提示相应版本号,则说明安装成功。

博客框架Hexo的安装、部署、配置、使用、更换主题

　　经过之前的过程，我们已经做好了各项准备工作，有了一个博客的首页，同时为后续更新博文做好了准备。但之前也提到过，github提供的主题是有限的，同时，博客是一个我们用来记录自己思考学习的地方，就这一点来讲，我们应该将精力集中在博客内容本身上。因此，我们需要有一套机制来帮助我们简化博文更新维护，博客页面样式美化等操作，这就是我使用Hexo的原因。

安装

从github上的Hexo首页https://github.com/hexojs/hexo我们可以看到Hexo的相关介绍。
在Windows平台上安装方法如下：
打开cmd窗口，使用以下命令：
npm install hexo-cli -g
即可完成安装（该过程可能较慢，需要稍等待一段时间）。

部署

部署也很简单，选择一个合适的位置，新建一个文件夹Hexo,在该文件夹中右键“Git Bash Here”，使用以下命令：
hexo init
就会在该文件夹中创建所需的全部文件。如下图：

配置

Hexo的使用还是很简单的，首先我们要进行相关配置，打开上图中的_config.yml文件，对其中主要的配置说明如下：

  
## Docs: https://hexo.io/docs/configuration.html 【hexo的文档】
## Source: https://github.com/hexojs/hexo/ 【hexo的资源地址】
            
# Site
title: "GCidea's blog" 【博客首页的一级标题】
subtitle: "gaochang | BUPT" 【博客首页的二级标题】
description: "gaochang | BUPT" 【博客的描述内容】
author: "Gao Chang" 【作者】
language: zh-CN 【语言支持】
email: gaochang@ebupt.com 【联系邮箱】
timezone:

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://yoursite.com
root: / 【根目录】
permalink: :year/:month/:day/:title/
permalink_defaults:

# Directory
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render:

# Archives
## 2: Enable pagination
## 1: Disable pagination
## 0: Fully Disable
archive: 1 【设置为1是全部展示，不折叠】
category: 1
tag: 1

# Writing
new_post_name: :title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link: true # Open external links in new tab
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
future: true
highlight: 
  enable: true
  line_number: true
  auto_detect: false
  tab_replace:

# Category & Tag
default_category: uncategorized
category_map: 
tag_map: 

# Date / Time format
## Hexo uses Moment.js to parse and display date
## You can customize the date format as defined in
## http://momentjs.com/docs/#/displaying/format/
date_format: YYYY-MM-DD
time_format: HH:mm:ss

# Pagination
## Set per_page to 0 to disable pagination
per_page: 10
pagination_dir: page

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: jacman 【所选的Hexo主题，默认的是landscape，这里我换成了jacman，稍后会说明】

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git 【部署类型】
  repository: https://github.com/gcidea/gcidea.github.io.git 【自己所建立的github page仓库地址】
  branch: master 【部署到master分支】

以上修改中要特别注意：
修改_config.yml文件，其中type需要指明为git 而不是github
修改之后，直接hexo generate–hexo deploy是会报错的，提示的错误是depolyer:git not found
这时需要在git bash中输入以下命令来明确保存depolyer:
npm install hexo-deployer-git --save

使用

经过以上过程，我们就有了一个写博客的环境了~
在hexo的文件夹下，输入以下命令：
hexo new 'a_new_blog'

就会在_posts目录下创建一个.md的博客文件。说到这里，自然要提到markdown了，hexo很好地支持markdown语言，而且由于markdown简单的语法，使用起来十分方便，关于markdown语法的介绍网上有很多，这里就不赘述了。

更换主题

　　默认的主题是landscape，插件或者页面效果不是那么丰富，hexo提供了很多主题https://hexo.io/themes/供大家选择，我这里选用了jacman主题，是经过优化的pacman主题。
　　主题更换方法：
在hexo文件夹的themes文件夹下新建jacman文件夹，在jacman文件夹中右键选择“Git Bash Here”，输入以下命令：
git clone https://github.com/wuchong/jacman.git
就完成了主题文件的下载；其次，在上文提到的_config.yml文件中，将“theme”一项配置为“jacman”即可。
通过以上过程，我们就可以顺利地进行日常博客的写作了。

Jacman主题的配置

　　Jacman提供了丰富的插件，在该主题文件夹下的_config.yml中进行配置，有github名片、友情链接、知乎、新浪微博、微博秀等等，配置的方法都很简单，基本上就是去相应网站登录自己的账户，将自己的用户ID之类的标识配置在该文件中即可。

域名绑定

　　这个可以说是一个可选择的步骤，我们经过上面一大堆工作建立的github pages本身已经可以通过http://gcidea.github.io访问了，设定域名是一个个性化的过程。
　　域名注册商的选择，国内国外都有，本来在GoDaddy（狗爹）上购买，无奈不知怎的支付宝支付始终不成功，就这样，我使用了阿里旗下的万网，效果也很不错。域名注册后，域名解析的过程在阿里云的用户中心中有很详细的说明，参照这个操作就好了。主要要搞清A记录还有CNAME记录的区别和作用。
　　A类地址指向的IP其实是github pages的一个公共IP，而域名之所以能明确地和你个人的主页对应起来，还需要在github pages仓库下做一下配置：
新建一个名称为CNAME的文件，在其中只写一行：gcidea.info，这样当域名解析至github pages的IP时，github就可以通过你的域名和索引的全部用户的CNAME文件进行匹配，从而找到你的主页。

结语

说了这么多，基本上就是博客搭建的整个过程了。这其中遇到了很多问题，也在网上参考了很多别人的经验，在此表示感谢。其中还有很多一笔带过的地方，每个地方展开说可能都是一篇文章，都值得我们仔细思考。

gaochang.gcidea

The relentless pursuit of perfection.

搭建部署工程