基于Hexo+GitHub Pages+独立域名 搭建博客详细教程

一、摘要

这是一篇利用GitHub Pages以及Hexo以及自己的独立域名来搭建自己的个人博客。

本文参考多篇文章（具体参看文章最后）并记录了过程中遇到的问题以及解决方案！

此博客用于以后需要备用，并为其他人提供指导。

二、系统环境配置

我们需要以下环境：
Windows 10
Node.js
Git

安装node.js

下载Node.js
在 Windows 环境下安装 Node.js 非常简单，仅须到官网下载安装文件并执行即可完成安装。

安装Git

下载Git
同样一路next即可！

· 安装教程： 如何在Windows下安装Git

三、安装Hexo

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。

在任意盘新建hexo文件夹并右键，选择Bit Bash Here，如图：

然后输入安装hexo命令

$ npm install -g hexo-cli

接下来我们对hexo 进行初始化

$ hexo init

然后执行以下命令，系依赖包统会自动根据package.json文件中dependence的排位置安装所有的
$ npm install
然后生成部署文件，启动本地服务

$ hexo g #或者hexo generate
$ hexo s #或者hexo server

之后再http：//localhost：4000/ 查看

hexo的几个常用命令

hexo generate (hexo g) 生成静态文件，会在当前目录下生成一个新的叫做public的文件夹
hexo server (hexo s) 启动本地web服务，用于博客的预览
hexo deploy (hexo d) 部署博客到远端服务器
hexo new "postName" #新建文章
hexo new page "pageName" #新建页面

可以简写为

$ hexo n == hexo new
$ hexo g == hexo generate
$ hexo s == hexo server
$ hexo d == hexo deploy

其实就是单词的首字母

以后新建文章或者修改，可以先在本地预览之后进行部署

四、GitHub Pages设置

GitHub的优点

GitHub是基于git实现的代码托管。git可能是目前最好用的版本控制系统了，非常受欢迎。

GitHub可以免费使用，并且快速稳定。

Github上面的世界很精彩，用久了你的眼界会开阔很多。

什么是GitHub Pages？

Github Pages可以被认为是用户编写的、托管在github上的静态网页。GitHub Pages 本用于介绍托管在GitHub的项目，不过，由于他的空间免费稳定，用来做搭建一个博客再好不过了。

为什么使用GitHub Pages

可以绑定你的域名(但只能绑定一个)。

简单快捷，使用Github Pages可以为你提供一个免费的服务器，免去了自己搭建服务器和写数据库的麻烦.

五、相关操作

注册GitHub账号

在创建博客之前，当然必须有GitHub的帐号，该帐号将用来创建项目，默认的域名username.github.com/projectName中的username也要用到这个帐号。（请记住username，之后会多次用到）

注意：下面涉及到的一些命令凡是更用户名和项目名有关的一律会用这里的username和projectName代替，注意替换

访问：http://www.github.com/，注册你的username和邮箱，邮箱十分重要，GitHub上很多通知都是通过邮箱的。比如你的主页上传并构建成功会通过邮箱通知，更重要的是，如果构建失败的话也会在邮件中说明原因。

创建项目仓库

在创建博客之前，还需要用已有的帐号创建一个项目，上面那个链接的projectName将是这里即将创建的项目名称。

在Git中，项目被称为仓库(Repository)，仓库顾名思义，当然可以包含代码或者非代码。将来我们的网页或者模板实际上都是保存在这个仓库中的。

登录后，访问https://github.com/new，创建仓库如下图：

每个帐号只能有一个仓库来存放个人主页，而且仓库的名字必须是username/username.github.io，这是特殊的命名约定。你可以通过http://username.github.io 来访问你的个人主页。

创建了仓库后，我们就需要管理它，无论是管理本地仓库还是远程仓库都需要Git客户端；Git客户端实际上十分强大，它本身就可以offline的创建本地仓库，而本地仓库和远程仓库之间的同步也是通过Git客户端完成的。

配置SSH

上传文件需要配置ssh key，不然无法上传。
首先先检查一下本地是否已经存在ssh key,在Git Bash输入以下指令（任意位置点击鼠标右键），检查是否已经存在了SSH keys。

$ ls -al ~/.ssh

如果不存在就没关系，存在就删除其中的所有文件

设置你的那么和email（如果你安装git时已经有了这步操作就跳过，name可以随意，但最好设置成你的github的name防止遗忘。邮箱与你的github邮箱没什么关系，但是最好写为同一个，好记住）

$ git config --global user.name "name"
$ git config --global user.email "<your email>"

生成ssh密钥

输入以下指令（邮箱就是你注册Github时候的邮箱）后，回车：
$ ssh-keygen -t rsa -C “XXXXX@qq.com”

一路回车就可以了，如果设置了密码就记住。

这一步在~/.ssh/下生成了两个文件id_rsa 和 id_rsa.pub

获取key

$ cat ~/.ssh/id_rsa.pub

然后拷贝key（key是以ssr（应该是这个开头的）开头 你的邮箱结尾的一长串字符。

在GitHub上添加SSH密钥

在https://github.com/settings/keys下 add new ssh key

title可随意填写，key就是我们拷贝的key

接下来测试一下是否配置正确。

输入一下命令：

$ ssh git@github.com

成功后大概会出现一下内容：（可能会有部分不一致）

The authenticity of host 'github.com (192.30.252.128)' can't be established.
RSA key fingerprint is 16:27:ac:a5:76:28:2d:36:63:1b:56:4d:eb:df:a6:48.
Are you sure you want to continue connecting (yes/no)? yes
Warning: Permanently added 'github.com,192.30.252.128' (RSA) to the list of known hosts.
Hi git-xuhao! You've successfully authenticated, but GitHub does not provide shell access.
Connection to github.com closed.

六、部署到GitHub

配置_config.yml

编辑 你所建立的hexo文件夹中_config.yml（用记事本打开）修改deployment部分。

# Deployment
## Docs: https://hexo.io/docs/deployment.html
# ssh://git@github.com/Asuna520/Asuna520.github.io
deploy:
 type: git
 repo: ssh://git@github.com/Asuna520/Asuna520.github.io
 branch: master

自行替换成你的GitHub的名称。注意：每个：后面必须有一个空格！！！

安装Git包

$ npm install hexo-deployer-git --save

部署到GitHub上

$ hexo deploy

现在我们可以通过访问 http://git-xuhao.github.io/ 来访问我们自己的博客啦,可以看到我们的博客已成功搭建，接下来就是一些主题的优化和配置呢。

### 配置文件的相关说明

# Hexo Configuration
## Docs: http://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site  这下面的几项配置都很简单，你看我的博客就知道分别是什么意思
title: blog name    #博客名
subtitle: Goals determine what you are going to be  #副标题
description: Goals determine what you are going to be #用于搜索，没有直观表现
author: huangjunhui #作者
language: zh-CN #语言
timezone:   #时区，此处不填写，hexo会以你目前电脑的时区为默认值

# 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:

# 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
 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    #每页显示的文章数，0表示不分页
pagination_dir: page

# Extensions    插件配置，暂时不配置
## Plugins: http://hexo.io/plugins/
## Themes: http://hexo.io/themes/
plugins:
- hexo-generator-feed
theme: light    #使用的主题

feed:   #之后配置rss会用，此处先不配置这个
 type: atom
 path: atom.xml
 limit: 20  

# Deployment    用于部署到github，之前已经配置过
## Docs: http://hexo.io/docs/deployment.html

deploy:
 type: git
 repo: ssh://git@github.com/Asuna520/Asuna520.github.io
 branch: master

七、如何添加一篇文章

新建一篇博文可通过以下的命令

$ hexo new "name"

其中name为博文的名字，建立完成之后，可以在./source/_posts文件夹下发现我们刚刚建立的 name.md文件。使用你熟悉的编辑器打开，便可以进行博文的撰写。博文支持MarkDown语法的编写，下面是一个示例文件的内容（推荐使用MarkDown）（使用MarkDown时需要安装[awesomium_v1.6.6_sdk_win](http://markdownpad.com/download/awesomium_v1.6.6_sdk_win.exe
))
MarkDown界面如下：

---
title: name 
date: 2016-04-06 10:34:21
permalink: （url中显示的标题）
tags: 
- 开始
- 日志
categories: 
- 日志
---
Hello world，Test！！

博文写好之后，在每次部署前，需要将博客生成静态文件

$ hexo g

生成之后进行部署

$ hexo d

然后打开我们的博客 http://Asuna520.github.io/ 已经可以看到刚刚新建的博文。

八、主题相关

你会发现你预览的博客会很大众化，你想让你的博客与众不同？吸引更多的关注？

可以参考知乎的主题推荐：

有哪些好看Hexo主题

我使用的是第一个next主题，具体相关操作，更多关于主题的设置请自行查阅相关文档，当然如果你认识我，也可以联系我进行询问。

九、专属域名的绑定

这时候，你会发现你的域名不怎么好使用，你想要一个属于自己的独特的域名。

恩，首先，你需要去买一个域名。（推荐阿里云 .xyz的域名 第一年只需要6元，而且.xyz很有潜力，谷歌母公司也是使用的.xyz域名哦）

进入阿里云,选择解析

按照图片所示添加解析，其中ip地址，以及其他相关内容全部换成自己的

ip地址 可以通过为192.30.252.154 和192.30.252.153这两个固定ip！
（图片由于自己一开始使用时，没注意，所以ip错了。。。懒得改了）

最后，在source中添加文件 CHAME 不带有任何后缀！！！

用记事本打开之后，加入你自己的域名xxxxx.xyz 不需要www也不需要http的前缀！！！！

重新部署一下！

恭喜，过一会儿就可以通过你的域名看到你的博客啦~~~~

十、总结

大致过程基本上就是这样了，其中个别步骤，或者部分细节性问题没有赘述，有问题请自行百度或者联系我~~~

作为一个程序员一定要有自己独立解决问题的能力哦~记住Google与你同在~~

加油！！！

本文主要部分来自于：基于Hexo+GitHub Pages 搭建个人博客教程