今回は、Webサイト向けのフレームワーク「Astro.js」を使用して、
- Markdownで記事コンテンツ管理
- ページ読み込み爆速
- コンポーネント指向Webサイト
を兼ね備えたWebサイト(ブログ)を作成した際の備忘録記事です。
Astro.jsとは
Astro.jsとは、ブログやeコマースなどのコンテンツ駆動のWebサイトを作成するにあたって使用することができるフレームワークです。
Astroは、コンポーネント指向のフレームワークでもありReactやVueをサポートし、MarkdownをHTML化することでWebサイトの表示速度を上げています。
また、オリジナルのファイル拡張子「.astro」が用意され、簡単にコーディングができます。
完成作品
こちらが今回作成したGithub上のテンプレートです。よかったら実際に開いてみて使ってみてください。
このテンプレートはブログ用に作成されたものなので、ブログ更新を極端に減らすために記事をMarkdownにて管理し、RSSやサイトマップも用意しています。
テンプレートの使用方法
まず、上記のリンクからGithubにアクセスし、右上の緑のボタン「Use this template」を押して、リポジトリを作成します。(Githubアカウントが必要です)
その後、リポジトリの名前を決めて下へスクロール、緑の「Create repository」を押せばアカウントにコードがコピーされたリポジトリができます。
あとはローカルにファイルを用意し、軽い環境構築をします。
まず必要なのは、ターミナルから依存関係をインストールすることです。以下のコマンドをターミナルで実行しましょう。
npm install実行すれば、基本このファイルが実行できるようになります。
続けて、これから立ち上げるWebサイトの設定をしていきます。srcディレクトリを除くと、なかにconfig.tsがあるはずです。そのなかのこれから公開する予定のURLなどを変更します。
export const TEMPLATE_CONFIG = {
site: {
title: 'StarterBlog', //ブログの名前
description: 'A starter Astro blog template.', //ブログの説明
url: 'https://example.com', //URL
basePath: '/',
language: 'ja',
},
content: {
markdownDir: 'src/content/blog',
pageSize: 12, //blogページで1ページに何個の記事カードを表示するか
homeLatestCount: 6, //ホームで表示す記事カードの個数
},
feed: {
title: 'StarterBlog RSS', //[ブログの名前] RSS
description: 'Latest posts from StarterBlog.', //Latest posts from [ブログの名前]
},
} as const;
export const isDraft = (draft: boolean | undefined) => draft === true;
追加でルートディレクトリにあるpackage.jsonとpackage-lock.jsonの先頭部分の「name:」も自分のブログの名前に変えておきましょう。
設定が完了すればあとはデプロイするだけです。デプロイはGithub Pagesでもなんでもいいですが、個人的に一番楽だったVercelをお勧めしておきます。
しかし今回はlocalhostで動作するか確認してみます。ターミナルにて
npm run devを実行すると、
[vite] connected.
16:44:31 [types] Generated 1ms
[vite] connected.
16:44:31 [content] Syncing content
16:44:31 [content] Synced content
astro v6.3.1 ready in 2618 ms
┃ Local http://localhost:4321/
┃ Network use --host to expose
16:44:05 watching for file changes...
このように表示されれば、https://localhost:4321でWebページにアクセスすることができます！このような画面になっているはずです。
コンテンツのカスタマイズ
より自分のブログに近づけていくために、カスタマイズをしていきましょう。
ファビコンを変更
publicディレクトリにあるfavicon.icoやfavicon.svgを変更し、ファビコンを変更できます。
記事を追加する
すでに例としてsrc/content/blog/example.mdを置いてありますが、それを削除して最初の投稿記事を作成しましょう。
記事はすべてMarkdownで記述します。しかし情報を渡すために、Markdownファイルの先頭にfrontmatterという部分で記事の設定を行います。
---
title: "Hello World!"
pubDate: 2026-05-11
description: "This is your first article in this blog."
author: "Your Name"
tags:
- Astro
- Tutorial
img: /noimg.png
draft: false
---
content here!
以下、各プロパティの説明です。
- title : 記事のタイトルです。
- pubDate : 記事を公開した日付です。必ずYYYY-MM-DDで記述してください。
- description : 記事の説明です。
- author : 記事の執筆者です。共同運営に活用できます。
- tags : blogページでの記事のタグ検索で使用できます。新規タグの追加の設定は不要で、勝手に新しく選択欄が増えます。
- img :
src/thumbnailディレクトリに存在する画像をパス指定してサムネイル画像を指定できます。 - draft : 記事の公開・非公開を設定できます。
draft : trueで非公開にできますが、ここでの非公開はHome,blogで表示されないことを指し、ブラウザ内のパス指定でのアクセスはできますので注意してください。
ぜひ使ってみて
ぜひテンプレートを使用して自分だけのブログを作成してみてください。また、バグや修正案等ありましたらGithubもしくはお問い合わせください。お待ちしております。
