这个博客也是博主昨天下午在图书馆随着“关于”页面的嵌入而搭建完毕的,至于说为什么想要搭建这个博客,其实是想通过一个网络平台来记录一下自己学习的技术,当然也有一个不可忽视的事实,就是读计算机专业的人不搞个博客玩玩都不好意思说是读计算机的了(哈哈..)恩..好了,切换到今天的正题,来说一下如何利用Hexo+Github来免费搭建个人博客。

前排提醒:搭建博客的过程中除了需要hexo和github之外,我们还需要搭建 Node.js 和Git 环境
什么是hexo?

Hexo是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。
什么是github?
gitHub是一个面向开源及私有软件项目的托管平台,因为只支持git 作为唯一的版本库格式进行托管,故名gitHub。
一、github的注册与配置
注册
如果你已有github账号,那么请记住你的username,接下来要用到你的username来确定你所使用的域名。当然,如果你没有github账户的话也不用着急,花个两三分钟的时间去注册一个就好了。
github注册网址:https://github.com/
打开注册页面,输入你的用户名,注册邮箱以及密码即可注册,但前提记的在你的注册邮箱中确认注册验证,不然无法使用github哦。
配置
注册成功并进入主页面后,点击右上角的“+”号按钮,选择New repository,进入代码库创建页面:
在Repository name下填写yourname.github.io,Description (optional)下填写一些简单的描述(不写也没有关系),如图所示:
注意:图片中的yourname指的是你的username,比如我的username叫emadons,那么我的Repository name中就填emadons.github.io就可以了,以后通过https://emadons.github.io就可以登录自己的博客了。
点击“Create repository”后出现下面界面就可以了。
二、安装Node.js和Git环境
Node.js的介绍与安装
Node.js是一个Javascript运行环境(runtime),是一个基于Chrome JavaScript运行时建立的平台, 用于方便地搭建响应速度快、易于扩展的网络应用。Node.js 使用事件驱动, 非阻塞I/O 模型而得以轻量和高效,非常适合在分布式设备上运行数据密集型的实时应用。
Node中文官网:https://nodejs.org/zh-cn/
在官网上下载所需版本进行安装即可。具体安装教程可以在网上搜。
Git的介绍与安装
Git是一款免费、开源的分布式版本控制系统,用于敏捷高效地处理任何或小或大的项目。
安装Git用途其实也就是把本地的Hexo内容(既静态的Web网站)提交到github或者Coding net等其他的代码托管站点上。
Git官网:https://git-scm.com/downloads
由于国内直接从官网下载比较困难,需要翻墙。所以这里推荐使用waylau提供的下载地址:https://github.com/waylau/git-for-win
下载安装完成后,桌面右键,打开 Git Bush Here,输入 git --version,出现版本号则说明 Git 环境配置成功。
在开始菜单里找到“Git”->“Git Bash”,输入以下命令
git config --global user.name "yourname"git config --global user.email "youremail"
注意:yourname和youremail请替换成你github上的用户名和注册邮箱
三、安装配置 Hexo
安装 Hexo。所有必备的应用程序安装完成后,即可使用 npm 安装 Hexo。
在命令行中输入$ npm install -g hexo-cli
这样我们Hexo也已经安装成功了。
本人使用的是cmder,挺好用的,界面看起来也比较舒服。
到了这里,该安装的基本都安装好了。
四、建立Hexo站点
在电脑F盘(自己随意)目录下新建文件夹 test,进入test之后,点击鼠标右键,点击“Cmder Here”(由于本人已安装了cmder,没有安装的点击“在此处打开命令窗口”),进入到该路径的命令行窗口界面,输入:
hexo init blog

稍微等待下,成功提示
INFO Start blogging with Hexo!
恭喜你,你的Hexo站点已经建成完毕。
因为你初始化hexo 之后source目录下自带一篇hello world文章, 所以依次执行下方命令:

这时候我们在浏览器中打开http://localhost:4000/ ,你将会看到:

五、与github建立联系
我们如何让本地git项目与远程的github建立联系呢?用 SSH keys
生成SSH keys
输入你自己的邮箱地址
ssh-keygen -t rsa -C "youremail"
在回车中会提示你输入一个密码,这个密码会在你提交项目时使用,如果为空的话提交项目时则不用输入,我们按回车不设置密码。一路Enter过来就好,得到信息:
Your public key has been saved in /c/Users/user/.ssh/id_rsa.pub.
添加 SSH Key 到 GitHub
打开 C:\Users\user.ssh\id_rsa.pub,此文件里面内容为刚才生成的密钥,准确的复制这个文件里的内容,粘贴到 https://github.com/settings/ssh的 new SSH key 中。
测试是否添加成功
可以输入下面的命令,看看设置是否成功,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就可以了,然后会看到:
Hi emadons! You’ve successfully authenticated, but GitHub does not provide shell access.
六、配置博客
前排特别提醒:参数冒号后面记得空一格!
在blog目录下(即刚才建的Hexo站点目录下),打开_config.yml文件,修改参数信息
###修改网站相关信息
注解:title—博客名
subtitle–博客副标题
description–网页描述
keywords–关键字
author–作者
language–语言
timezone–时区
###配置部署(repo注意修改成自己的)
七、发表文章
在CMD中输入
$ hexo new “emadons的第一篇博客文章”
INFO Created: F:\test\blog\source_posts\emadons的第一篇博客文章.md
然后在该路径下找到emadons的第一篇博客文章.md文件,用编辑器打开,使用markdown语法进行编辑,如下图:

markdown具体语法知识点我会在以后的博客中进行整理更新,有需要的到时候可以关注一下
保存,然后依次执行下列步骤:

这时候,通过打开http://localhost:4000,可以发现刚刚的文章已经上传到本地上了。
八、本地文件提交到GitHub
即使现在我们已经可以在本地上浏览到我们的博客了,但别人还不能浏览到我们刚刚发的博客,因为我们并还没有将文件上传到github上面,所以我们还要进行一步操作。这一步操作只需简单输入以下命令即可:
// 删除旧的 public 文件
hexo clean
// 生成新的 public 文件
hexo generate
或者
hexo g// 开始部署
hexo deploye
或者
hexo d
如果没有错误产生,此时你本地的代码就已经上传到了Github中。
如果在执行 hexo deploy 后,出现 error deployer not found:github的错误,执行:
npm install hexo-deployer-git --save
出错也是正常的,咱们只要动动手指上网查一查就能够解决我们遇到的问题,所以也不用着急。
九、关联 Hexo 与 GitHub Pages
代码库正确创建之后,并且已经将代码上传到了Github中,此时你将会看到如下界面:

接下来开启Github pages功能,点击界面右侧的Settings,你将会打开这个库的setting页面,向下拖动,直到看见GitHub Pages,如图:

在红框中选择已经上传的master branch代码。
保存之后,此时直接访问你之前创建New repository时所填的信息:yourname.github.io,就可以看到你的博客信息了,到了这一步,恭喜你,你的博客已经搭建完毕啦,别人也能够通过你的域名来直接访问你的博客,是不是很棒。。
当然,如果你想要让你的博客外观看起来更漂亮些,你也可以自己弄个主题或者在网上找个博客主题装饰一下,那就更棒了。下面是一些博客主题下载地址与教程,喜欢的童鞋可以进去看看。
https://github.com/litten/hexo-theme-yilia
https://github.com/iissnan/hexo-theme-next
参考资料