步驟教學
一、開始之前
目標是用 hugo 協助我們使用 markdown 輕鬆製造靜態網頁,再把這個靜態網頁利用 Github Page 部署出去!
所以我們需要:
$ hugo version
Hugo Static Site Generator v0.62.2/extended darwin/amd64 BuildDate: unknown
二、開跑囉
開啟一個新的 hugo 專案,這邊的 xiaoxiao 可以換成你喜歡的專案名字
$ hugo new site xiaoxiao
$ cd xiaoxiao
會看到目錄長這樣:
├── archetypes
│ └── default.md # 產生新文章時的模板
├── config.toml # 最主要的設定檔案
├── content # Markdown 的文章在這邊
├── data
├── layouts
├── resources
│ └── _gen
├── static
└── themes # 套用的主題包們
└── hugo-theme-m10c
接著挑選一個漂亮的 hugo 模板來下載,我用人家教學示範的模板
$ git clone https://github.com/vaga/hugo-theme-m10c.git themes/hugo-theme-m10c
再來,開啟文字編輯器修改 config.toml
,
最主要是第六行的 theme
和第四行的 publishDir = "docs"
,docs 是 GithubPage 規定的喔不能改
我的改完長這樣:
baseURL = "https://xiaoxiaosn.github.io"
languageCode = "en-us"
title = "XiaoXiao Notes"
publishDir = "docs"
theme = "hugo-theme-m10c"
paginate = 10
[params]
author = "Xiao Xiao"
description = "XiaoXiao 的筆記書"
跑跑看,是不是能看到頁面啦? 服務會在 http://localhost:1313
$ hugo server -D # -D 表示我們想看到草稿文章(draft)
看到有安捏就對了!
三、來寫文章r
這邊的 make-a-hugo-blog 可以換成你想要的文章名字,等等會被用在網址上喔
$ hugo new make-a-hugo-blog
這個指令會幫你在 content
目錄下新增一個 make-a-hugo-blog.md
檔案,
接著我們寫點內容上去,像這樣:
要注意的是 draft: true
這行在正式上線的時候記得刪掉喔~
---
title: "製造一個 hugo 部落格"
date: 2020-01-24T23:02:16+08:00
tags: ["hugo"]
---
## 開始之前
目標是用 hugo 協助我們使用 markdown 輕鬆製造靜態網頁,再把這個靜態網頁利用 Github Page 部署出去!
所以我們需要:
1. 一人份的 github 帳號
2. 安裝 hugo [點我看教學](https://gohugo.io/getting-started/installing#quick-install)
3. 挑選喜歡的 hugo 模板 [點我參觀](https://themes.gohugo.io/tags/blog/)
輸入 hugo
指令,讓他跑編譯囉
$ hugo
四、來部署r
打開你的 github 按下 new 來新增一個 repo
接下來會進到這個畫面,先不急著跟他操作
我們要先到 config.toml
修改域名
這邊的規則是 https://帳號.github.io/專案
# 修改 config.toml 的這一行
baseURL = "https://xiaoxiaosn.github.io/XiaoXiaoBlog"
然後下指令重新產生一下
$ hugo
回到專案,是時候該讓 git 加入了 第二行這邊記得換成你自己的 github 專案喔
$ git init
$ git remote add origin [email protected]:XiaoXiaoSN/XiaoXiaoBlog.git
$ git add --all
$ git commit -m "init my hugo blog"
$ git push origin master
在 add 的時候出現 warn 不擔心,他只是提醒你在這個 git 專案下還有包含了另一個 git 專案 (theme裡面那個)
更新上去後,我們回到 github,選擇 Setting 後往下拉找到 Github Page
選那個 master branch /docs folder
五、收割囉~~
等待 10 秒,然後帶著一顆誠摯的新把連結給按下去 XD
https://帳號.github.io/專案
選修 - 使用自己的 domain
回到前面部署時候的頁面,Setting 往下滑到 GitHub Pages
填寫 Custom domain 的這個欄位
這裡我已經有 domain,然後是交給 cloudflare 管理,因此接下來會以此介紹
開啟 cloudflare 選到 DNS
後,設定 CNAME 把你的網址導引到 githubPage
接下來到 Page Rules
新增一筆強制使用 https 的選項
這樣就設定好囉~
記得要回到專案的 config.toml
設定新的 url 喔
baseURL = "https://blog.10oz.tw"
補充設定
md 換行格式
由於很多人從 hackmd 或是其他的平台轉過來 發現他們原來的 md 貼過來換行符號沒有被保留在 html 上,也就是兩行連起來啦
[blackfriday]
extensions = ["hardLineBreak"]
References
hugo
github page