AstroとVercelでブログを始めました

概要

当ブログはAstroで作成した静的サイトをVercelにデプロイしています。

利用したライブラリ、サービス

  • Astro
  • Vercel
  • React
  • shadcn/ui
  • tailwind
  • Xserver (ドメイン取得)

Astro

Astroプロジェクトの作成

公式のセットアップ方法で作成しました。(Astro)

pnpm create astro@latest

ブログテンプレートを用いて作成しています。

shadcn/ui

ブログのUIを作成するためにshadcn/uiを活用してボタンやハンバーガーメニュー等をAstro Islandsで実装しています。

shadcn/uiとtailwindのインストール

shadcn/uiをインストールする際にshadcn/uiで利用されているtailwindもインストールします。
こちらも公式のセットアップ方法で作成しました。(shadcn/ui)

shadcn/uiの利用例

  1. ボタンコンポーネントの作成
pnpm dlx shadcn-ui@latest add button
  1. Astroファイル内でのボタンコンポーネントの利用
import { Button } from "@/components/ui/button";
...
<Button client:load>Button</Button>

Vercelにデプロイ

今回はGithubのリポジトリを利用しデプロイを行っています。

  1. Githubリポジトリの作成
  2. Vercelプロジェクト作成 vercel1
  3. リポジトリを選択 vercel2
  4. デプロイ vercel3
  5. デプロイ完了 vercel4

ドメイン設定

  1. Xserverでドメイン取得
  2. Vercelのプロジェクトにドメイン設定 domain1
  3. Xserverでのネームサーバーの設定 domain2 domain3 domain4
  4. 正しく設定されていればValid Cofigurationになる domain5