如何使用wowchemy架設podcast網站

歡迎到開放咖啡角podcast網站選擇平台收聽節目，各集資訊網頁可以按讚打賞並留言評論。

我自建的podcast清單有許多心理科學家的英文節目都有專屬網站，整合節目的各集資訊，還有提供觀眾可留言互動的社群平台與贊助連結。這些節目都是使用podcast平台商提供的網站建置功能，其中最多節目使用的是FIRESIDE。付費平台雖然設定方便，不過每個月必須支付一些費用才能運作，在節目的流量還不夠支撐常態支出前，我選擇使用Anchor製作和推送節目內容，觀眾的互動平台在FB與telegram。經過一年的製作，我決定採用比較熟悉的開源架站套件wowchemy架設podcast網站，並且置入Like coin按讚打賞，讓聽眾用按讚實質支持這個節目。

建站的參考資料都是英文網站，因此特別做個紀錄，也給想使用wowchemy架設個人或專案的朋友參考。

步驟1

依照Wowchemy官網建議步驟，選定模板從netlify啟動建站步驟及連結github。啟動後可由github修改初始設定及啟動CMS。

待解問題: 網站預設語系必須是en；改成其他語系就無法啟動網站。

註: “關於本節目"在github編輯完成，該頁資訊置於content/authors/admin/_index.md，節目代表圖avatar.png置相同路徑。網站視窗圖示"favicon"與首頁頁首代表圖"logo"置於static/media。

步驟2

pull網站內容，使用終端編輯器進一步編輯。

註: 我使用Rstudio編輯, 在powershell使用指令hugo server啟動網站預覽，編輯一段落再push remote。

步驟3

設定主頁各集資訊分頁project.md

註: project.md yaml template

---
widget: portfolio
headless: true  # This file represents a page section.

# ... Put Your Section Options Here (title etc.) ...
weight: 20

title: 
subtitle: ''

content:
  # Page type to display. E.g. project.
  page_type: project

  # Default filter index (e.g. 0 corresponds to the first `filter_button` instance below)
  filter_default: 0

  # Filter toolbar (optional).
  # Add or remove as many filters (`filter_button` instances) as you like.
  # To show all items, set `tag` to "*".
  # To filter by a specific tag, set `tag` to an existing tag name.
  # To remove toolbar, delete/comment all instances of `filter_button` below.
  filter_button:
    - name: 全部
      tag: '*'
    - name: 咖啡伴侶
      tag: 咖啡伴侶
    - name: 烘焙工坊
      tag: 烘焙工坊
    - name: 隨行外帶
      tag: 隨行外帶
design:
  # Choose how many columns the section has. Valid values: 1 or 2.
  columns: '2'
  # Toggle between the various page layout types.
  #   1 = List
  #   2 = Compact  
  #   3 = Card
  #   5 = Showcase
  view: 3
  # For Showcase view, flip alternate rows?
  flip_alt_rows: false
---

步驟4

建立各集資訊網頁：content/project/建立project子資料夾，內置該集資訊index.md與封面圖`featured.png'。

註: index.md yaml template

---
title: (該集標題)
summary: (該集摘要)
tags:
- 咖啡伴侶
- 烘焙工坊
- 隨行外帶
date: (建立日期) <--- 網頁單集widget順序依日期由新至舊排列
---

步驟5

設定各集留言utteranc。比照個人網站的設定方法。

步驟6

在首頁intro.md設定收聽平台連結。

待解問題: 目前無法呈現各平台logo

步驟7

設定likecoin按鈕：可參考GordonWei的網誌 以及Likecoin Q&A

我的設定步驟：

1. build /layout/partial/likecoin.html

<iframe class="LikeCoin" height="235" src="https://button.like.co/in/embed/{{ .Site.Params.likerID }}/button?referrer={{ .Permalink }}" width="100%" frameborder=0></iframe>

2. config.toml: 增加設定likerID

[params]
  likerID = "yourLikerID"

3. 設定layouts/project/single.html

.Content後面加入{{ partial “likecoin.html” . }}