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