Setup podcast blog - Setup Hugo

June 16, 2020

Page content

Install

Create Hugo for podcast

cychong15:writing_factory cychong$ hugo new site cbs-ost
Congratulations! Your new Hugo site is created in /Users/cychong/workspace/writing_factory/cbs-ost.

Just a few more steps and you're ready to go:

1. Download a theme into the same-named folder.
   Choose a theme from https://themes.gohugo.io/ or
   create your own with the "hugo new theme <THEMENAME>" command.
2. Perhaps you want to add some content. You can add single files
   with "hugo new <SECTIONNAME>/<FILENAME>.<FORMAT>".
3. Start the built-in live server via "hugo server".

Visit https://gohugo.io/ for quickstart guide and full documentation.
cychong15:writing_factory cychong$ cd cbs-ost
cychong15:cbs-ost cychong$

갓 만들어진 빈 Hugo site 구조

cychong15:cbs-ost cychong$ tree -f
.
├── ./archetypes
│   └── ./archetypes/default.md
├── ./config.toml
├── ./content
├── ./data
├── ./layouts
├── ./static
└── ./themes

6 directories, 2 files

Setup git repo and add github and origin

cychong15:cbs-ost cychong$ git init
Initialized empty Git repository in /Users/cychong/workspace/writing_factory/cbs-ost/.git/

cychong15:cbs-ost cychong$ git remote add origin https://github.com/cychong47/cbs-ost.git

Create .gitkeep files and commit the base files

cychong15:cbs-ost cychong$ touch content/.gitkeep data/.gitkeep layouts/.gitkeep static/.gitkeep themes/.gitkeep
cychong15:cbs-ost cychong$ git add .
cychong15:cbs-ost cychong$ git status
On branch master

No commits yet

Changes to be committed:
  (use "git rm --cached <file>..." to unstage)
	new file:   archetypes/default.md
	new file:   config.toml
	new file:   content/.gitkeep
	new file:   data/.gitkeep
	new file:   layouts/.gitkeep

cychong15:cbs-ost cychong$ git ci -m "initial"
[master (root-commit) 041bae3] initial
 5 files changed, 9 insertions(+)
 create mode 100644 archetypes/default.md
 create mode 100644 config.toml
 create mode 100644 content/.gitkeep
 create mode 100644 data/.gitkeep
 create mode 100644 layouts/.gitkeep

Install zen theme

Hugo에서 제일(?) 유명한 podcast용 theme이 castanet 인데 내 경우에는 잘 동작을 안 한다. Castanet go module이 없다는 에러가 나는데 무슨 말인지 이해를 못하겠다는. 그냥 시키는 대로 했는데… 구글링을 좀 해봤지만 뾰족한 답을 찾지 못해 다른 theme을 찾았는데 이전에는 그냥 지나쳤던 theme이었는데(아마 theme demo가 castanet에 비해 podscastic(?) 하지 않아서 그랬던 것 같다.
그냥 일반 blog theme처럼 보이는 대다 그닥 깔끔하거나 예쁘지 않아서 그냥 지나친 듯.

설치는 여느 Hugo theme과 같은 방식으로 설치한다.

cychong15:cbs-ost cychong$ git submodule add https://github.com/frjo/hugo-theme-zen.git themes/zen
Cloning into '/Users/cychong/workspace/writing_factory/cbs-ost/themes/zen'...
remote: Enumerating objects: 30, done.
remote: Counting objects: 100% (30/30), done.
remote: Compressing objects: 100% (27/27), done.
remote: Total 2586 (delta 12), reused 9 (delta 3), pack-reused 2556
Receiving objects: 100% (2586/2586), 1.78 MiB | 1.72 MiB/s, done.
Resolving deltas: 100% (1540/1540), done.

cychong15:cbs-ost cychong$ git status
On branch master
Changes to be committed:
  (use "git restore --staged <file>..." to unstage)
	new file:   .gitmodules
	new file:   themes/zen

cychong15:cbs-ost cychong$ git push origin master
To https://github.com/cychong47/cbs-ost.git
 ! [rejected]        master -> master (fetch first)
error: failed to push some refs to 'https://github.com/cychong47/cbs-ost.git'
hint: Updates were rejected because the remote contains work that you do
hint: not have locally. This is usually caused by another repository pushing
hint: to the same ref. You may want to first integrate the remote changes
hint: (e.g., 'git pull ...') before pushing again.
hint: See the 'Note about fast-forwards' in 'git push --help' for details.

cychong15:cbs-ost cychong$ git pull origin master
remote: Enumerating objects: 3, done.
remote: Counting objects: 100% (3/3), done.
remote: Total 3 (delta 0), reused 0 (delta 0), pack-reused 0
Unpacking objects: 100% (3/3), 609 bytes | 304.00 KiB/s, done.
From https://github.com/cychong47/cbs-ost
 * branch            master     -> FETCH_HEAD
 * [new branch]      master     -> origin/master
fatal: refusing to merge unrelated histories
cychong15:cbs-ost cychong$ git pull origin master --allow-unrelated-histories

From https://github.com/cychong47/cbs-ost
 * branch            master     -> FETCH_HEAD
Merge made by the 'recursive' strategy.
 README.md | 2 ++
 1 file changed, 2 insertions(+)
 create mode 100644 README.md
 
cychong15:cbs-ost cychong$ git status
On branch master
nothing to commit, working tree clean

cychong15:cbs-ost cychong$ git push origin master
Enumerating objects: 14, done.
Counting objects: 100% (14/14), done.
Delta compression using up to 8 threads
Compressing objects: 100% (10/10), done.
Writing objects: 100% (13/13), 1.23 KiB | 1.23 MiB/s, done.
Total 13 (delta 2), reused 0 (delta 0), pack-reused 0
remote: Resolving deltas: 100% (2/2), done.
To https://github.com/cychong47/cbs-ost.git
   73d0c71..f94ec2b  master -> master

To update theme

source : https://github.com/frjo/hugo-theme-zen

git submodule update --remote --merge

Setup config

Hugo site를 만들면 theme 설치 후에 해야 하는 일은 theme의 example config 파일을 가져다 수정하는 것

cychong15:cbs-ost cychong$ cp themes/zen/exampleSite/config.yaml .

Put image for podcast

The image should be in the assets directory not the static directory(주의)

cychong15:cbs-ost cychong$ tree -f assets/
assets
└── assets/cbs-ost-logo.png

다른 machine에서 git repo clone하기

theme이 submodule로 추가되어 있는 상태라 이 경우 clone할 때 recursive 옵션을 주거나 submodule만 별도로 받아와야 한다. 기본적으로 submodule은 git repo에 함께 저장되지 않고, 다른 repo에 있다는 정보만 가지고 있으므로

source : https://kyubot.tistory.com/129

cychong@mini1:~/tmp$ git clone https://github.com/cychong47/cbs-ost.git
Cloning into 'cbs-ost'...
Username for 'https://github.com': cychong47
Password for 'https://cychong47@github.com':
remote: Enumerating objects: 23, done.
remote: Counting objects: 100% (23/23), done.
remote: Compressing objects: 100% (13/13), done.
remote: Total 23 (delta 4), reused 20 (delta 4), pack-reused 0
Unpacking objects: 100% (23/23), 529.45 KiB | 577.00 KiB/s, done.

cychong@mini1:~/tmp$ tree -d cbs-ost/themes/zen/
cbs-ost/themes/zen/

0 directories

submodule만 따로 받아오려면 다음과 같이.

cychong@mini1:~/work/cbs-ost$ git submodule update --init --recursive
Submodule 'themes/zen' (https://github.com/frjo/hugo-theme-zen.git) registered for path 'themes/zen'
Cloning into '/home/cychong/work/cbs-ost/themes/zen'...
Submodule path 'themes/zen': checked out 'd60e1a1582dcb882bab4fc1fef66a1ed5e19c583'

처음부터 git clone 할 때 recursive 옵션을 사용하면 repository를 가져올 때 submodule도 함께 받아 온다.

cychong@mini1:~/tmp$ git clone --recursive https://github.com/cychong47/cbs-ost.git cbs-ost2
Cloning into 'cbs-ost2'...
Username for 'https://github.com': cychong47
Password for 'https://cychong47@github.com':
remote: Enumerating objects: 23, done.
remote: Counting objects: 100% (23/23), done.
remote: Compressing objects: 100% (13/13), done.
remote: Total 23 (delta 4), reused 20 (delta 4), pack-reused 0
Unpacking objects: 100% (23/23), 529.45 KiB | 668.00 KiB/s, done.
Submodule 'themes/zen' (https://github.com/frjo/hugo-theme-zen.git) registered for path 'themes/zen'
Cloning into '/home/cychong/tmp/cbs-ost2/themes/zen'...
remote: Enumerating objects: 30, done.
remote: Counting objects: 100% (30/30), done.
remote: Compressing objects: 100% (27/27), done.
remote: Total 2586 (delta 12), reused 9 (delta 3), pack-reused 2556
Receiving objects: 100% (2586/2586), 1.78 MiB | 1.60 MiB/s, done.
Resolving deltas: 100% (1540/1540), done.
Submodule path 'themes/zen': checked out 'd60e1a1582dcb882bab4fc1fef66a1ed5e19c583'
cychong@mini1:~/tmp$ tree -d cbs-ost2/themes/zen/
cbs-ost2/themes/zen/
├── archetypes
├── assets
│   ├── js
│   │   ├── jq_versions
│   │   └── lib
...
├── php
├── scripts
└── static
    └── images

75 directories

이제 기본적인 blog 사이트 구성은 끝났다.

Podcast post 작성하기

Zen theme 덕분에 mp3 파일을 포함한 blog post를 markdown 파일로 작성하고 site build만 시키면 자동적으로 podcast feed를 만들어 준다.

https://github.com/frjo/hugo-theme-zen에 있는 내용을 보면 md 파일의 frontformatter에 아래 내용을 채워야 하는 듯 하다. 이 중에서 필수인 항목은 mp3 파일의 위치를 가리키는 mp3와 mp3 파일의 길이를 알려주는 duration 두 개 필요. hugo에서 image 파일 위치를 가리킬 때 static\images\a.jpg에 위치한 파일을 markdown 파일에서는 \images.a.jpg로 표현하는 것과 같은 형식을 사용하면 된다.

podcast:
    mp3:                    # * The path to the mp3 file, 
    duration:               # * Episode duration, e.g 1:04:02 (iTunes).
    image:
        src:                # Episode image src, place inside the assets directory (iTunes).
        alt:                # Alt text for the image, explain what is on the image.
        width:              # Image width in the article, defaults to 250px.
        class:              # Image wrapper class.
    explicit: true/false    # Episode explicit setting, default to false (iTunes).
    episode:                # Episode number (iTunes).
    episodeType: full/trailer/bonus # Episode type, defaults to full (iTunes).
    season:                 # Episode season (iTunes).
    block:                  # Block the episode from iTunes, default to no (iTunes).

예를 들어 10초 짜리 mp3 파일을 static\podcast\a.mp3라고 저장했다면 다음과 같이 frontformatter를 적어주면 된다.

podcast:
    mp3 : "/podcast/a.mp3"
    duration: 10