如何為自己的 podcast 寫一個網站
最近跟 Affe Liu 在做的一件事情就是開始了自己的 podcast。
如果你有興趣的話，可以直接到我們的網站收聽 ：https://podcast.overbuild.io
而這一篇文章算是第零集跟第一集的補充，文章的最後會一些跟技術有關的東西（PWA starter kit 以及 lit-element），主軸當然還是 podcast 而不是介紹技術，畢竟技術這種東西就是師父領進門而已嘛（RTFM
為什麼開始這個 podcast
文章產生的內容資訊能夠比較密集，我一直都覺得聲音或是影像比較能跟人建立連結podcast 跟文章的跳出率比起來，podcast 真的就是會不知不覺放著就聽完了；除此之外，我再次推薦你去聽第零集。
一開始其實是想專注在科技的內容上面，但後來發現資訊太過密集的 podcast 必須要很專心才能聽得下去，而且大部分人能專心的時間非常短，所以就漸漸變成了運用 podcast 這個平台來把我們覺得有興趣的事情告訴大家。
但如果是想吸收知識或是聽跟技術有關的閒聊，我也推薦以下幾個中文 podcast：
另外，雖然蠻多人都會強調寫 Blog 的好處之一是：「把已經讀熟的東西給筆記下來，等到需要時能快速查找」。但 podcast 似乎不是這樣子，畢竟用語音來記事通常比文字更不精確，我也還在想做 podcast 能有什麼好處，只是對於現階段的 Affe 跟我來說，最大的好處就是做 podcast 是一件蠻純粹又開心的事情，用我大學朋友的話說就是「做個如意如意、做個身體健康」。
為什麼要自己寫 Podcast 的網站
如果你真的想要開始自己的 podcast，其實你大概只要一個耳機、手機就可以開始，連電腦都不見得需要。
在這裏可以推薦一些 podcast 或影片給大家，都是在說如何做出自己的 podcast，當然，他們同時也都是我有在聽而且喜歡的頻道 ：
- 《頂樓加蓋 Overbuild》Ep1: 錄音錄起來！Podcast — 如何從無到有？
- 《星箭廣播》如何從無到有製作 podcast？《星箭廣播》經驗分享
- Pat Flynn 的 Youtube 頻道 （雖然他的主要產品其實是一個叫做聰明被動收入看起來超像直銷的網站，但對於 podcast 的部分其實蠻有參考價值的）
回到為什麼要自己寫網站，現在能直接使用的工具太多了（Wix、wordpress），而且大部分的 podcast hosting 服務都會免費提供你他們做好的靜態頁面，除此之外幾乎每個聽 podcast 的地方都有做網頁版，但還是想列出以下三個原因告訴大家為什麼我們還是堅持寫了自己的網站。
一、主要原因果然還是因為自己爽。
重新開始寫一個網站其實是很好玩的事情，尤其是進到公司以後不見得時時有這種機會，就算有這種機會，你可能也要考量技術的選擇，而不能單純選你最想要的東西。（可能因為不穩定、不夠優秀到可以取代現有的 tech stack）
二、能夠做出自己想要的客製化功能
舉例來說現在我們的網站看起來非常陽春，非常有頂樓加蓋的感覺，這就是其他直接提供我們靜態網站所做不到的事情。
開玩笑的，其實是我們會想要在後續有更多跟我們聽眾的互動，透過 Web 可以開啟蠻多可能性的，就請大家期待一下。
三、放上自己想放的東西
刻意把這一點跟上面隔開來是因為如果使用目前 podcast hosting 服務所提供的網站，我們就失去了可以展現哪些東西給我們的聽眾的控制權。
舉例來說像是 Anchor 這個服務主要就是希望你能待在 Anchor app 或是 Spotify 收聽（因為 Anchor 被 Spotify 給買下來），但對於節目的製作者來說，應該是盡可能的讓聽眾能夠選擇自己想要的方式來聽。
如何開始架出這個網站
終於來到跟技術有關的部分了，首先先來講一下為什麼不使用非常好用的 Gatsby js，其實我完全覺得如果你要從頭開始一個這種類型的網站，而且同事裡面沒有人討厭 React 的話，Gatsby 是非常非常優質的選擇。
我選擇使用 PWA starter kit 的原因其實是去年在 Chrome Dev Summit 的介紹：
效能能達到這樣：
儘管 Gatsby 也能達到一樣的效果，但是背後的思想是相差很多的。
在這個技術選擇中取代 React 的是 lit-element。
假如你有在 follow web component 的標準，就會知道其實現在在開發網頁時，如果你要的只是 component ，那你還真的不需要用到任何 framework。（有興趣的人可以去 inspect 一下 github 的網站）
BUT，在最近同事大大的使用中，我也發現如果直接使用 Web component 來完成全部的開發是一件非常辛苦的事情。舉例來說：state 和 prop 要自己處理。到最後甚至要自己寫一個 Base 來讓其他各個 Component 去 extend。
所以這時候就看到 lit-element：https://lit-element.polymer-project.org
太過簡化的講可以把它想成像是 React 或是 Vue 一樣的存在，詳細真的可以自己到官網看看文件。
lit-element 唯一不一樣的就是它被創造的目的就是希望有一天能被消滅掉；它的期待就是有一天我們不需要使用 framework 就能夠快樂的開發網站，在越來越多功能被瀏覽器支援之後，lit-element 就能夠變得越來越小，到最後甚至被拔掉。其實這就是整個 Polymer Project 的宗旨，希望我們「Use the platform」
歡迎有興趣的人去玩一玩，不過如果是要使用 PWA starter kit 的人：
- 看了這個 issue 才發現 PWA starter kit 已經進入只維護的狀態：https://github.com/Polymer/pwa-starter-kit/issues/373
- 這個專案可以達到一樣的效果，而且還沒有死掉（至少目前沒有）https://open-wc.org/
至於部署，因為 Anchor 提供 RSS 給我們，所以並不需要 server。需要的只是一個 cron job 來去監聽這個 RSS，最後在偵測到有任何更動的時候重新 build 一次網站就好。
蠻多人會覺得 server-side rendering 好像很重要，但實際上去評估之後，通常對效能的提升也很有限，而且 SEO 在現在爬蟲有辦法執行 JavaScript 的情況下似乎也不是重點；目前我認為比較重要，但前端網站沒辦法做到的事情之一只剩下在 facebook 或twitter 等社群媒體上分享時，沒辦法看到客製化的分享圖片或是文字（下圖是 facebook 的 open graph debugger）
但解決的方法也很簡單，其實就是準備一台小小 server 專門針對這種特殊 Request 去給他要的東西就好了，不管你是要用 serverless 或 AWS 開一台 spot instance 都 OK；server-side rendering 真的是 render 需要的東西就夠了。
結論
不管是在錄音還是到處聽聽不同 podcast 的過程中，都還是很驚訝就算「廣播」這個概念已經存在這麼久了，搬到了網路上變成「Podcast」後還是能有這麼多不同的變化。
如果製作內容不是為了求生存的話，最重要的應該還是自己能夠喜歡這個東西，目前為止的每一集我們真的都是蠻喜歡的。
都看到這裡了，真的不聽聽看嗎？
