Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

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

虎の穴ラボ株式会社

December 15, 2022
Tweet

More Decks by 虎の穴ラボ株式会社

Other Decks in Technology

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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide