小白教程 --- 搭建hexo + github搭建博客整

关于什么hexo自行百度，就不详细复制黏贴了，主要把一些其他教程没有的步骤和问题整合展示一下：

我的个人博客展示：XiaoMai’s Coding

hexo博客的基本搭建

• 安装Node.js，一直点下一步就好了

安装Node.js会自动配置环境变量以及自动安装npm。
检验是否安装成功，命令行输入如下命令：

 node -v
 npm -v

• 安装Git，一直点下一步就好了

• 创建自己的GitHub，以及GitHub的使用

创建完成后，返回your profile界面会出现如下图所示的仓库

• 将你的Git与GitHub帐号绑定，免去推送重复输入密码的繁琐

关于SSH的内容可以自行百度。以下只提供创建步骤。

鼠标右击打开Git Bash

输入如下代码

git config --global user.name "你的GitHub用户名"
git config --global user.email "你的GitHub注册邮箱"
ssh-keygen -t rsa -C "你的GitHub注册邮箱"

然后按三次回车键，有跳出界面让你输入密码就输入
然后找到如下文件：

用记事本打开id_rsa.pub文件，复制里面的内容。
然后打开 SSH keys，点击New SSH key，标题任意，内容黏贴你刚才复制的id_rsa.pub文件的内容。点击Add SSH key。密钥创建成功

最后检测Git与GitHub帐号是否绑定成功，在任意地方打开Git Bash 输入如下命令：

ssh git@github.com

如下所示则说明绑定成功。

• 安装Hexo

在你的常用磁盘中创建一个文件夹，命名随意（例如 blog，以下都用blog名称来示例）用作以后个人博客的框架以及网页内容的存储。然后进入该文件夹，在该文件内打开命令行窗口（按住Shift + 右键）。然后输入以下命令：

npm install -g hexo-cli 

• 创建博客界面

安装完成后，首先初始化博客，输入：

hexo init blog //初始化博客

初始化之后你的 blog文件夹里会出现一系列文件，这些文件的介绍和基本命令的介绍请移步：http://code.skyheng.com/post/50982.html

然后再依次 新建文章、生成页面、本地发布

hexo new  new_blog //新建文章
hexo g //生成页面
hexo s //本地发布

完成后，打开浏览器输入如下地址，就可以看到你生成的博客了：

localhost:4000 //这里可能会出现问题。某些软件会（例如福昕阅读器）占用4000端口。

解决办法：修改Hexo4000端口占用解决办法

• 发布博客到网上

上面一系列只是在本地预览，接下来要做的就是发布网站，让我们的网站可以在互联网上被人访问到。打开 blog 文件夹里的_config.yml 站点配置文件。
搜索deploy 进行如下修改后保存：

deploy: 
type: git
repo: 这里填入你之前在GitHub上创建仓库的完整路径。例如https://github.com/xvanning/xvanning.github.io
branch: master

其实就是给hexo d 这个命令做相应的配置，让hexo知道你要把blog部署在哪个位置，很显然，我们部署在我们GitHub的仓库里。最后安装Git部署插件，输入命令：

npm install hexo-deployer-git --save

然后输入如下三条命令：

hexo clean 
hexo g 
hexo d

然后就可以在浏览器上输入：

xxx.github.io  //例如xvanning.github.io

这样你的博客就可以在互联网上被访问到了。

• 绑定域名

如果想要使用个性化域名，比如 www.你的姓名.cn 这样的形式访问你的博客则可以通过如下步骤：

1、[阿里云](www.aliyun.com)买个域名
2、解析域名
3、登录GitHub，进入之前创建的仓库，点击settings，设置Custom domain，输入你的域名（xvanning.cn）
4、进入blog/source目录下，创建一个记事本文件，输入你的域名（xvanning.cn），去掉后缀.txt。
5、打开`_config.yml` ，搜索并且修改 url: xvanning.cn //你的个性化域名

1、3、4、5步骤都很简单。现在介绍第二个步骤将解析域名：
登陆你的阿里云账户，找到域名控制台 ，依次点击 解析 、 新手引导 。

这里的记录值可以通过如下方式得到：
打开 命令行 ，输入如下代码：

ping xxx.github.io //例如 ping xvanning.github.io

注意：这里可能会存在有问题：不同时间去ping可能会ping 出两个不同的IP，需要你把两个IP都进行解析。也就是按两次新手引导。输入两次记录值。

完成这三步，进入blog目录中，按住shift键右击打开命令行，依次输入：

hexo clean
hexo g
hexo d

这时候打开浏览器在地址栏输入你的个性化域名将会直接进入你自己搭建的网站。

---

hexo博客的主题更换

• 主题目录

hexo有非常多的主题，大家可以自行更换默认目录。可以通过如下命令下载主题(以next主题为例子) ，在blog目录下打开命令行窗口输入如下命令：

git clone https://github.com/iissnan/hexo-theme-next themes/next

打开_config.yml 站点配置文件，进行如下修改：

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next
plugins: hexo-generate-feed

注意： 搞清楚站点配置文件_config.yml，和blog\themes\next文件夹下的主题配置文件_config.yml

另外关于next主题的扩展，请移步：https://segmentfault.com/a/1190000009544924

---

博客写作

• Markdown

Markdown的介绍自行百度，编辑器windows推荐The Markdown Editor for Windows 。

• 发布文章

在blog文件夹下输入命令：

hexo n "博客名字"

我们会发现在blog根目录下的source文件夹中的_post文件夹中多了一个 博客名字.md 文件，使用Markdown编辑器打开就可以进行编写了。编写完毕之后就可以hexo s 在本地浏览器的localhost:4000 预览博文效果。写好博文并且样式无误后，通过hexo g、hexo d 生成、部署网页。随后可以在浏览器中输入域名浏览。

---

附录

大概熟悉了之后就可以参考

hexo站点文件的配置

Hexo使用文档

NexT使用文档

进行一些自定义的操作了