CMScom TechTalk VuePressで作ったポットキャストサイト

Transcript

1. copyright © 2020 CMS Comunications Inc. all rights reserved. VuePressで構築したポッドキャストサイ ト ─技術的な側面─ 代表取締役　寺田 学 「CMScom TechTalk」 2020年6月12日
2. copyright © 2020 CMS Comunications Inc. all rights reserved. 概要 個人の趣味で2月からポッドキャストを始めた。サービスを利用しているので専用サイトは 不要だったが、SNSでの宣伝などを行う場合に専用のサイトがあるとうれしと思った。 勉強中のVueで静的サイトジェネレータを使ったしくみだと、ホストも楽だし勉強になると思 い構築した。 その技術的な側面を説明する。取り扱うツールは、VuePress, github, netlifyなどです。
3. copyright © 2020 CMS Comunications Inc. all rights reserved. トークの流れ • サイトの概要 • ポッドキャストの配信 • 全体構成 • 自動化の仕組み
4. copyright © 2020 CMS Comunications Inc. all rights reserved. サイトの概要
5. copyright © 2020 CMS Comunications Inc. all rights reserved. サイトの概要 terapyon channel podcast • https://podcast.terapyon.net/ • ポッドキャストの概要やエピソードを紹介 ◦ Home ◦ About ◦ Episodes ◦ Special
6. copyright © 2020 CMS Comunications Inc. all rights reserved. ポッドキャストの配信
7. copyright © 2020 CMS Comunications Inc. all rights reserved. ポッドキャストの配信 Anchor • https://anchor.fm/ • ここにエピソードを作ると様々な配信サービスに再配信 ◦ Spotify ◦ Apple ◦ Google ◦ など
8. copyright © 2020 CMS Comunications Inc. all rights reserved. 全体の構成
9. copyright © 2020 CMS Comunications Inc. all rights reserved. 静的サイトジェネレータ 静的にサイトを構築してくれる仕組み JavaScriptの技術を用いる • Gatsby.js (React) • Next.js (React) • Nuxt.js (Vue) • VuePress (Vue)
10. copyright © 2020 CMS Comunications Inc. all rights reserved. https://podcast.terapyon.net 音声ファイル Noteを書く MDファイルを書く https://github.com/terapyon/podcast-website Pushでビルド
11. copyright © 2020 CMS Comunications Inc. all rights reserved. 自動化の仕組み
12. copyright © 2020 CMS Comunications Inc. all rights reserved. https://podcast.terapyon.net 音声ファイル Noteを書く RSSを定期 チェック Pushでビルド
13. copyright © 2020 CMS Comunications Inc. all rights reserved. ご清聴 ありがとうございました。
14. copyright © 2020 CMS Comunications Inc. all rights reserved. Q&A