【2018更新】小白独立搭建博客--Github Pages和Hexo简明教程

【更新至2018/1/10】

首先欢迎各位来参观个人博客：Ryane's Blog

Github地址：https://github.com/ryanlijianchang/ryanlijianchang.github.io

CSND地址：http://blog.csdn.net/ljcitworld

摘要：这是一篇有关如何使用Github Pages和Hexo搭建本身独立博客的详尽教程，里面介绍了如何使用和配置Hexo框架，如何将Hexo部署到本身的Github项目中，域名注册，以及域名的绑定，还有我在搭建本身博客过程当中所遇到的各类困难。

前言

我是一名安卓入门开发者，但，我只是入门！并且我对网站开发以及前端的知识几乎是零基础，因此在本身刚接触这个东西的时候，我像不少人同样，都是上网找教程，可是要知道，**那都是程序员的教程。**因此对于我这个网站技术小白来讲，真是很难受，因此藉此机会写一篇让小白看得懂的教程。若是你是一个小白并且又想作本身的博客，能够，请跟着个人脚步，我会带你真真正正作一个属于你本身的博客。

若是你还不知道你为何要作一个博客，推荐你看：《我为何写博客》

入门门槛

1. 必须耐得住折腾。
2. 刻苦的学习精神和耐心。

关于Github

1、Github的优势

• GitHub是基于git实现的代码托管。git多是目前最好用的版本控制系统了，很是受欢迎。
• GitHub能够无偿使用，而且快速稳定。
• Github上面的世界很精彩，用久了你的眼界会开阔不少。

2、什么是Github Pages

Github Pages能够被认为是用户编写的、托管在github上的静态网页。

3、为何要使用Github Pages

• 能够绑定你的域名(但暂时貌似只能绑定一个)。
• 简单快捷，使用Github Pages能够为你提供一个免费的服务器，免去了本身搭建服务器和写数据库的麻烦。

安装Node.js

在 Windows 环境下安装 Node.js 很是简单，仅须到官网下载安装文件并执行便可完成安装。 像个人是Windows 64位，直接下载安装，无脑下一步就好了，不须要配置环境变量。

安装Git

去Git官网根据你的电脑参数，下载对应版本。

下载完成，经过在命令行输入 git version 查看是否安装成功，有输出版本号说明安装成功。

鼠标邮件菜单里就多了Git GUI Here和Git Bash Here两个按钮，一个是图形界面的Git操做，一个是命令行，咱们选择Git Bash Here。

• 安装教程：如何在windows下安装GIT

• Git入门教程：Pro Git（中文版）

• Git基本操做：

Hexo

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

1、Hexo安装

桌面右键鼠标，点击Git Bash Here，输入npm命令便可安装

npm install hexo-cli -g

npm install hexo-deployer-git --save

第一句是安装hexo，第二句是安装hexo部署到git page的deployer，两个都须要安装。

以下图即安装完成。

2、Hexo初始化配置

建立Hexo文件夹

安装完成后，根据本身喜爱创建目录（如F:\Blog\Hexo），直接进入F:\Blog\Hexo文件夹下右键鼠标，点击Git Bash Here，进入Git命令框，执行如下操做。

$ hexo init

安装 Hexo 完成后，Hexo 将会在指定文件夹中新建所须要的文件。Hexo文件夹下的目录以下：

本地查看效果

执行下面语句，执行完便可登陆localhost:4000查看效果

hexo generate
hexo server

登陆localhost:4000，便可看到本地的效果以下：

将博客部署到Github Pages上

那么如今本地的博客已经搭建起来了，可是咱们只能够经过本地链接查看咱们的博客。那么咱们如今须要作的就是把本地的博客发布到服务器上，让别人也能够链接咱们的博客，而Github Pages就帮我完成了这件事情。可是Github Pages的代码就是寄存在Github上面的。那么接下来咱们须要在Github上面建立一个新的项目。

1、注册Github帐户

1. 访问Github首页
2. 点击右上角的 Sign Up，注册本身的帐户

2、建立项目代码库

1. 注册完登录后，咱们就建立一个咱们本身的Github Pages项目。点击New repository。
2. 建立要点以下：

3、配置SSH密钥

配置Github的SSH密钥可让本地git项目与远程的github创建联系，让咱们在本地写了代码以后直接经过git操做就能够实现本地代码库与Github代码库同步。操做以下：

第一步、看看是否存在SSH密钥(keys)

首先，咱们须要看看是否看看本机是否存在SSH keys,打开Git Bash,并运行:

$ cd ~/. ssh

检查你本机用户home目录下是否存在.ssh目录

若是，不存在此目录，则进行第二步操做，不然，你本机已经存在ssh公钥和私钥，能够略过第二步，直接进入第三步操做。

第二步、建立一对新的SSH密钥(keys)

$ssh-keygen -t rsa -C "your_email@example.com"
#这将按照你提供的邮箱地址，建立一对密钥
Generating public/private rsa key pair.
Enter file in which to save the key (/c/Users/you/.ssh/id_rsa): [Press enter]

直接回车，则将密钥按默认文件进行存储。此时也能够输入特定的文件名，好比/c/Users/you/.ssh/github_rsa

接着，根据提示，你须要输入密码和确认密码（说到这里，若是你很放心，其实能够不用密码，就是到输密码的地方，都直接回车，因此每次push就只管回车就好了。所谓的最安全的密码，就是没有密码 哈哈）。相关提示以下：

Enter passphrase (empty for no passphrase): [Type a passphrase]
Enter same passphrase again: [Type passphrase again]

输入完成以后，屏幕会显示以下信息：

Your identification has been saved in /c/Users/you/.ssh/id_rsa.
Your public key has been saved in /c/Users/you/.ssh/id_rsa.pub.
The key fingerprint is:
01:0f:f4:3b:ca:85:d6:17:a1:7d:f0:68:9d:f0:a2:db your_email@example.com

第三步、在GitHub帐户中添加你的公钥

运行以下命令，将公钥的内容复制到系统粘贴板(clipboard)中。

clip < ~/.ssh/id_rsa.pub

接着：

1. 登录GitHub,进入你的Account Settings.

2.选择SSH Keys

3.粘贴密钥，添加便可

第四步、测试

能够输入下面的命令，看看设置是否成功，git@github.com的部分不要修改：

$ ssh -T git@github.com

若是是下面的反馈：

The authenticity of host 'github.com (207.97.227.239)' 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就好，而后会看到：

第五步、设置用户信息

如今你已经能够经过SSH连接到GitHub了，还有一些我的信息须要完善的。 Git会根据用户的名字和邮箱来记录提交。GitHub也是用这些信息来作权限的处理，输入下面的代码进行我的信息的设置，把名称和邮箱替换成你本身的，名字根据本身的喜爱本身取，而不是GitHub的昵称。

$ git config --global user.name "ryanlijianchang"//用户名
$ git config --global user.email  "liji.anchang@163.com"//填写本身的邮箱

第六步、SSH Key配置成功

本机已成功链接到github。

4、将本地的Hexo文件更新到Github的库中

第一步、登陆Github打开本身的项目 username.github.io

第二步、打开以后，点击SSH，选择SSH类型地址

第三步、复制地址

第四步、打开你一开始建立的Hexo文件夹（如F:\Blog\Hexo），用记事本打开刚文件夹下的_config.yml文件

第五步、在配置文件里做以下修改，保存

第六步、在Hexo文件夹下执行：

hexo g
hexo d

或者直接执行

hexo g -d

执行完以后会让你输入github的帐号和密码，输入完后就能够登陆咱们本身的部署在Github Pages服务器上的博客了。对应的地址是 username.github.io(个人是：ryanlijianchang.github.io)。

假如这时候，报错 ERROR Deployer not found: git，那么就是你的deployer没有安装成功，你须要执行以下命令再安装一次：

npm install hexo-deployer-git --save

这样，你再执行hexo g -d，你的博客就部署到Github上了。

第七步、在浏览器上输入本身的主页地址

在浏览器上输入Github Pager为咱们生成的外链（例如个人是：https://ryanlijianchang.github.io/，而你的只须要把你的github用户名替换掉这个连接中的ryanlijianchang，由于个人用户名是这个，那么你本身的专属博客地址就是：https://[您的用户名].github.io/）便可看到本身的博客了。

固然，每个人均可以经过这个地址访问到你的博客了。

美化本身博客

那么如今咱们的博客已经挂在了Github服务器上面，别人已经能够经过地址来登录咱们的博客了，可是咱们这时就有了新的需求，就是本身的博客并很差看，那怎么办的？这很简单，要知道不少前端开发者在Hexo框架下开发了不少的主题给咱们使用，咱们只须要把他们的主题克隆过来，而后经过修改配置文件便可达到咱们所须要的效果。

那么咱们应该怎么修改呢？

1、进入Hexo的官网主题专栏

2、挑选咱们喜欢的主题

能够看到有不少主题给咱们选，咱们只要选择喜欢的主题点击进去，而后进入到它的github地址，咱们只要把这个地址复制下来(例如我是选择：hexo-theme-next这个主题)

3、克隆主题

再打开Hexo文件夹下的themes目录（F:\Blog\hexo\themes），右键Git Bash，在命令行输入:

git clone https://github.com/iissnan/hexo-theme-next(此处地址替换成你须要使用的主题的地址)

下载中，等待下载完成：

4、修改Hexo配置文件

下载完成后，打开Hexo文件夹下的配置文件_config.yml

修改参数为：theme: hexo-theme-next

5、部署主题，本地查看效果

返回Hexo目录，右键Git Bash，输入

hexo g
hexo s

打开浏览器，输入 http://localhost:4000/ 便可看见咱们的主题已经更换了。

6、若是效果满意，将它部署到Github上

打开Hexo文件夹，右键Git Bash，输入

hexo clean   (必需要，否则有时由于缓存问题，服务器更新不了主题)
hexo g -d

7、打开本身的主页，便可看到修改后的效果

更多修改效果请查看对应主题的说明文档，点击此查看本主题(Next)对应的说明文档。

在博客写文章

1、用hexo发表新文章

$ hexo n "文章标题"

其中 个人家 为文章标题，执行命令 hexo n "个人家" 后，会在项目 \Hexo\source_posts 中生成 个人家.md 文件，用编辑器打开编写便可。

固然，也能够直接在\Hexo\source_posts中新建一个md文件，我就是这么作的。 写完后，推送到服务器上，执行如下命令便可在咱们的站点看到新的文章。

$ hexo g #生成
$ hexo d #部署 # 可与hexo g合并为 hexo d -g

2、用Markdown写文章

咱们注意到在 \Hexo\source_posts 文件夹下存放着咱们的文章，它们的格式都是以.md格式结尾的，没错，Hexo也是支持Markdown语法的，因此当咱们须要写具备格式化的文章时，咱们可使用支持Markdown语法的编辑器进行文章编译，而后保存文件到 \Hexo\source_posts 文件夹下便可。

复制进去以后，只要执行

$ hexo d -g

推送到咱们的Github仓库便可。

那么什么是Markdown？

Markdown 是一种轻量级的「标记语言」，它的优势不少，目前也被愈来愈多的写做爱好者，撰稿者普遍使用。看到这里请不要被「标记」、「语言」所迷惑，Markdown 的语法十分简单。经常使用的标记符号也不超过十个，这种相对于更为复杂的HTML 标记语言来讲，Markdown 可谓是十分轻量的，学习成本也不须要太多，且一旦熟悉这种语法规则，会有一劳永逸的效果。

Markdown有什么优势？

• 专一你的文字内容而不是排版样式。
• 轻松的导出 HTML、PDF 和自己的 .md 文件。
• 纯文本内容，兼容全部的文本编辑器与字处理软件。
• 可读，直观。适合全部人的写做语言。

我该用什么工具？

• Windows下可使用 MarkdownPad2。
• 在 Mac OS X 上，我建议你用 Mou 这款免费且十分好用的 Markdown 编辑器。
• Web 端上，我强烈推荐 简书 这款产品。

关于Markdown的更多资料能够查看以下：

• 认识与入门 Markdown
• Markdown入门指南

将本身的域名关联到Github Pages上

不少朋友建立了本身的博客以后会选择买一个属于本身的域名，而后将本身域名绑定到本身的Github Pages博客上，其实这也并不难，只要你有个域名。

1、购买域名

若是你不是颇有钱，在阿里云上，你只要几块钱就能够买到一个域名。

选择你喜欢的域名，而后购买便可。

2、配置CNAME文件

在 \hexo\source 文件夹下建立文件 CNAME （新建记事本文件命名CNAME，而后打开）

内容为你的域名，例如个人域名是：ryane.top

在Hexo文件夹提交

hexo g -d

3、修改DNS的DNS

1.若是你是在阿里云购买域名的话，请登陆阿里云网站。打开我的中心，点击域名

2.选择管理

3.修改DNS为

f1g1ns2.dnspod.net 
f1g1ns1.dnspod.net

4、域名解析

1. 打开DNSPOD，注册一个帐户

2. 点击添加域名，把你的域名添加进去，如无心外，添加完以后就是如下这个状态

3. 此时点击添加记录，添加两个记录，一个主机记录为 @， 一个为 www，而记录值都是填同一个，填你的博客主页对应的ip，添加完后以下。

4. 可是如何获取ip值呢？打开运行，输入cmd，打开命令窗口输入 ping 主页地址 ， 红色部分即为你的ip值

5. 将IP输入过去，而后会提示你到域名注册的地方修改DNS。等待生效，最迟72小时生效。便可经过你的域名浏览你的博客主页。

结语

当你完成了你的博客以后，相信你的心情跟我刚作完的心情是同样的，即使很累，可是当本身的博客成型以后，本身仍是有一个成就感的，那么完成后，之后的路还很长，真正想要本身博客可以积累人气，还得靠好的内容，因此认真写文章吧，相信你会受益于此的。

若是你们有什么问题的话，能够在我留言板下留言，我看到评论时会第一时间回答你们。

参考资料：

1. Markdown入门手册中文版
2. Markdown--入门指南
3. 如何搭建一个独立博客——简明 Github Pages与 jekyll 教程 by cnfeat
4. Hexo搭建Github静态博客 by 金石开
5. 使用SSH密钥链接Github【图文教程】 by 轩枫