静的サイトジェネレータ「Astro」と、国産のヘッドレス CMS「Newt」を用いてブログを爆速で構築する方法をご紹介します。
この構成は当オウンドメディアでも活用しており、開発・運用面ともに大変コスパ良く、これからブログを立ち上げようとしている方にぜひおすすめしたいです。
Astro とは
Astro は、静的ページの生成に特化した JavaScript 製フレームワークです。
React.js や Vue.js といった SPA とは異なり、1 ページずつレンダリングを行うためパフォーマンスや SEO の面で扱いやすい設計となっています。
TypeScript にも対応しており、シンタックスも複雑ではないため、普段からマークアップ業務を行っているエンジニアの方でも理解しやすいかと思います。
Newt とは
Newt は国産のヘッドレス CMS です。
国内のヘッドレス CMS だと microCMS も存在しますが、そちらと比較すると Newt はシンプルな UI と必要最低限の機能を備えているように思いました。
規模で比較すると、Newt は小〜中規模向けのサイト運用に向いているイメージです。
無料枠が設けられており、企業でも無料枠を利用することが可能です。大変ありがたい！
引用: よくある質問
https://www.newt.so/planFree プランを商用利用できますか？
はい、ご利用可能です。
個人・法人問わず、どのようなプロジェクトでもご利用可能です。
実装方法
親切丁寧に Newt の公式チュートリアルが解説してくれているので、こちらを参考にしてください。
この記事では、このオウンドメディア構築時に追加で行った実装をいくつかご紹介します。
投稿日の取得
記事の投稿日を取得して表示したい場合、少々入り組んだところに createdAt があるので見つけるのに苦労しました。
Astro.props で取得できる article オブジェクト内、_sys > createdAt に存在しています。
そのため、HTML 内では article?._sys?.createdAt を呼び出すことで表示されます。
なぜ _sys というプロパティに入っているのか分かりませんが、一旦これで解決しました。
日付のフォーマットには day.js を使うとよいでしょう。
<time datetime={dayjs(article?._sys?.createdAt).format("YYYY/MM/DD HH:mm:ss")}>{dayjs(article?._sys?.createdAt).format("YYYY年MM月DD日")}</time>
サイトマップの生成
Astro は初期設定ではサイトマップを生成しないため、拡張モジュールをインストールする必要があります。
このモジュールをインストールすることで、build 時に /sitemap-index.xml を自動生成してくれます。
下記コマンドでインストールします。
npm install @astrojs/sitemap
astro.config.mjs に設定を追記します。
import { defineConfig } from 'astro/config';
import sitemap from '@astrojs/sitemap';
export default defineConfig({
// ...
integrations: [sitemap()],
});
続けて sitemap プロパティに、サイトマップを生成するドメインを記載します。
import { defineConfig } from 'astro/config';
import sitemap from '@astrojs/sitemap';
export default defineConfig({
site: 'https://pixel-freak.com', // 追記 (末尾の/は不要)
integrations: [sitemap()],
// ...
});
src/layouts/Layout.astro を開き、head タグ内に link タグを追記します。
<head>
<link rel="sitemap" href="/sitemap-index.xml" />
</head>
public ディレクトリ配下に robots.txt を作成し、設定を追記します。
User-agent: *
Allow: /
Sitemap: https://pixel-freak.com/sitemap-index.xml // ドメインは適宜変更
以上を設定して build することで、サイトマップが自動的に生成されます。
サイトマップのインデックス URL を Google Search Console に登録しておきましょう。
記事の更新時に自動ビルド
このオウンドメディアは Vercel にデプロイされており、GitHub と連携しているため、特定のブランチにコミットがマージされるとビルド&デプロイが走るようになっています。
ただ、この状態だと Newt 側を更新しても変更が反映されないため、Vercel が提供している Deploy Hooks の設定を行う必要があります。
詳しくは下記 Newt 公式のヘルプページに記載があります。
流れとしては、Vercel 側で Deploy Hooks の設定を行い、Webhook の URL を取得します。
取得した URL を Newt 側のスペース設定画面でセットすることで、記事が更新されるたびに Vercel のビルド&デプロイが実行され、変更がサイトに反映されるようになります。
まとめ
以上、Astro と Newt を用いたオウンドメディア構築の例をご紹介しました。
個人的には開発・運用面ともに体験が良かったので、規模感と相手の要望に応じてこの構成を推していきたいと思っています。
ピクセルフリークでは Newt、microCMS、WordPress など幅広い CMS 導入の実績がございますので、ご相談等お気軽にお問い合わせください。
