使用 Hugo 在 Firebase 上建立 Blog

一直沒有紀錄自己的過程，研究所剛畢業，即將要邁入社會

決定好好紀錄種種，考慮過 Wordpress 及 Blogger，剛好最近研究靜態網頁產生器

經過整理，並選擇 Hugo 來撰寫 Blog，剛好對 Golang 也比較熟悉

如果熟悉 Markdown 並且想找地方分享，使用 Hugo 是一個不錯的選擇

安裝 Hugo

首先安裝 mac 套件管理工具 Homebrew

1

$ ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

透過 Homebrew 安裝 hugo

1

$ brew install hugo

建立 Hugo 專案

產生 Hugo 專案

1
2


# hugo new site <site name>
$ hugo new site codychen

進入建立好的 Hugo 專案中

1
2


# cd <site name>
$ cd codychen

安裝 Hugo 主題

在 Hugo 官方網站上瀏覽主題，選擇一個喜歡的主題

最後我挑了 hugo-lamp，我覺得挺好看的

1
2


# git clone https://github.com/.../<theme name>  themes/<theme name>
$ git clone https://github.com/huyb1991/hugo-lamp  themes/hugo-lamp

套用 hugo-lamp 主題

1
2


$ cp -r themes/hugo-lamp/static/ static/
$ cp -r themes/hugo-lamp/layouts/ layouts/

可以參考 hugo-lamp 主題中範例 & 套用 hugo-lamp 配置檔

1
2


$ cp -r themes/hugo-lamp/exampleSite/content/ content/
$ cp themes/hugo-lamp/exampleSite/config.toml .

設定 Hugo 配置

設定 Hugo 基本參數

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


# 設定網站網址
baseURL = "http://www.example.com/"
# 設定語系
languageCode = "zh-tw"
# 網站標題
title = "Example Title"
# 網站主題
theme = "hugo-lamp"

[params]
author = "user name"

預覽選擇的主題效果，啟動 hugo 從 http://localhost:1313 瀏覽

1

$ hugo server

建立 Hugo 文章

產生一篇 Hugo 文章格式，文章會自動把移入專案中的 content 目錄底下

開始撰寫內容，如果撰寫完畢就文章狀態更動為 draft: false

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15



$ hugo new post/first_post.md

$ vim content/post/first_post.md

---
title: "First_post"
author: "Author Name"
cover: "/img/cover.jpg"
tags: ["tagA", "tagB"]
date: 2019-10-30T21:30:41+08:00
draft: true
---

撰寫文章內容...

產生 Hugo 靜態網頁

如果完成版型選擇並撰寫文章之後

便能產生靜態網頁文件

1

$ hugo

建立 Firebase 專案

登入 Firebase Console 建立專案，並依步驟完成 Firebase 專案建立

安裝 Firebase tools

要安裝 firebase tools 前，首先要先安裝 node

透過 node 的 npm 安裝 firebase-tools

$ brew install node

$ npm install -g firebase-tools

建立 Firebase 環境初始化

透過 console 登入 firebase

我這邊同意蒐集 Firebase 資訊，各位斟酌選擇

1
2


$ firebase login
? Allow Firebase to collect CLI usage and error reporting information? (Y/n) Y

登入成功後會看到以下登入成功畫面

在 hugo 專案中，進行 firebase 初始化

選擇 Hosting
選擇已存在的 Firebase 專案
並選擇剛剛建立的專案

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


$ firebase init

? Which Firebase CLI features do you want to set up for this folder? Press Space to select features, then Enter to confirm your choices. 
❯◉ Hosting: Configure and deploy Firebase Hosting sites

? Please select an option: (Use arrow keys)
❯ Use an existing project

Select a default Firebase project for this directory: (Use arrow keys)
❯ blog-89a9d (blog) 

上傳 Hugo 至 Firebase 專案中

靜態網頁佈署至 firebase，便能從 firebase 提供的網址連上建立好的 Blog

1
2
3
4


$ firebase deploy

...
Hosting URL: https://blog-89a9d.firebaseapp.com

Cody's 探索日誌