若是你想搭建一個博客

若是你只想搭建一個博客，那麼你極可能不須要一個服務器，並且會更容易些

若是你須要在我的服務器上部署，有可能會經歷如下步驟:

1. 配置反向代理，你須要瞭解 nginx 或者 traefik 的配置
2. 配置 https，使用 lets encrypt 生成證書
3. 使用 cron 按期更新證書
4. 手動部署：須要每次部署都須要登陸服務器
5. 自動部署：結合 github/gitlab 配置 CI/CD
6. 若是自動部署，有可能使用到 docker 與 docker-compose (有可能自建 docker repo)
7. 若是服務器在阿里雲買的有可能還須要備案

固然，若是你有一個完整的 kubernetes 環境，後期工做量相對就會簡單不少，你也須要

這也是在 k8s 上部署先後端應用的通常流程

1. 使用 k8s 結合 ingress 自動生成證書 (一次性工做)
2. 使用 helm 建立 chart
3. 構建 docker 鏡像 (有可能自建 docker repo)
4. 結合 github/gitlab 配置 CI/CD

相對而言使用一個靜態網站網站託管服務，複雜度與工做量就會少了不少，畢竟它部署時只須要維護若干靜態文件。也更適合剛接觸博客搭建或者沒有服務器的同窗

• 原文連接: 若是你想搭建一個博客
• 系列文章: 我的服務器運維指南

01 選擇一款靜態網站生成器

動態博客應用狀態太重，複雜性太高，不便於部署與遷移。無狀態的靜態博客是一個不錯的選擇。

若是你不想折騰數據庫，那你能夠選擇一個靜態網站生成器: 你只須要餵給它一大堆 markdown，它就會生成一些靜態文件。

至於生成器，這是我曾經使用過的，感受都很不錯，你能夠任選一款，如何構建參考官方文檔。

• hugo: github star 39k。使用 go 開發，是我用過的構建最快的生成器，它的簡介也只有一句話: The world’s fastest framework for building websites.，不過我自我感受它的主題樣式略少。若是你想定製，那你須要對 go 語言的 template 有些瞭解。
• hexo: github star 28.4k。使用 node 開發，主題樣式多，我仍是較爲喜歡這一點。
• vuepress: github star 14.5k。使用 vue 開發，通常用做文檔較多。從個人博客風格就能夠看出來，它使用 vuepress 構建。

02 如何部署

能夠部署在 github pages 或者 netlify

推薦使用 netlify，它能夠結合 github 作 CI/CD: 當你把代碼 push 到 github 的指定分支時，它就會在 netlify 自動部署，另外它也有緩存，重定向，Prerender等諸多配置

• github pages: 部署後可使用二級域名 xxx.github.io
• netlify: 部署後可使用二級域名 xxx.netlify.com

個人我的博客使用了 netlify，關於構建的配置文件以下

[build]
  base = ""
  publish = ".vuepress/dist"
  command = "npm run build"

[[headers]]
  for = "/assets/*"

  [headers.values]
    cache-control = "max-age=31536000"
複製代碼

03 若是你想使用本身的域名

你能夠在域名提供商 godaddy 或者阿里雲 直接註冊一個。

而且在域名提供商處配置 CNAME: yourdomain.com -> xxx.netlify.com

當使用了本身的域名後，你須要去 netlify 爲你的域名配置 https

04 使用 CDN

因爲網站託管服務的服務器大都在國外，網絡速度上可能慘不忍睹，配置CDN就能派上用場了。

若是域名沒有備案，建議使用 cloudflare 的CDN服務，徹底免費

若是域名已經備案，建議使用阿里雲的CDN服務，按量收費。

固然這時候 https 須要從新配置 (阿里雲的 https 流量也會收費)

Note: 使用 CDN 時要配置好正確的 nameserver

05 配置永久緩存

對於 vue/react 此類現代前端技術而言，結合 webpack 工程化愈來愈出色。如 vuepress 中 SPA 與 SEO 的結合， 但最重要的是生成帶有 hash 的靜態資源文件

爲帶有 hash 的靜態資源文件在源站(即netlify)配置永久緩存，也能在阿里雲上爲 CDN 與 https 省很多流量費

[[headers]]
  for = "/assets/*"

  [headers.values]
    cache-control = "max-age=31536000"
複製代碼

如下是緩存在CDN命中的截圖

1. cache-control: ma-age=31536000 設置永久緩存
2. via 經過的代理節點
3. x-cache: HIT 在CDN上命中緩存