github pages + Hexo + 域名绑定搭建个人博客

前言：对于一个开发人员来说，拥有一个自己的博客还是不错的。虽然目前有很多的技术博客：如开源中国，博客园，csdn等。但个人总感觉还是得有一个自己建立的技术博客。以下是转载的。但发布的时候，需要购买服务器。为了节省一点服务器费用，但我们可以去学习另一个docker技术，这样就可以搞个单机版的服务器。哈哈，条件允许的话，还是可以使用阿里服务器，或者腾讯服务器，或者京东服务器，或者华为服务器，七牛云服务器，以上好像是目前国内主要的服务器供应商吧...具体本人知识有限，还得再不断学习加强.

转载链接：https://blog.csdn.net/xiangzhihong8/article/details/53355036

环境

• • Windows 10（64 位）
  • Git-2.7.4-64-bit 
  • node-v4.4.7-x64

如果上述软件已经安装的，跳过，没有安装的下载安装。

1，git下载安装（https://git-for-windows.github.io/）

2，node下载安装（https://nodejs.org/en/）

3.安装npm工具（这里可以先不安装，我是之前做RN，所以已经安装好了）

4，验证安装是否成功。

     为了验证是否安装成功，我们在dos桌面输入如下的命令：   

 

     git --version

     node -v

     npm –v

   出现如下表示成功

Github Pages

Github Pages免费的静态站点，其特点：免费托管、自带主题、支持自制页面等。
创建Github Pages比较简单，只要你有一个github账号在创建一个仓库就行了，但是这个仓库是有规则的，其格式必须为：yourusername.github.io。然后根据提示一直下一步即可，非常简单。

github项目创建完成，点击“Continue to layouts”，点击发布个人网站，我们网站就好了，不过这是一个github.io结尾的。

Hexo

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。官网也是搭建在GitHub上。在电脑上新建一个blog文件夹,一般放在非c盘（非系统盘），该文件夹用于存放你的博客文件,然后右键单击选择“Git Bash”（你也可以打开hexo官网（https://hexo.io/zh-cn/）按提示的步骤来）。
 

•npm install hexo-cli -g
•hexo init blog
•cd blog
•npm install
•hexo server

现在我们启动 hexo 本地服务，看下默认的博客是怎样的，命令：hexo server
现在用浏览器访问：http://localhost:4000/，效果如下图

选用其他主题

由于默认主题太大众了，所以现在我们换个主题。你可以去这里找主题：

 

exo-theme：https://hexo.io/themes/hexo-github-theme-list：https://github.com/hexojs/hexo/wiki/Themes有那些好看的hexo主题？：http://www.zhihu.com/question/24422335

我这里选择的 yelee：https://github.com/MOxFIVE/hexo-theme-yelee，如果你自己懂css.js，你可以自己写。当然hexo还提供了很多的其他模板，可以根据个人喜好增加。输入命令：git clone https://github.com/MOxFIVE/hexo-theme-yelee.git themes/yelee

 

找到_config.yml，把对应的主题目录名改下。

修改完成后，我们使用下面命令重新生成静态博客的所有内容：hexo generate，然后重启 hexo 本地服务：hexo server。

部署代码到github pages

创建好仓库之后，要本地生成 SSH 秘钥，方便电脑上的 git 软件好提交内容到 Github 上，其实也可以不生成本地的ssh，可以直接用命令或者工具上传代码（这个纯命令提交可以参考之前的博客点击打开链接），在 Git Bash 中，输入：ssh-keygen -t rsa -C "你的邮箱地址"，然后回车，回车，再回车，一共 3 次回车。

访问：https://github.com/settings/ssh，添加新秘钥

访接下来就是将本地的静态博客部署到gitHub上，要把本地的静态博客同步到 Github，我们还需要先安装两个跟部署相关的 hexo 插件，可以实现如下命令：

 

• npm install hexo -server --save
• npm install hexo-deployer-git --save

编辑全局 hexo 的配置文件：_config.yml，这块可以参照网上的。

 

编辑全局配置后我们需要重新部署：

 

先清除掉已经生成的旧文件：hexo clean再生成一次静态文件：hexo generate在本地预览下：hexo server本地没问题之后，Ctrl + C 停掉本地预览，使用部署命令部署到 Github 上：hexo deploy，有弹出下面提示框，请输入：yes

 

 

然后访问服务器地址进行检查：http://xiangzhihong.github.io

通过上面几次流程我们也就可以总结：以后，每次发表新文章要部署都按这样的流程来：

• hexo clean
• hexo generate
• hexo deploy

github pages绑定域名

绑定域名，这块比较坑，我参照网上很多的都没弄明白，这里是我摸索的一个方法。阿里云（万网）+github域名绑定。

购买域名

首先是在阿里云上购买域名，大家也可以上其实的域名交易平台购买。

 

域名解析

在阿里云管理控制台中,选择【域名】》【域名列表】》【全部域名】中刚刚购买的域名,点击解析按钮 
这时会提醒你选择解析到阿里云主机,或者其他主机,这时需要将你在Github上创建的Github Pages的域名 xxx.github.io进行查询,得到一个IP地址。

1. admindeMacBook-Pro:blog admin$ ping xxx.github.io

2. PING prod.github.map.fastlylb.net (151.101.100.133): 56 data bytes

3. Request timeout for icmp_seq 0

4. 64 bytes from 151.101.100.133: icmp_seq=1 ttl=47 time=69.632 ms

 

这里需要说明下，这里151.101.100.133是我的github的地址（就是xiangzhihong.github.io地址，你也可以ping自己的xx.github.io）.

 

如果你不会填，直接点上门的新手引导设置就好了。

 

Github解析

在Github的xxx.github.io项目,进入【Settings】标签页,在【Custom domain】功能中,将刚刚申请的域名写进去。

 

备注：这里也可以用另一个工具去解析DNSPOD 。

设置好后，过一会就可以访问了，反正我的是很快，点击打开链接

 

 

整合 IntelliJ IDEA 提高效率

为了提交写作效率，我个人建议使用 IntelliJ IDEA 作为 Markdown 编辑工具，这也是前端开发的一个利器。现在我们用 IntelliJ IDEA 打开我们本地目录。

 

由于 IntelliJ IDEA 在 Windows 下的默认终端是 cmd 不好用，我们现在需要重新修改下 IntelliJ IDEA 的终端工具，把它指向我们习惯的 Git Bash，这样方便操作。

为了更稳定地使用 IntelliJ IDEA，在不修改主题的情况下，我们还需要这样做，hexo 新文章内容的开头需要这样定义：

 

• categories：表示文章所属分类
• tags：表示文章所属标签

例如：

 

 

1. ---

2. title: 这是文章标题

3. date: 2016-10-25 17:58:27

4. categories: [Hexo,IntelliJ IDEA]

5. tags: [Hexo,IntelliJ IDEA,Git,Github,Node.js]

6. ---

打开项目的module（快捷键ctrl+shift+alt+s）