GitPages部署本身的網站

前言

該文章主要爲了記錄我如何在GitPages上面部署博客網站，這裏的話，碼雲上面也有相同的功能。
如有小夥伴擔憂GitHub擔憂把中國的訪問也禁了的話（大概不會吧），能夠在碼雲上面部署。流程應該是差很少的。
由於我使用的域名是.cn後綴，因此部署到GitHub上面就不用備案了。碼雲是國內的，應該要備案了，這個就看各位小夥伴的選擇了。
能夠看看個人網站：

https://colablog.cn/

開始

第一步，安裝工具

咱們須要建立一個空的項目，怎麼建立呢？這裏我是使用Hexo的博客框架，
他會使用Markdown引擎快速渲染出靜態頁面。
安裝hexo的前提是須要安裝好下面的應用程序：

Node.js (Should be at least nodejs 6.9)
Git

而後使用npm安裝Hexo。(建議去配置個淘寶的cnpm鏡像，快賊多)

$ npm install -g hexo-cli

第二步，hexo建立項目

咱們須要使用hexo創建一個空的項目,這裏的項目名爲blog。

$ hexo init blog
$ cd blog
$ npm install

爲了在能夠在本地調試效果，咱們須要安裝hexo-server，就是Hexo的服務器

$ npm install hexo-server --save

而後啓動hexo-server，訪問的網址的localhost:4000

$ hexo server

啓動後應該能夠看見下面的界面

新建名爲test的文章測試一下，建立好後在locaohost:4000能夠看到新的文章哦。

$ hexo new post test //全寫
$ hexo new test //簡寫，默認爲post（文章）

到此爲止你已經能夠在本地建好博客網站啦。

第三步 使用NexT主題(可跳過)

hexo也有推薦使用的主題列表，入口在這：

https://hexo.io/themes/

不過我沒有去看這些主題，我是使用了NexT的主題，入口在這：

http://theme-next.iissnan.com/theme-settings.html#author-sites

首先咱們克隆最新的NexT版本，

$ cd <你的項目目錄>
$ git clone https://github.com/iissnan/hexo-theme-next themes/next

而後在hexo的配置文件(_config.yml)文件裏面，找到theme字段，修改以下：

theme: next

我的以爲next默認的主題樣式仍是比較醜的，咱們能夠在next主題下看到還有另外三種樣式，搜索關鍵字
Schemes能夠看到以下主題，我使用的第三個Pisces

# Schemes
#scheme: Muse
#scheme: Mist
scheme: Pisces
#scheme: Gemini

主題以下：

看着是否是怪醜的，特別是第二篇文章，怎麼會展現這麼多呢？其實能夠調整的，反正我是找了很久，在next主題下，
搜索關鍵字auto_excerpt,修改以下：

auto_excerpt:
  enable: true //開啓該功能
  length: 150 //首頁展現的字數限制

到此爲止咱們已經可使用NexT主題啦。更詳細的配置就進去官網看看吧（上面有）。

第四步 部署到GitHub

首先，咱們要在GitHub上面建立一個倉庫，這裏我叫作blog吧。
而後咱們須要把咱們本地的blog項目初始化一下。

$ cd <你的本地項目目錄>
$ git init
$ git add -A //把所有都添加進去吧，也沒啥
$ git commit -m "首次提交"
$ git remote add origin <你本身的倉庫路徑,例：https://github.com/xxx/blog.git>
$ git push -u origin master

而後咱們進入blog倉庫的setting中，而後往下拉看到GitHub Pages

修改完後頁面會本身刷新，而後從新回到GitHub Pages這部分。你會看到他給了你一個網址，沒錯！就是這個網址，
你打開試試！！試試就試試，404...。
你先記住這個網址，我們先把這個網址叫作博客網址吧。

其實部署到GitPages上面的話，hexo仍是要作一些設置的，否則他怎麼知道你要部署到那個地方去哦。設置完後之後部署文章會很簡單的：
設置你項目的root路徑，在hexo配置文件(_config.yml)中，搜索關鍵字root, 改成你的倉庫名稱,以下：

# URL
root: /blog

在hexo的配置文件(_config.yml)中，搜索關鍵字deploy(其實就在最下面)，設置以下：

deploy:
  type: git
  repo: <你的倉庫地址> //https://github.com/xxx/blog.git
  branch: master

安裝hexo-deployer-git，

$ cd <你的項目目錄>
$ npm install hexo-deployer-git --save

而後你再執行下面這條命令就OK了！

$ hexo generate --deploy //全寫
$ hexo g -d //縮寫

趕忙打開上面說的博客網址看看，是否是404！，沒錯！
等一會吧，GitHub還沒緩過來呢，執行完命令以後大概差很少一分鐘以後刷新一下，
你就能夠看到你求之不得的頁面了。
之後我們建立文章就很簡單了，新建而且編寫好文章以後，執行使用部署到服務器的命令就Ok了。操做以下：

$ hexo new <文章名> //新建文章
$ hexo g -d //部署到GitHub，你就能夠看到的新文章啦！

畢竟第一次不免是比較困難。嗯，沒錯，我說的是部署GitPages。
若是你也是跟着我這篇文章一步一步走的話，應該是沒什麼毛病的，由於我是本身從新部署一個項目的，
而後一步一步的把步驟記錄下來的。若是有什麼問題的話，能夠留言一下，或致郵箱821312534@qq.com。謝啦。

個人博客即將同步至騰訊雲+社區，邀請你們一同入駐：https://cloud.tencent.com/developer/support-plan?invite_code=qqkpn94ul1vr