Your Blog Title

Your blog description

Hello World - ブログを始めました

Hello World - ブログを始めましたはてなブックマーク

日記技術

はじめに

このブログは Hono + Cloudflare Pages + R2 で構築されています。

このブログのソースコード

GitHubで公開しています: shimabox/shimabox-blog-demo

セットアップからデプロイまでの詳細な手順は README を参照してください。

技術スタック

技術 用途
Hono Webフレームワーク
Cloudflare Pages ホスティング
Cloudflare R2 コンテンツ保存
Cloudflare KV キャッシュ

このブログの特徴

Markdownで記事を書ける

技術ブログにはMarkdownが最適です。コードブロックも簡単に書けます。

```javascript
const greeting = "Hello, World!";
console.log(greeting);
```

シンタックスハイライト対応

様々な言語に対応しています。

go

package main

import "fmt"

func main() {
    fmt.Println("Hello from Go!")
}

php

<?php

function hello(): void
{
    echo "Hello from PHP!\n";
}

hello();

python

def hello():
    print("Hello from Python!")

if __name__ == "__main__":
    hello()

bash

echo "シェルスクリプトも対応"

ダークモード対応

右上のボタンでライト/ダークモードを切り替えられます。システム設定にも連動します。

ローカル開発

開発サーバーを起動してローカルで確認できます。

npm run dev

http://localhost:8787 でアクセスできます。

LiveReloadに対応しているので、ファイルを保存すると自動的にブラウザがリロードされます。

Markdown記法

GitHub Alerts

> [!NOTE]
> これは補足情報です。追加の説明が必要な場合に使います。
ℹ️ Note

これは補足情報です。追加の説明が必要な場合に使います。

💡 Tip

これはヒントです。便利な使い方を紹介するときに使います。

📝 Important

これは重要な情報です。特に注意してほしい場合に使います。

⚠️ Warning

これは警告です。注意が必要な場合に使います。

❗ Caution

これは注意勧告です。特に注意が必要な場合に使います。

絵文字ショートコード

  • :rocket: → 🚀
  • :smile: → 😄
  • :heart: → ❤️

などなど、多数の絵文字ショートコードに対応しています。

埋め込み対応

記事内のURLを自動的に埋め込みカードに変換します。

OGP画像

OGP画像はコマンドで生成可能です。SNSでシェアしたときに見栄えが良くなります。

記事（slug）を指定してOGP画像を生成

生成コマンド

npm run generate-ogp -- slug

生成コマンド（強制上書き）

npm run generate-ogp -- slug --force

全記事のOGP画像を生成

生成コマンド

npm run generate-ogp

全記事を強制生成

npm run generate-ogp:force
💡 Tip

この記事のOGP画像はこちら

マークダウンコピー

記事下部のシェアボタンにある「記事のマークダウンをコピー」ボタンで、この記事の生マークダウンをクリップボードにコピーできます。

記事・画像の削除

ローカルで削除してmainにpushすると、R2からも自動削除されます。

手動で即座に削除したい場合

export SITE_URL=https://your-blog-name.pages.dev
export ADMIN_KEY=your-admin-key
npm run sync:delete

おわりに

このブログでは、技術的なことから日常のことまで幅広く書いていく予定です。

よろしくお願いします！ 👋

← 記事一覧に戻る