GitPages部署自己的網站

• 2019 年 10 月 3 日
• 筆記

前言

該文章主要為了記錄我如何在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。
如果你也是跟著我這篇文章一步一步走的話，應該是沒什麼毛病的，因為我是自己重新部署一個項目的，
然後一步一步的把步驟記錄下來的。如果有什麼問題的話，可以留言一下，或致郵箱[email protected]。謝啦。

我的部落格即將同步至騰訊雲+社區，邀請大家一同入駐：https://cloud.tencent.com/developer/support-plan?invite_code=qqkpn94ul1vr