如何使用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
我的設定步驟:
- 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>
- config.toml: 增加設定likerID
[params]
likerID = "yourLikerID"
- 設定
layouts/project/single.html
.Content後面加入{{ partial “likecoin.html” . }}
!登入個人github帳號就能留言!