將博客遷移到了 Cloudflare Pages
上個月把博客從 hexo 遷移到了 hugo，博客數據、發佈流程全部託管到 github。之後把之前寫的一篇《那些年曹大寫的文章》搬了過來，其他文章暫時下線了。
上週在折騰博客 css 的時候，aofei 說不如遷移到 Cloudflare，還能全球 cdn 加速。於是又動手遷移到 Cloudflare Pages，順便又修改了一些 css，目前博客樣式比較順我的意。這篇文章記錄下折騰的過程，希望能給讀者帶來一些參考。
遷移到 Cloudflare Pages
Cloudflare Pages 和 Github Pages 都能方便地部署靜態博客頁面，前者功能更強大，不僅支持自動部署、設置頁面規則將 www.qcrao.com 解析到 qcrao.com，還能配置 url 自動重定向，並且能夠分析頁面訪問量（之前是基於 google analytics）。
遷移過程很簡單，在 Cloudflare Pages 頁面，創建部署，目錄設置成 github 上的 blog repo。設置構建命令，接着只要 github 上的 blog repo 有更新，這邊就會自動部署。
這裏有一點要注意的是：通過設置環境變量來控制 hugo 的版本和本地一致，否則在本地和線上看到的頁面效果會有差異。我當時遇到的問題是 Cloudflare 生成的頁面不能點擊圖片進行放大，本地則是 OK 的。
DNS 配置
Cloudflare Pages 上對 DNS 的配置步驟有提示和說明，比較友好。
我之前的域名在騰訊雲上託管，這回得修改 DNS 服務器到 Cloudflare，需要去騰訊雲域名管理頁面修改。
下面這條 www -> qcrao.com 的記錄是在爲了讓我們在輸入 https://www.qcrao.com 時跳轉到 https://qcrao.com。
另外，Cloudflare 會自動將 https 證書設置好，完全不需要我們操心。
老文章重定向
之前用 hexo 發佈文章後，url 裏會帶上日期，非常長且沒有什麼意義。切到 hugo 後，url 沒有日期了，且加上了一個 post 路徑。同一個 md 文件，發佈之後鏈接不一樣：
【老地址】https://qcrao.com/2019/04/02/dive-into-go-slice
->
【新地址】https://qcrao.com/post/dive-into-go-slice/如果不設置重定向，原來的地址就會失效。
Cloudflare 剛好有一個重定向的功能，非常方便，一行命令就解決了：
/:year/:month/:day/* /post/:splat前面是老 url，後面是重定向的新地址。將老 url 裏的年、月、日匹配上，splat 表示 * 號內容，這樣就能把年月日從 url 中去掉，並且加上了 /post。重定向的功能就完成了，且非常優雅且順滑。
當我們訪問 https://qcrao.com/2019/04/02/dive-into-go-slice 時，會自動跳轉到：
CSS 美化
很慚愧，我並不會 CSS，他們都說特別簡單，下次我一定學😅。
一開始想要美化 CSS 的原因是在手機端看博客文章時，結尾部分的版權聲明字體過於大，而文章正文的字體又顯得特別小（我特地和曹大博客在手機端的效果做了對比）。
當然我自己是不知道怎麼『美化』的，所以請教了 aofei，幾行代碼就解決了：
@media only screen and (max-width: 800px) {
.post-archive {
font-size: 16px;
}
.post-content {
font-size: 16px;
}
.post-archive h2 {
margin: 0;
font: bold 16px / 1.1 "ff-tisa-web-pro", Cambria, "Times New Roman", Georgia, Times, sans-serif;
}
.post-archive .date {
font-size: 16px;
padding-right: .7em;
}
}第一行代碼限定在小屏幕下，執行之後的 CSS。具體匹配哪些元素要用谷歌瀏覽器的『檢查』功能。
問了幾次 aofei 如何修改 CSS 後，我自己成功地將 cmd markdown 渲染出來的引用格式移植到了博客上。
過程也很簡單：先用『檢查』功能找到 cmd markdown 頁面上的引用對應什麼元素，然後在它的 css 文件裏找到對應的代碼，copy 到本地 style.css 裏就 ok 了。好在 hugo 足夠快，改完代碼能立馬看到效果，我就可以不斷地嘗試。
static 目錄下面的文件會移到網站根目錄
當我們想讓一些文件在執行 hugo 命令後出現在網站根目錄下，只需要將它們放到 themes/maupassant/static 就行了。例如，我在博客首頁右邊欄放了一張《Go 程序員面試筆試寶典》，它是一個全局資源。
因此圖片路徑要用 /book.png。一開始我用的是 book.png，結果我切到『歸檔』頁面後，圖片無法展示。
關於博客的樣式可能暫時折騰到這裏爲止，之後要有規律地更新文章了。
畢竟內容纔是最重要的！
本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/TpV2T_ik_8gwhjz1ts7xVA