🦕

【Deno】秒で作ってデプロイするMarkdownベースのブログ

2022/07/19に公開約2,600字

DenoDeno Deployを使って、Markdownベースの個人ブログを作る方法を紹介します。

本記事のきっかけ

RemixConfのRyan Dahl氏のプレゼン動画がきっかけです。
デプロイがあっという間に終わる様子をデモンストレーションしています。

https://youtu.be/pBcFJmQ6UVM?t=564
ここで使われていたのが、deno_blogというボイラーテンプレートです。
denoの公式アカウントdenolandのリポジトリで、Ryan Dahl氏のブログでも使われています。
https://github.com/denoland/deno_blog
コードも見た目もミニマルで可愛かったので触ってみました。

前提条件

  1. denoをインストール済み
  2. deno deployのアカウントを持っている。
  3. githubのアカウントを持っている。
  4. (Optional) GitHub CLIをインストール済み

本題

プロジェクトの作成

deno run -r --allow-read --allow-write https://deno.land/x/blog/init.ts <プロジェクトのフォルダ名>

作られるもの

  • deno.jsonc
  • main.ts
  • posts
    • hello_world.md

記事を書きたいときはこのpostsフォルダにマークダウンファイルを追加するだけです。
それぞれのファイルの中身です。

deno.jsonc
{
  "tasks": {
    "dev": "deno run --allow-net --allow-read --allow-env --watch main.ts --dev",
    "serve": "deno run --allow-net --allow-read --allow-env --no-check main.ts",
  }
}
main.ts
import blog, { ga, redirects } from "https://deno.land/x/blog@0.4.1/blog.tsx";

blog({
  title: "My Blog",
  description: "This is my new blog.",
  avatar: "https://deno-avatar.deno.dev/avatar/blog.svg",
  avatarClass: "rounded-full",
  author: "An author",

  // middlewares: [

    // If you want to set up Google Analytics, paste your GA key here.
    // ga("UA-XXXXXXXX-X"),

    // If you want to provide some redirections, you can specify them here,
    // pathname specified in a key will redirect to pathname in the value.
    // redirects({
    //  "/hello_world.html": "/hello_world",
    // }),

  // ]
});
hello_world.md
---
title: Hello world!
publish_date: 2022-07-19
---

This is my first blog post!

ローカルリポジトリの初期化

cd <プロジェクトのフォルダ名>
git init
git add .
git commit -m "first commit"

GitHubにリモートリポジトリを作成

GitHub CLIでリモートリポジトリを作成。
もちろんGitHubのWebページから作っても良い。

gh repo create <任意のリポジトリ名> --public

リモートにpush

git remote add origin <リポジトリのURL>
git push -u origin main

Deno Deploy

Deno Deployにログイン

https://deno.com/deploy
New Poject ボタンからプロジェクトを作成
  • リポジトリとブランチを選択。
  • ブランチを選択した際に、AutomaticかGithub Action か問われるが、Automaticで良い。
    • ファイルはmain.tsしかないので、main.tsを選択。
  • Project name はお好みで

    最後にLINKをクリックする。

完成


完成品はこちら

https://k41531-dlog.deno.dev/
リポジトリはこちら
https://github.com/k41531/dlog

感想

シンプルって良いですね。

Discussion

ログインするとコメントできます