【武汉-第五十八期】如何使用GITHUB+HEXO搭建个人网站?

2017-03-23 武汉分院 葡萄藤IT技能树

背景介绍:

1.1为什么要搭建自己的独立网站?搭建独立网站的目的就是锻炼自己的技术，分享自己学习的过程，并实践自己的学习内容。 Hexo 是优秀的静态博客框架再搭配现在流行的 Github（免费+方便）。 本教程是基于 Window 10 系统， Hexo 3 及以上版本

1.2什么是 HEXO？

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

1.3为什么要使用 HEXO？

因为 GitHub 上托管的页面都是静态页面，所有有服务器响应需求的页面无法实现。但是可以通过插入第三方代码来实现，诸如评论、分享、代码示例等动态的木块。

2.1 前提条件

首先，你必须要有Github帐号并知道如何创建repository。 没有Github账号转到 这里.

新建的repository name的格式必须是 zhuangyin8.github.io(将 zhuangyin8 改为你自己的Github用户名)

2.2 前提软件

安装 Hexo 相当简单。然而在安装前，您必须检查电脑中是否已安装下列应用程序：

Node.js 

nosde.js 创建hexo博客框架，安装版本为: node-v6.10.1-x64.msi

Git客户端 

git 把本地内容提交到github上去，安装版本: Git-2.12.1-64-bit.exe

2.3 安装HEXO

如果您的电脑中已经安装上述必备程序，那么接下来只需要使用 npm 即可完成 Hexo 的安装。 在桌面任意位置点击鼠标右键，选择 Git Base 输入 安装 hexo 命令：

npm install -g hexo-cli

安装完成后，在你希望存储博客文件的文件夹下（如E:\Hexo），执行以下指令(在E:\Hexo 内点击鼠标右键，选择 Git Bash)，

hexo init

2.4 本地预览

让我们看看刚刚下载的hexo文件带来了什么，在E:\hexo内执行以下命令：

hexo g

hexo s

然后用浏览器访问 http://localhost:4000/，此时，你应该在浏览器看到了一个漂亮的博客了， 当然这个博客只是在本地的，hexo3使用的默认主题是landscape。

3.1 编辑_CONFIG.XML文件关联你的GITHUB

创建Repository，先把博客放到Github上去看看效果。编辑E:\Hexo下的_config.yml文件， 建议使用开源的Atom。  在_config.yml最下方，修改如下配置并保存(将 https://github.com/zhuangyin8/zhuangyin8.github.io.git 修改为你自己新建的repository 的 ssh 地址)。

3.2配置SSH

如果你是第一次使用Github或者是已经使用过，但没有配置过SSH，则可能需要配置一下 在Git Bash输入以下指令（任意位置点击鼠标右键），检查是否已经存在了SSH keys。

ls -al ~/.ssh

如果不存在就没有关系，如果存在的话，直接删除.ssh文件夹里面所有文件：

3.3 SSH-AGENT 验证

输入以下指令后，回车， 出现提示让你输入的时候直接需要回车3次，如下图所示：

ssh-keygen -t rsa -C "zhuangyin8@gmail.com"

将"zhuangyin8@gmail.com"修改成你注册Github时候的邮箱

3.4部署本地文件到GITHUB

然后键入以下指令：

ssh-agent -s

继续输入指令：

ssh-add ~/.ssh/id_rsa

输入之后，在我这里是出错了，不知道你的有没有出错。

到了这一步，就可以添加SSH key到你的Github账户了。键入以下指令，拷贝Key（先拷贝了， 等一下可以直接粘贴）：

ssh-add ~/.ssh/id_rsa

然后到Github里面，点击右上角的设置图标Settings,找到SSH and GPG keys, 随便你命名， 黏贴上你刚才复制的key,然后点Add SSH key，最后会让你重新输入下gitHub的密码

最后还是测试一下键入以下命令：

ssh -T git@github.com

你可能会看到有警告，没事，输入“yes”就好 以上就表示SSH配置好了，执行以下命令部署到Github上。

5.常见问题

5.1 出现ERROR Deployer not found : github.

hexo的配置文件_config.yml中任何":"后面都是带一个空格的

5.2 输入ssh-add ~/.ssh/id_rsa之后， 出错了

如果你的也是这样子出错了的话，就输入以下指令：

eval `ssh-agent -s`

ssh-add

6.为什么使用GITHUB+HEXO 搭建个人网站?

超快速度: Node.js 所带来的超快生成速度，让上百个页面在几秒内瞬间完成渲染。 支持 Markdown: Hexo 支持 GitHub Flavored Markdown 的所有功能，甚至可以整合 Octopress 的大多数插件。 一键部署: 只需一条指令即可部署到 GitHub Pages, Heroku 或其他网站。 丰富的插件: Hexo 拥有强大的插件系统，安装插件可以让 Hexo 支持 Jade, CoffeeScript。

7.参考文献

【1】Hexo文档https://hexo.io/zh-cn/docs/

【2】 hexo干货系列：（一）hexo+gitHub搭建个人独立博客 - 简书http://www.jianshu.com/p/ba76165ca84d

8.更多讨论

主题是默认的landscape，略显简单，hexo还有更多自定义主题等待你去探索。怎么更换hexo的默认主题? 

hexo主题下载及配置 https://hexo.io/themes/

hexo干货系列：（二）hexo主题下载及配置http://www.jianshu.com/p/ebc3b4281d52

PPT链接:https://ptteng.github.io/PPT/PPT/CSS-02-How%20to%20use%20github%20to%20build%20your%20own%20personal%20website.html#/

视频链接:https://v.qq.com/x/page/h0386ojtbpv.html