🦕
【Deno】秒で作ってデプロイするMarkdownベースのブログ
DenoとDeno Deployを使って、Markdownベースの個人ブログを作る方法を紹介します。
本記事のきっかけ
RemixConfのRyan Dahl氏のプレゼン動画がきっかけです。
デプロイがあっという間に終わる様子をデモンストレーションしています。
YouTubeのvideoIDが不正です
ここで使われていたのが、deno_blogというボイラーテンプレートです。
denoの公式アカウントdenolandのリポジトリで、Ryan Dahl氏のブログでも使われています。
コードも見た目もミニマルで可愛かったので触ってみました。
前提条件
- denoをインストール済み
- deno deployのアカウントを持っている。
- githubのアカウントを持っている。
- (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にログイン
New Poject ボタンからプロジェクトを作成
- リポジトリとブランチを選択。
- ブランチを選択した際に、AutomaticかGithub Action か問われるが、Automaticで良い。
- ファイルはmain.tsしかないので、
main.tsを選択。
- ファイルはmain.tsしかないので、
- Project name はお好みで
最後にLINKをクリックする。
完成
完成品はこちら
リポジトリはこちら
感想
シンプルって良いですね。
Discussion