Deno Deployを使ってマークダウンで 書けるブログが爆速で建てられた話【toranoana.deno #10】

toranoana.deno #10で話した内容です。
https://yumenosora.connpass.com/event/265961/

Lumeを使ったブログを立ち上げた経緯、編集手順についての発表でした。

Transcript

1. Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved. Deno Deployを使ってマークダウンで 書けるブログが爆速で建てられた話 虎の穴ラボ　新規開発チーム 河野 裕隆 T O R A N O A N A L a b
2. Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved. 自己紹介 河野裕隆 • 2019/08入社 • 新規開発チーム ◦ クリエイティア他 虎の穴ラボへの入社理由 • スキルを高めあえる仲間がほしい • ユーザーに近い仕事がしたい 2 好きなもの • VOCALOID（初音ミク） • 謎解き、クイズ 今期イチオシアニメ • ぼっち・ざ・ろっく！ • ブルーロック
3. Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved. • アプリケーション構成 ◦ 使っているライブラリ等 • きっかけ • ブログの作り方 • 今後の修正点 アジェンダ 3
4. Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved. • Deno ◦ Lume • Github Actions • Deno Deploy アプリケーション構成 4
5. Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved. Lume使ってる人 どのくらい いますか？🙋 5
6. Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved. アプリケーション構成 6 開発環境 GitHub Actions Push main Deploy
7. Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved. 最終的にできたもの 7
8. Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved. 最終的にできたもの 8
9. Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved. • Deno製の静的サイトジェネレータ • 各種ホスティングサービスに簡単にデプロイ可能 ◦ プラグインが用意されている（以下でも一部のみ） ▪ GitHub Pages ▪ Vercel ▪ Netlify ▪ AWS Amplify • Markdown等のパースができる • 公式のブログテンプレートでサクッと作れる Lumeについて 9
10. Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved. • 10月のtoranoana.deno#9で藤原さんが紹介 • Markdownで書きたい！ ◦ 今後他のプラットフォームに移りやすい ◦ 勉強会のメモはMarkdownで書くことが多い ▪ そのまま体裁整えてブログに載せられれば早い/楽 ◦ 今までは「HTML職人の朝は早い・・・」状態 • どうせなら自動Deploy（CD）も入れたい • ホスティング先はどこでも良い Lumeで作ろうと思ったきっかけ 10
11. Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved. • こんなのを手書きしてました（懺悔 HTML職人の朝は早い・・・ 11
12. Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved. 1. 公式のブログテンプレートをcloneする 2. ブログの情報を書き換える 3. 不要なファイルを削除する 4. 記事を入稿する（Markdown） 5. Deno Deployの準備をする 6. GitHub Actions（Workflow）の設定を追加する 7. Pushする ブログの作り方 12
13. Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved. https://github.com/lumeland/base-blog 公式のブログテンプレートをcloneする 13 ブログの情報を書き換える • titleやdescription等を記載する
14. Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved. • テンプレートにもともとある、サンプル記事 • 使わないDeploy設定 不要なファイルを削除する 14 記事を入稿する（Markdown） • posts配下にMarkdownファイルを置くだけ ◦ Deploy時に自動でHTMLにパースしてくれる
15. Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved. • .github/workflows/deno_deploy.ymlにテンプレートが用意されて いるので少し修正するだけ • project名など あとはPushしてサイトが立ち上がるのを見守るだけ • アカウントを作成する • プロジェクトを作成する Deno Deployの準備をする 15 GitHub Actions（Workflow）の設定を追加する
16. Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved. • 記事のタグ付け ◦ タグでの検索 • メタ情報の埋め込み ◦ title情報など • 記事の検索 ◦ 日本語のパース関係は若干怪しい 公式テンプレートでできること 16
17. Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved. • ね、簡単でしょ？ ◦ Markdownでブログ書く環境 ◦ 自動デプロイ環境 ◦ 拡張をTypeScriptで書く環境 • 今後やりたいこと ◦ デザインに手を加える ◦ そもそも記事を増やす ◦ aタグで別タブに飛ばす設定ができないのでプラグイン書く まとめ 17