AstroとNewtを使ってブログサイトを作る①

この記事は、Zennに投稿した以下の記事の再投稿になります。

はじめに

Astro(フレームワーク)とNewt(CMS)で個人ブログサイトを作りました。
結構サクッとできたので実装〜デプロイまでの手順をご紹介しようと思います。

さて、この記事ではこんな感じのことを書きたいと思っています。

- Astroとは?Newtとは?
- チュートリアルの紹介
- 使ったテンプレートの紹介
- サイトの構築手順
- サーバー構築手順
- デプロイ→サイト公開!

全部を1つの記事にするのは読む方もしんどいと思うので、3回くらいに分けてお話しできたらと計画してます。


第一回

  • Astroとは?Newtとは?
  • チュートリアルの紹介
  • 使ったテンプレートの紹介

第二回

  • サイトの構築手順

第三回

  • サーバー構築手順
  • デプロイ→サイト公開!

ということで、第一回目のこの記事ではAstroとNewtがどんなものか簡単に説明した後、実際のサイト構築で参考にしたチュートリアルやテンプレートの方を紹介していこうと思います。

対象者

  • バックエンドの実装をせずにサイト構築したい方
  • 個人サイトが作りたい方
  • Astro、Newtがどんなものなのか知りたい方
  • Astroのテンプレートが知りたい方

動作環境・前提

バージョン
Mac 13.x
npm 8.11.0
Astro 2.8.5
newt-client-js 3.2.4

Astroとは?Newtとは?

Astro

Astroは、2022年4月にベータ版がリリースされ、そこから約一年でGithubのスター数が29.7kになるほどの非常に勢いのあるフレームワークです。

さて、Astroとはなんなのかというところから説明していくんですが、公式ドキュメントの最初の一文にこんなことが書かれています。

Astroとは?

Astroは、コンテンツにフォーカスした高速なWebサイトを構築するためのオールインワンWebフレームワークです。

この文を読むと、AstroがWebサイト構築に特化したフレームワークであることがわかります。

Webアプリケーションではありません。Webサイト、つまり静的サイトです。

昨今よく使われているReactやVueとの明確な違いですね。

こういう静的なサイトを生成するアーキテクチャのことを、静的サイトジェネレーター(SSG)と呼ぶらしく、Astroも基本的にはSSGで構築されています。(SSGとは

魅力1 パフォーマンス◎

AstroはJavaScript(以下、JSと書く)が不要なページではJSをロードしないようになっています。

他のフレームワークはどうかというと、例えばNext.jsでは「Hello, World」と静的に表示させるだけでもJSファイルをいくつかロードする必要があります。

このJSのロードを最低限まで減らすアプローチにより、TTL(Time To Live, そのデータの寿命のこと)のパフォーマンスが改善します。

以下はAstroの公式サイトのキャプチャですが、他のフレームワークと比べて圧倒的にパフォーマンスがパフォーマンスが早いことがわかります。

astro_performance.png

魅力2 テンプレートが豊富

Astroには無料で使えるオシャレなテンプレートがたくさんあります。

使い方も簡単で、githubからクローンすることで使うことができます。

このテンプレートをちょっと弄るだけで超簡単にオシャレなサイトが作れちゃいます!

テンプレートの一覧はこちら


公式ドキュメントのコアコンセプトに、もっと詳細なAstroの魅力がまとめられているので、是非こちらもご覧ください!

Newt

Newtは、2022年3月に提供を開始した日本製のヘッドレスCMSです。

「WordPressの次を担うサービスを作る」というミッションを掲げているそうです。

日本製ということで、当然ですがドキュメントも日本語のものが充実しています。嬉しいポイントですね。

Newtでは、1つのスペースにいくつでもAppを作成して管理することができます。

また、App単位でのメンバー招待、参加、退出も自由です。非常に柔軟な使い方が可能なCMSですね。

魅力1 管理画面がシンプルで使いやすい

管理画面はこんな感じです。(自分が使っているもののキャプチャなのでモザイクだらけですみません)

newt_admin_page.png

左側にメニューバーがあって、ここで新しくAppを追加したり、既存のAppの設定を行うことができます。

私はブログのAppを追加しているので、書いた記事の一覧やタグの一覧が表示されています。

CMSを使うのは初めてだったんですが、シンプルで余計な情報が少なくとても使いやすいです。

魅力2 日本語のチュートリアルが豊富

先ほども少し話題に上げましたが、Newtは日本製なので日本語のドキュメントが豊富です。

こちらがチュートリアルの一覧になります。

フレームワークとの連携、ホスティング、Webhookなどなど、盛りだくさんです。

私も今回ブログサイトを作るにあたってこれらのチュートリアルで勉強しました。

お陰で、それほど詰まることもなくスムーズにサイト公開できました。

チュートリアルの紹介

続いて、今回ブログサイトを作る際に参考にしたチュートリアルを紹介します。

  1. NewtとAstroを利用してブログを作成する

NewtとAstroを連携させて、ブログサイトを作るという内容です。

Astroのプロジェクト作成から、ローカル環境でNewtの記事をブラウザに表示するところまでが解説されています。

とりあえずこれをやれば、Astroの使い方とNewtとの連携がなんとな〜くわかります。

  1. Deploy your Astro Site to AWS

こちらは、デプロイに関するチュートリアルです。

私は今回AWS Amplifyを使いましたが、それ以外にもAWS S3やCloudFrontを使う方法も勉強することができます。

テンプレートの紹介

Astroとは?の章でも紹介しましたが、Astroには豊富な数のテンプレートが用意されています。

その中で今回私が利用したのはこちらになります。

Simple Blog Templateという名の通り、とてもシンプルなテンプレートです。

このテンプレートにSNSのアイコンを追加したりだとか、記事の一覧にカバー画像を表示したりだとかして今のサイトの形になりました。

1つだけ注意点として、開発の途中からテンプレートを適用する、というのができません。

例えば、先ほど紹介したチュートリアルで、ある程度ブログの実装を進めていたとします。

この状態で「だいぶ形になってきたし、そろそろテンプレートを適用して見た目の部分を作っていこう」というのは不可能です。

テンプレートは、プロジェクト作成のタイミングでオプションとして明記することで適用します。

逆に言うと、プロジェクト作成のタイミングでしか適用できないのです。

開発の途中で別のテンプレートに変更する、とかもできません。慎重に選んで決めましょう。

最後に

今回は、主にAstroとNewtの紹介を行いました。

私自身、まだまだ触り始めたばかりで知らないことの方が多いですが、このブログを書くにあたって改めて公式ドキュメントを見直したり、他の方のブログを拝見することで知識が深められたような気がして満足しています。

次回は、いよいよサイトの構築手順に移っていきます。

Romy(ろみぃ)

歌とゲームと本が好きな人間。ドラゴンになりたい。
不定期で記事を更新していきます。
今後、ブログ以外にもコンテンツ追加していく予定。

© Romy 2024