如何使用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" . }}