約莫 3.4 天前,我穩定了我新架的 hugo 網站,把一些 bugs 修好後
終於可以慢慢邁向下一階段的目標
去年 12 月半,我決定動手架一個屬於自己的網站
以往都是想用 wordpress.org 架在主機上,但還是有些受限於 wordpress
於是我把想法移駕到了 hugo + github
某天,上網查查我新的部落格在 Google 的 SEO 是如何呈現
結果每篇文章的 Title 都掛上 "- Git 指令"
我來來回回煩惱後來問同事後,得到的解答是買一個自己的 domain
雖然知道遲早都會需要買,但沒想到現在就要買
目前我架站的方式是:
Hugo 架設在Github 上,於Godaddy買一個Domain+SSL指向我的網站
接下來應該會邊陸續添增一些新的功能,寫文章, 慢慢提升 SEO
本文章教學:
於 Godaddy 購買 domain
Godaddy 網站 有許多 domain, 你可以直接去查看想要的 domain,順便看看這些 domain 的延伸含義
這個部分其實蠻簡單的
將想要的domain查詢後 >> 加入購物車 >> 點取右上方購物車圖示 >>
填繳費表單 >> 勾選要不要額外的服務 >> 優惠碼 >> 結帳
特別提一下在購物車時,有個網域隱私保護
, 其實只是讓你的 domain 能不能在 Whois365 中被查找,沒有網站說的什麼資訊看光光這麼可怕
但我還是被嚇唬到,然後購買了,好冤 XD
查看了一下 SSL 好像是額外買的,沒在這可以選
記得去領取優惠碼,據說可以打折(但我就算加了優惠碼也沒有打折氣噗噗)
買 SSL Certification
我也是在Godaddy SSL 購買 SSL
SSL 就是把你的網站從 Http 變為 Https
可惡的是購買 SSL 比購買網域貴好多!!
把工具買好惹,就來裝吧
裝 SSL Certification 於 你的 domain
Godaddy 的台灣版後台,我當初也是摸的翻白眼,不太好用,索性...... 用好了 qq
如果是單購買 Domain,然後將購買的 SSL 裝上去的話
在 Godaddy 登入你的帳號
前往後台左上方的 SSL 憑證
你會看到一條剛購買熱騰騰的 SSL 憑證,尚未設定
進入設定,會需要你輸入欲綁入的網址
(請原諒我沒有圖)
基本上會有左右兩塊,左邊是輸入你想認證 SSL 的 domain 網址,會產生密鑰,再將其中一個密鑰貼到右邊認證
輸入你想認證的 domian,會產生兩個檔案
假設我在 godaddy 買的 domain 是: mina.io
就直接輸入 mina.io, 不用加前面的 http/之類, 端看剛才於 Godaddy 買的 domain 是什麼就填什麼
會產生兩個檔案,分別是:
generated-csr
generated-private-key
我有下載下來保存好
接下來,我記得是將產生的 generated-csr 貼到右方需要貼 csr 做認證的地方
在貼的部分下方,會再次詢問你是不是要認證該 domain?
確認後就送出吧
以下兩個比較複雜,促使我發出這篇文章 XD
把 SSL+ Domain 都搞定後,就來做連結了
將 Domain 設定指向 Github
打開 Goddady 的後台後,前往網域,打開三個點 ··· 進入 DNS 管理
接下來你會需要新增 在 紀錄
裡
分別是 A 紀錄, CNAME
新增 A 首先你要找到你的 Github 的 A
參考Github 的網站 , 可以取得兩個指令來找到 Github 的 A
$ dig [YOUR-USERNAME].github.io +noall +answer
將這段指令貼上你的 Terminal 來查找你 github 網站的 A
[YOUR-USERNAME].github.io < 改為[你的github帳號].github.io
*注意:有幾個 A,在你的 Domain DNS 管理就要登幾個 A, 範例只有 1 個
[YOUR-USERNAME].github.io 3600 IN A 199.27.XX.XXX
[YOUR-USERNAME].github.io 3600 IN A 199.27.XX.XXX
[YOUR-USERNAME].github.io 3600 IN A 199.27.XX.XXX
[YOUR-USERNAME].github.io 3600 IN A 199.27.XX.XXX
有四筆,就要登入四筆
接著回到 Godaddy 的管裡 DNS 後台,「紀錄」右下方「加入」
新增這四筆
類型 : A
主機: @
指向: port號
TTL 得符合上面的3600,也就是一小時 (看你Dig多少就填多少~)
將 Github 設定指向 Domain
在你的 Github 前往 你放網站的 repository
[YOUR-USERNAME].github.io
進 settings 往下滑可以看到 custom domain
把你的 domain 貼到 custom domain 後按 save
這時候 Github 會在你的 repository 下新增一個你看不到的 CNAME 檔案
這邊我吃好多悶虧 qq
如果你回到 hugo, 利用 hugo 重新生 public 強制推上 Github
你要回到 settings 重新加 custom domain
如果刪掉 repository 重新創還是 404 或者沒畫面,無論做什麼事都 404/沒畫面,可能需要清除 Cookie (我是這樣才重新連回我的 Github.io)
若成功把 domain 與 github 連上,你會你的部落格內容,但 css/樣式/主題 會跑掉
這是因為連到新的 domain 了,沒有在 config.toml 更新
接著回到你的 Hugo, 把 Config.toml 檔
更改 baseURL
baseURL = "https://your-domain"
hugo 一次 產生 public 推上 你的 repository
*要注意一下如果強制推上 "git push -f" 要再回去 settings 新增 custom domain 才會產生 CNAME 檔案,才能接你的 domain
如果覺得每次 hugo 生成 public 強制推上,都會刪掉原先的 CNAME 檔案的話
就在你的 hugo web 資料夾的根部 (就是 config.toml 那層), 新增一個 CNAME 檔案(不用副檔名)
把你的 domain 直接寫在 CNAME 檔裡,儲存,之後每次下 hugo 生成 public 都會自動生成 CNAME 囉!
CNAME
your-domain
*只需要在第一行寫上你的 domain, 不用打 http/https 之類的
如果還是不知道要新增什麼,那就在 settings 新增 custom domain 後,把 repository git pull 下來,會看到新的一個 CNAME 檔案
那教學就到這囉,若有什麼問題可以來詢問我唷!