Day 11：将你的 Hexo 部落格部属到 Github Pages

我相今天的篇章是大家期待已久的，因为经过前面十天的努力，今天终於要将我们的部落格公开在世人面前啦！不过今天的流程稍微多了一些，但只要照着下面一步一步操作我想是能够上手的。

要公开到网路上，势必需要有一个服务器主机来放置我们的部落格，而我们所选择使用的服务器主机为 Github Pages，以下就来介绍它是什麽样的服务以及好处。

什麽是 Github Pages？为何选择它？其有何限制？

Github Pages 是 Github 提供的静态网页空间，它提供了 1GB 容量储存空间以及每个月 100GB 流量，而且都是免费使用的，对於刚起步的 Hexo 部落格来说我想是满适合的一个方案。

Github Pages 提供了什麽？

• 免费的静态网页空间
• 1GB 空间容量
• 100GB 月流量
• 提供一组 Github帐号.github.io 子网域
• 能够使用 Git 部署并进行版本控制

Github Pages 有什麽限制？

不过相对来说它还是有一些限制，比方说一小时内你只能提交 10 次更新版本，再来就是它只能存放静态网页、没有提供资料库，所以像是 WordPress 等使用 PHP 或是需要资料库的动态程序就没有办法利用 Github Pages 所提供的免费空间。

不过我认为以 Hexo 来说还是值得一试的，虽然说一小时内只能提交 10 次版本，但是你可以先在本机上确认文章内容无误後，在部署到空间上就好，不需要每更新几个字就部署到空间上。另外 Hexo 是静态网页产生器，所以使用 Github Pages 是完全没有问题的。

新增一个 Github 储存库

申请 Github 帐号

首先如果你要新增储存库，你必须要有一个 Github 帐号。如果你还没有的话，那就申请一个吧！Github 帐号请务必好好取名，因为 Github Pages 会提供一组「你的 Github 帐号.github.io」的子网域。

新增储存库

如果你本身已经有 Github 帐号或是刚办好的，那就可以新增储存库了。首先来到已经为登入状态的 Github 任一页面，右上角会有个「+」按钮，按下去後会出现下拉式选单，点击第一个「New repository」。

此时请在你的 Reponsitory name 输入你的 Github Pages 子网域，而你的 Github Pages 格式就如同前面所叙述为「你的 Github 帐号.github.io」。而且一个帐号仅有一组子网域。

填写完成往下滑按下「Create repository」後，如果看到以下画面就代表成功罗！此时，右上角是否有看到一个 HTTPS 的网址？请将它复制起来，待会会用到。

设定 Hexo 连结储存库

部署前要先设定 Hexo 的 _config.yml 档案中连接到 Github 储存库的相关设定，首先要找到 # Deployment 这段（基本上预设会在档案最下面）：

# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: git # 使用 Git 部署
  repo: https://github.com/Github帐号/Github帐号.github.io.git # 你的储存库 clone
  branch: gh-pages # 储存库分支
  message: "First Commit" # Commit 讯息

• type：部署类型
• repo：储存库 clone
• branch：储存库分支
• message：Commit 讯息

预设可能只有 type 而已，然而必须加上 repo、branch 等资讯才能进行部署（毕竟要设定部署的储存库嘛），message 不是必要的，不过我建议还是加，这样整体在看的时候比较能够一目了然每一次的部署是为了什麽而更新。

再来就是 冒号後必须空一个空白在接设定值！冒号後必须空一个空白在接设定值！冒号後必须空一个空白在接设定值！ 非常重要所以粗体说三次，不然会无法部署哦～

清除暂存档案

部署 Hexo 前我先说明一个指令 hexo c，因为有时候 Hexo 可能会记住之前的快取档案而造成一些问题（比如网页版面不一样之类的），就可以先执行以下指令，以确保网站上线後能够正常显示。

hexo c # 清除快取

不过我自己因为碰到网站显示问题而执行此指令大概就两次，一次是一开始不熟、再来一次我忘记是何时了 XD 总之就看情况使用吧。

见证奇蹟的一刻！部署你的第一个 Hexo 到网路上吧

最後，就是见证奇蹟的一刻啦！！部署 Hexo 必须要安装 Hexo-deployer-git Git 部署套件，因此需要执行以下指令安装：

npm install hexo-deployer-git --save

再来就要执行 hexo d Hexo 的部署指令，就会开始将我们前面产生的静态网页部署到 Github Pages 啦，当一切就绪後，大胆的执行下去吧！

hexo d # 部署 Hexo

如果执行後如图这样，恭喜你成功部署上去啦！回到 Github 储存库，可以看到档案都存上去了。而部署的档案，仅有产生出的静态网页。

公开部落格页面

此时要设定部署的部落格公开成能够使网友进入的页面，，储存库右上角有个 Settings，点进去。

往下滑到快接近底部时，可以看到稍微有点橘色的框框，请点击 Check it out here。

点击後会重新整理页面，此时就能够看到刚刚设定的网址了！

点击网址後，就成功跳转到自己的部落格了啊！！总算是完成了这项创举，是否感到开心与感动呢～

後记

当初我自己试着部署的时候吃了满多苦头的 QQ，毕竟第一次总是会比较困难，然後其实自己也有点忘记当初是怎麽解决的了（？），不过就是 _config.yml 那里有些设定没有设定好，所以各个环节都非常重要啊！希望大家都能够顺利完成啊！

参考资料，大家可以参考一下～另外大家或许会觉得，为何有一个参考资料比较像是遇到错误而去找的解决方法呢？因为我忘记还要安装 Hexo-deployer-git 套件了啊 XDD 毕竟我也只装过一两次而已，总是会忘记的 XDD 所以才要写文章来恢复记忆啊（？）

最後恭喜大家走到今天这步啦！我也距离完赛更近一步了（？）未来二十几天还会分享一些有关於 Hexo 的相关内容，再请大家敬请期待啦～

参考资料

• Day 30：Deploy To GitHub Pages - iT 邦帮忙
• hexo d命令报错 ERROR Deployer not found: git

本篇文章同步发布於我的部落格 Gui Blog