Hugo 配合 Gitlab,Firebase 搭建屬於本身的博客

原文首發於 ISLAND

以前就一直有人問我，「博主啊，你的博客是怎麼搭建的？能不能出一個教程呢？」

每次我都是將用的關鍵技術告訴他，按道理講搭建博客的技術網上的文章應該有不少不少了。可是我仍是打算本身寫一下教程，方便更多的人來進行學習和搭建博客的使用。

Hugo

目前個人博客由以前的 Hexo 遷移到 Hugo，Hugo 不管是安裝，配置仍是部署我的感受都比 Hexo 方便太多了。Hugo 的安裝僅僅須要一個安裝包。能夠在 Github 上找到你的對應版本，進行安裝。

Hugo 是有 Go 語言寫的，從 markdown 渲染 html 的速度很快。自稱爲 世界上渲染網站最快的框架。另外 Hugo 也有不少的主題，能夠供咱們選擇。

安裝

安裝完記得將 Hugo 添加到環境變量中。在終端進行 hugo version 進行驗證是否安裝正確。

是的，安裝就是如此的簡單，官方提供了其餘安裝方式，你能夠選擇官方提供的方式。

建站

經過 Hugo 的命令咱們能夠快速生成咱們的網站。你能夠選擇你喜歡的地方來執行下面的命令。

hugo new website your_website_name
複製代碼

這樣就創建了新的站點。

此時咱們的新站點沒法啓動。須要安裝主題，你能夠在你選擇你喜歡的主題。

這裏我隨便搜索了一個主題進行安裝。

cd themes
git clone https://github.com/vividvilla/ezhil.git
複製代碼

安裝完成後，在根目錄中 config.toml 進行配置，填寫主題名稱。

baseURL = "http://example.org/"
languageCode = "en-us"
title = "My New Hugo Site"
theme = "ezhil"
複製代碼

在根目錄下使用 hugo server 進行項目啓動。

此時咱們的網站已經啓動，能夠看到咱們的頁面。

新建文章

咱們執行 hugo new posts/Hello.md 咱們將文章贊成存放到 posts 目錄下。posts 目錄會信件到 content 目錄下。

對 Hello.md 進行編輯。

---
title: "Hello"
date: 2019-10-12T22:15:50+08:00
draft: true ---
# Hello Hugo

這是 Hugo 的第一篇文章。
複製代碼

其中有着 draft 選項。當 draft 爲 true 的時候，默認是不會渲染的。 咱們能夠將 draft 改成 false，或者在渲染啓動時候添加參數 hugo server -D 就會渲染。

這樣咱們就已經安裝完成了 Hugo。更多的主題配置能夠參考當前主題的 themes/${name}/exampleSite/config.toml 。

生成靜態頁面

在項目根目錄下直接使用 hugo 命令，會生成 public 目錄，該目錄下都是關於咱們的 markdown 編譯完成的 html 靜態頁面。

部署

博客已經安裝完成，而且本地已經測試完成，文章也已經寫好了。那麼就該部署了。

部署到哪裏呢？

以前我喜歡放到 Git Page ,可是我發現了更好的地方 Firebase。Firebase 上有 Hosting，每月都有免費的流量和空間使用，對於我的來講，足夠使用了，而且能夠配置我的域名等，版本控制。

使用 Firebase 是稍微有點門檻的，大陸無(ti)法(zi)直接使用。

創建 Firebase 項目

首先登陸 firebase 官網，登陸帳號後新建一個項目。

Firebase CLI 安裝

首先確保本地有 node.js 環境。設置終端代理。

set http_proxy=http://127.0.0.1:1080

set https_proxy=http://127.0.0.1:1080

set http_proxy_user=user
set http_proxy_pass=pass

set https_proxy_user=user
set https_proxy_pass=pass
複製代碼

設置完代理以後就能夠安裝咱們的 cli 了。

經過 npm 進行安裝 npm install -g firebase-tools 這樣就完成了安裝。

安裝完成後首先是登陸。firebase login 進行登陸，會打開瀏覽器進行受權。這個過程使用全局代理，不然有可能沒法驗證經過。

在項目的根目錄下執行 firebase init 。選擇 Hosting，經過空格進行確認。

以後選擇 Use an existing project。從項目列表裏找到咱們剛剛建立的項目。回車繼續。下一步是詢問是否使用public 目錄。這裏直接回車就好。由於public目錄就是咱們要進行部署的文件。

是否要重寫 index.html ，這裏能夠選擇不重寫。

這樣咱們的項目就已經安裝建立完成。

完成了建立，那麼下一步就是要部署。

部署到 firebase 上

經過命令firebase deploy 就能夠將咱們的編譯後的網頁部署到 firebase 上去。

執行完成後下方會告訴咱們項目控制檯的地址和項目地址，咱們能夠打開項目地址進行項目的查看。

可是，當咱們打開項目的時候，發現上面沒有樣式。經過瀏覽器控制檯能夠看到樣式文件並無被請求到。

這裏須要咱們手動設置一下。

打開項目的 config.toml 文件，第一行的 baseURL 進行修改，將它修改成咱們firebase給的網站地址。

從新進行 hugo 和 firebase deploy。 刷新頁面後，能夠看到咱們的網站已經有了樣式，從新部署到 firebase 上了。

集成 CI/CD

話說，每次寫完文章都要來一串命令，很費事，也容易出錯。因此咱們能夠集成 CI/CD 來進行部署。

這裏我選擇了 Gitlab 自帶的 CI/CD 功能。方便快捷。

經過命令 firebase login:ci 進行從新登陸受權，此時受權完成以後就會在終端上出現一行 token。

請把 token 保存好。

在項目根目錄創建 ci/cd 執行文件,命名爲 .gitlab-ci.yml。粘貼下面的代碼。

image: nohitme/hugo-firebase
before_script:
 - hugo version
 - firebase --version
hugo_firebase:
 stage: deploy
 only:
 - master
 except:
 - dev
 script:
 - rm -rf public
 - hugo
 - firebase deploy --token ${FIREBASE_TOKEN}
複製代碼

將項目上傳到 gitlab 上。打開項目設置，找到 CI/CD 目錄。在Key的位置填入 FIREBASE_TOKEN ，在 Valeu 中填入咱們剛剛記下的 Token，並保存。

當這些完成後，選擇 CI/CD 目錄，點擊 Run Pipeline 進行從新運行。

等待運行完成以後，項目就會自動部署到 Firebase 了。

今後之後，咱們只須要負責寫文章就好，編譯，部署都提交到 gitlab 服務器上進行。

總結

基本的 Hugo 如何創建一個網站，如何部署的教程已經完成。不一樣的主題設置不一樣，好比評論，閱讀統計等，這些能夠參考你選擇的主題中的說明進行。

祝你也能夠有一個本身的博客。

公衆號

我的公衆號 代碼獵奇站