Astro(フレームワーク)とNewt(CMS)で個人ブログサイトを作って、結構サクッとできたので実装〜デプロイまでの手順をご紹介しようと思います。
ちなみに、作ったブログサイトはこれです。良ければ覗いていってください^^
さて、この記事ではこんな感じのことを書きたいと思っています。
- Astroとは？Newtとは？
- チュートリアルの紹介
- 使ったテンプレートの紹介
- サイトの構築手順
- サーバー構築手順
- デプロイ→サイト公開！
全部を１つの記事にするのは読む方もしんどいと思うので、３回くらいに分けてお話しできたらと計画してます。
第一回
- 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とは）
魅力１ パフォーマンス◎
AstroはJavaScript(以下、JSと書く)が不要なページではJSをロードしないようになっています。
他のフレームワークはどうかというと、例えばNext.jsでは「Hello, World」と静的に表示させるだけでもJSファイルをいくつかロードする必要があります。
このJSのロードを最低限まで減らすアプローチにより、TTL(Time To Live, そのデータの寿命のこと)のパフォーマンスが改善します。
以下はAstroの公式サイトのキャプチャですが、他のフレームワークと比べて圧倒的にパフォーマンスがパフォーマンスが早いことがわかります。
魅力２ テンプレートが豊富
Astroには無料で使えるオシャレなテンプレートがたくさんあります。
使い方も簡単で、githubからクローンすることで使うことができます。
このテンプレートをちょっと弄るだけで超簡単にオシャレなサイトが作れちゃいます！
テンプレートの一覧はこちら
公式ドキュメントのコアコンセプトに、もっと詳細なAstroの魅力がまとめられているので、是非こちらもご覧ください！
Newt
Newtは、2022年3月に提供を開始した日本製のヘッドレスCMSです。
「WordPressの次を担うサービスを作る」というミッションを掲げているそうです。
日本製ということで、当然ですがドキュメントも日本語のものが充実しています。嬉しいポイントですね。
Newtでは、１つのスペースにいくつでもAppを作成して管理することができます。
また、App単位でのメンバー招待、参加、退出も自由です。非常に柔軟な使い方が可能なCMSですね。
魅力１ 管理画面がシンプルで使いやすい
管理画面はこんな感じです。（自分が使っているもののキャプチャなのでモザイクだらけですみません）
左側にメニューバーがあって、ここで新しくAppを追加したり、既存のAppの設定を行うことができます。
私はブログのAppを追加しているので、書いた記事の一覧やタグの一覧が表示されています。
CMSを使うのは初めてだったんですが、シンプルで余計な情報が少なくとても使いやすいです。
魅力２ 日本語のチュートリアルが豊富
先ほども少し話題に上げましたが、Newtは日本製なので日本語のドキュメントが豊富です。
こちらがチュートリアルの一覧になります。
フレームワークとの連携、ホスティング、Webhookなどなど、盛りだくさんです。
私も今回ブログサイトを作るにあたってこれらのチュートリアルで勉強しました。
お陰でさほど詰まることなくスムーズにサイト公開できたので、非常に助かりました。
チュートリアルの紹介
続いて、今回ブログサイトを作る際に参考にしたチュートリアルを紹介します。
- NewtとAstroを利用してブログを作成する
NewtとAstroを連携させて、ブログサイトを作るという内容です。
Astroのプロジェクト作成から、ローカル環境でNewtの記事をブラウザに表示するところまでが解説されています。
とりあえずこれをやれば、Astroの使い方とNewtとの連携がなんとな〜くわかります。
- Deploy your Astro Site to AWS
こちらは、デプロイに関するチュートリアルです。
私は今回AWS Amplifyを使いましたが、それ以外にもAWS S3やCloudFrontを使う方法も勉強することができます。
テンプレートの紹介
Astroとは？の章でも紹介しましたが、Astroには豊富な数のテンプレートが用意されています。
その中で今回私が利用したのはこちらになります。
Simple Blog Templateという名の通り、とてもシンプルなテンプレートです。
このテンプレートにSNSのアイコンを追加したりだとか、記事の一覧にカバー画像を表示したりだとかして今のサイトの形になりました。
１つだけ注意点として、開発の途中からテンプレートを適用する、というのができません。
例えば、先ほど紹介したチュートリアルで、ある程度ブログの実装を進めていたとします。
この状態で「だいぶ形になってきたし、そろそろテンプレートを適用して見た目の部分を作っていこう」というのは不可能です。
テンプレートは、プロジェクト作成のタイミングでオプションとして明記することで適用します。
逆に言うと、プロジェクト作成のタイミングでしか適用できないのです。
開発の途中で別のテンプレートに変更する、とかもできません。慎重に選んで決めましょう。
最後に
今回は、主にAstroとNewtの紹介を行いました。
私自身、まだまだ触り始めたばかりで知らないことの方が多いですが、このブログを書くにあたって改めて公式ドキュメントを見直したり、他の方のブログを拝見することで知識が深められたような気がして満足しています。
次回は、いよいよサイトの構築手順に移っていきます。
株式会社 カラビナテクノロジーは「命綱や支点を素早く確実に繋ぐカラビナ。そんなカラビナのような役割をテクノロジーで実現したい」という想いのもと、福岡で設立。 主にシステム開発・アプリ開発・ Webサイト制作を行っています。採用情報→karabiner.tech/recruit/requirements/
Discussion