Astroで会社サイトを再構築しました。

なんでもコードで作りたい自分としては、Webサイトもコードで作りたいと考えています。しかし、Reactなどの昨今のフロントエンドフレームワークは動的なアプリをつくるためのもので、静的なWebサイトには大きすぎます。かといって、HTMLを直接書くというのも今時ではありません。

というわけで、WebサイトをつくるときにはSTUDIOなどのノーコードツールを使って構築することが多かったのですが、 Astroというちょうどよさそうなツールが出てきたので、当社の会社サイトを再構築してみました。

セットアップ

何も考えることはありません。これで終了です。

yarn create astro

実行はいつものです。

yarn run dev

サイトをつくる

基本的なこととして、Astroでは、.astroというファイルでHTMLに相当するコードを記述します。 .jsxみたいなものですね。

.astroファイルは簡単に言うと、こういう構造をしています。

---
Reactコード
---

<html>
HTMLコード
</html>

<style>
CSSコード
</style>

シンプルで分かりやすいですね。

pages/に置いた.astroファイルの名前がそのままパス名になります。ですので、単にpages/に.astroファイルを書いていけば、サイトの完成です。アセット類は、いつものようにpublic/に置きます。

共通で使う部品はコンポーネント化してcomponents/に置いておくこともできます。ここら辺はReactの仕組みが使えていいですね。

特徴的な機能としては、content/に置く.tsファイルです。コードとしては、単なるオブジェクト定義ですが、テキストデータをpagesから切り出して別に管理できるようにする仕組みです。

元々、HTMLは文書構造のためのもので、見た目の要素（CSS）は後付け的な位置づけです。ということは、テキストデータを別にすることも理にかなっているわけです。

構築もしやすいし、管理もしやすい。とてもいいフレークワークだと思いました。

お問い合わせフォームだけは、静的なコードでは構築できません。メールを送信するだけなので、APIを１つつくればいいだけなのですが、SSGformというシンプルに使えるサービスがありましたので使わせていただきました。

使い方は簡単で、SSGformでフォームの設定を作成し、form actionにSSGformで作成したフォームのURLを設定するだけです。

メールの文面も自由に設定できますし、受信したお問い合わせメールにそのまま返信すれば、お問い合わせされた方が宛先に設定されて、返信できます。 reCAPTCHAやチャット連携などもできます。

これでだいたいのWebサイトはつくれそうです。再構築した当社のWebサイトはこちらになります。