小白從零開始用Astro建Blog

前言

網上比較有名的部落格我都有碰過一點點，但總是有令我不想用的原因，WordPress大概是最自由的一個平台，不過空間有限，如果放大量圖片的話很快就會塞爆，雖然我沒有那麼多東西，但基於我比較傾向不想換來換去、一勞永逸的性格，要麼不做，要麼就選無後顧之憂的東西。方格子是很好的選擇，缺點就是文章編輯器不太友善，還有就是介面的字太大……Pixnet的廣告多不是問題，問題是把頁面擋住了，手機看起來有點吃力。Blogger的操作不太喜歡，所以用了一陣子就直接放棄了。

建Blog工具

平台向
- Hashnode
- 方格子
- WordPress
- Medium
- Pixnet
- Blogger
靜態網站生成器
- Hugo
  - 優點
    - 生成超快
    - 小巧
    - 完全支援Markdown
    - 很多主題
    - 大量教學參考
    - 不用node.js
  - 缺點
    - 完全靜態
    - Go Templates語法不直觀
    - 不支援JS框架
    - 文件分散
- Astro
  - 優點
    - 支援Markdown、React、Vue
    - 比Hugo靈活，可加互動
    - 整合了Tailwind
    - 輕量
    - 多語系支援極佳
  - 缺點
    - 比Hugo複雜點，學習曲線比較高
    - 主題沒Hugo多
    - 生成速度比Hugo慢
    - 文件分散
- Jekyll
  - 優點
    - 穩定
    - GitHub Pages官方支援
    - 全Markdown
    - 不用Node.js
    - 非常多Plugins
  - 缺點
    - Ruby環境安裝痛苦
    - 生成速度偏慢
    - 框架有點過時
    - 無法用React、Vue
    - 只能用官方允許的plugins
    - 多語系支援差
- Hexo
  - 優點
    - ~~聽說很多人用~~
    - Node.js
    - 全Markdown
    - 上手簡單，設定也簡單
    - Plugin和Theme非常多
    - 生成快
    - 部署簡單
  - 缺點
    - 有些plugin年久失修
    - 新版Node.js可能不相容舊plugin
    - 多語系支援比較差
    - 佈景主題有時過度複雜
    - 不適合複雜動態網站
    - 架構比較封閉
- Next.js
  - 優點
    - React官方認證
    - 支援多種渲染方式
    - 各種的整合完美
    - 支援App Router
    - SEO非常強
    - 多語系支援
    - 靜態產生速度也很快
  - 缺點
    - 上手門檻比Astro高
    - 新的App Router學習曲線也很高
    - Build size比Astro大
    - 每次request都要跑server，Vercel bill up量高
    - 更新太快（！？

總括來說，靜態網站生成器再怎麼說也要一點點的程式碼，如果完全不想碰，又能夠接受平台公式化的樣子，那用平台就是最方便的了。不過未來要搬家或者平台倒閉就很麻煩。最後我選了Astro，個人覺得它的主題比較好看。

Step1 主題選擇

對有選擇困難症的我來說真是整個建Blog過程最痛苦的一環，在幾小時的折騰下我找到了三個比較喜歡的主題。

https://astro.build/themes/details/fuwari/ (Fuwari)
- 日系
- 多種顏色可選
- 一目了然的設計
https://astro.build/themes/details/charm/ (Charm)
- 極簡約風格
- 有很強的設計感
https://gitee.com/pivot-balance/HsuBlog (HsuBlog)
- 中文友善
- 比較多欄設計
https://github.com/cirry/astro-yi (Astro-Yi)
- 中文友善
- 設計的layout沒有藏在package中

~~以前的我會選Fuwari，日系和井井有條的排版，所有東西都要有明確的標示，現在的我只想專注於文字上，所以最後還是選擇了Charm。~~ 被Charm折騰了一晚，它真的簡到基本要有的東西都不給你，我最後還是改用Astro-Yi……

Step2 建站

安裝Node.js LTS版本
下載主題（有一些是用Git Clone主題，有一些可以直接下載Zip，但Charm是要生一個全新的Astro專案，然後直接把Charm的theme當template用）
~~以Charm為例，作者用的是pnpm，所以也要安裝~~ Asrto-Yi用npm
修改主題配置

Step3 把整個Blog放上GitHub/GitLab

做git

1
git init
2
git add .
3
git commit -m "說明"
4
git remote add origin https://github.com/你的帳號/你的repo.git
5
git branch -M main
6
git push -u origin main

Step4 部署到Vercel

我超懶的直接用GitHub註冊，需要手機號驗證，授權Vercel讀取你指定的repo，私人的也沒問題。

Vercel 會自動偵測：

Astro 專案
Build command: npm run build
Output dir: dist

成功後就會得到網址「你的專案名.vercel.app」，個人Blog就誕生了！之後有新的文章或者任何更改，只需要commit & push到GitHub上，Vercel就會自動build & deploy，超方便的！

除了Vercel外還有其他部署的平台：

GitHub Pages
Heroku
Netlify
Cloudflare Pages