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
   

   View Slide

2. Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved.
   自己紹介
   河野裕隆
   ● 2019/08入社
   ● 新規開発チーム
   ○ クリエイティア他
   虎の穴ラボへの入社理由
   ● スキルを高めあえる仲間がほしい
   ● ユーザーに近い仕事がしたい
   2
   好きなもの
   ● VOCALOID（初音ミク）
   ● 謎解き、クイズ
   今期イチオシアニメ
   ● ぼっち・ざ・ろっく！
   ● ブルーロック
   

   View Slide

3. Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved.
   ● アプリケーション構成
   ○ 使っているライブラリ等
   ● きっかけ
   ● ブログの作り方
   ● 今後の修正点
   アジェンダ
   3
   

   View Slide

4. Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved.
   ● Deno
   ○ Lume
   ● Github Actions
   ● Deno Deploy
   アプリケーション構成
   4
   

   View Slide

5. Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved.
   Lume使ってる人
   どのくらい いますか？🙋
   5
   

   View Slide

6. Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved.
   アプリケーション構成
   6
   開発環境
   GitHub Actions
   Push main Deploy
   

   View Slide

7. Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved.
   最終的にできたもの
   7
   

   View Slide

8. Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved.
   最終的にできたもの
   8
   

   View Slide

9. Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved.
   ● Deno製の静的サイトジェネレータ
   ● 各種ホスティングサービスに簡単にデプロイ可能
   ○ プラグインが用意されている（以下でも一部のみ）
   ■ GitHub Pages
   ■ Vercel
   ■ Netlify
   ■ AWS Amplify
   ● Markdown等のパースができる
   ● 公式のブログテンプレートでサクッと作れる
   Lumeについて
   9
   

   View Slide

10. Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved.
    ● 10月のtoranoana.deno#9で藤原さんが紹介
    ● Markdownで書きたい！
    ○ 今後他のプラットフォームに移りやすい
    ○ 勉強会のメモはMarkdownで書くことが多い
    ■ そのまま体裁整えてブログに載せられれば早い/楽
    ○ 今までは「HTML職人の朝は早い・・・」状態
    ● どうせなら自動Deploy（CD）も入れたい
    ● ホスティング先はどこでも良い
    Lumeで作ろうと思ったきっかけ
    10
    

    View Slide

11. Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved.
    ● こんなのを手書きしてました（懺悔
    HTML職人の朝は早い・・・
    11
    

    View Slide

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
    

    View Slide

13. Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved.
    https://github.com/lumeland/base-blog
    公式のブログテンプレートをcloneする
    13
    ブログの情報を書き換える
    ● titleやdescription等を記載する
    

    View Slide

14. Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved.
    ● テンプレートにもともとある、サンプル記事
    ● 使わないDeploy設定
    不要なファイルを削除する
    14
    記事を入稿する（Markdown）
    ● posts配下にMarkdownファイルを置くだけ
    ○ Deploy時に自動でHTMLにパースしてくれる
    

    View Slide

15. Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved.
    ● .github/workflows/deno_deploy.ymlにテンプレートが用意されて
    いるので少し修正するだけ
    ● project名など
    あとはPushしてサイトが立ち上がるのを見守るだけ
    ● アカウントを作成する
    ● プロジェクトを作成する
    Deno Deployの準備をする
    15
    GitHub Actions（Workflow）の設定を追加する
    

    View Slide

16. Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved.
    ● 記事のタグ付け
    ○ タグでの検索
    ● メタ情報の埋め込み
    ○ title情報など
    ● 記事の検索
    ○ 日本語のパース関係は若干怪しい
    公式テンプレートでできること
    16
    

    View Slide

17. Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved.
    ● ね、簡単でしょ？
    ○ Markdownでブログ書く環境
    ○ 自動デプロイ環境
    ○ 拡張をTypeScriptで書く環境
    ● 今後やりたいこと
    ○ デザインに手を加える
    ○ そもそも記事を増やす
    ○ aタグで別タブに飛ばす設定ができないのでプラグイン書く
    まとめ
    17
    

    View Slide