# 架個站怎麼那麼難

## 目標

製作一個共筆部落格網站，並且購買域名使其可在 google 搜尋中被找到

## 使用的服務

1. [astro](https://docs.astro.build/en/getting-started/) (SSG web framework)
2. [netlify](https://www.netlify.com/) (server)
3. [google domains](https://domains.google.com/registrar/?hl=zh-TW) (買網域)
4. [certbot](https://certbot.eff.org/instructions?ws=webproduct&os=osx) (替我們向 AC 取得並安裝 SSL 憑證)

## 需要知道的名詞定義

### CSR、SSR 與 SSG

#### CSR (Client Side Rendering)

進入網站先載入 JS bundle 再向 server 發出請求取得內容後才渲染畫面，也就是將渲染工作交給瀏覽器(客戶端)，在初次載入時會稍微花時間，後續因為不用一直跟 server 交互所以操作上會比 SSR 快點，對 server 端也負擔也比較小，不過跟 SSR 相比也是有其劣勢

* FCP (First Contentful Paint，使用者可以看到頁面上的重要內容的時間點)
* TTI (Time-to-Interactive，使用者首次可以跟頁面互動的時間點)

想像今天我到的 CSR 餐廳點了惠靈頓牛排，廚師推著餐車走到我桌前才開始切香料開火煎牛排，完成然後當面端給我，真專業

#### SSR (Server Side Rendering)

傳統的網站就是 SSR，由 server 生成好完整的 html 檔案才交給瀏覽器。這邊提到的 SSR 是可保留換頁不閃爍的優點(不知道如何達成的)，並且可以動態在 server 生成 html 在第一次就拿到完整畫面，好處就是不會有空白內容閃爍，利於 SEO，但是將就是將渲染工作交給 server(伺服器端)，如果遇到同時有許多人造訪 server 造成負擔很重，或有些非常慢的 API，都有可能讓 server 的回應速度變慢


想像今天我到的 SSR 餐廳點了惠靈頓牛排，廚師接到訂單後開始在後廚切香料開火煎牛排，完成然後推出來給我

#### SSG (Static Side Generation)

SSG 意味著所有的內容都在 bulid 的時候製作完畢， server 只是將這個做好的 html 交給瀏覽器，在我們的客戶端以及伺服器端都不需要再做二次的處理，也因為內容都一樣，所以也會有快取，顯然就是用在變動頻率低的網站上面，就是我們這個 Shozzle blog 了

想像今天我到的 SSG 餐廳點了惠靈頓牛排，然後說我要五分熟鹽巴多一點，結果服務生說我們家沒在給你客製化五四三的，直接從冰箱拿出上個禮拜做好的加熱，然後推出來給你吃

---

一句話概括的話就是 在你面前搞給你、在後面搞完才給你、已經搞好了你來拿啊

那麼，要成為高手就是要能在最合適的時機使用做合適的技術 by 黑木玄齋


### sitemap

[什麼是 sitemap ](https://www.da-vinci.com.tw/tw/blog/Sitemap#nav-item-0)，簡單說就是提供網站資訊的檔案，可以放著等搜尋引擎來爬，也可以自己主動提交來加速我們的網站出現在搜尋結果中，可利用[線上生成工具](https://www.xml-sitemaps.com/)製作 (astro 有工具可以自動在每次 build 的時候生成並更新，讚)，從 [Google Search Console](https://search.google.com/u/1/search-console?resource_id=https%3A%2F%2Fshozzle.dev%2F) 提交

### SSL

真的很難弄欸

#### 相關文章
* [Configuring HTTPS using a custom TLS certificate with Netlify and Cloudflare](https://andrewlock.net/configuring-https-with-netlify-and-cloudflare/)
* [產生 SSL 憑證](https://pjchender.dev/internet/is-generate-ssl-certificate/)

## Google Search Console

網址被 google 編入索引是能否被搜尋到的重要指標，以下紀錄一下實際碰到的問題

[說明文件](https://support.google.com/webmasters/answer/7440203#discovered__unclear_status)

### 已找到 - 目前尚未建立索引

這個最常見，而且也不算是錯誤，大概就是 google 還在檢索中請你等一下

### 頁面會重新導向

網址出了問題，我們有些文章的名稱用 _ 下底線分隔，應該用 - 分號，請參考[網址結構文件](https://developers.google.com/search/docs/crawling-indexing/url-structure?hl=zh-tw)