長らくホームページを更新しておりませんでしたが、ようやく重い腰を上げ、自社HPを作り直しました。今回はAstroを使用してHPを作り直したので、その経緯等を書こうと思います。

なぜ自社企業のホームページを作り直したか

もともとはWordpressでとりあえずのホームページを作っていました。普段の同業他社との連携や仕事の受注などに際してホームページを活用する機会がほとんどなかったため、とりあえずのもののままでした。Wordpressのデフォルトの毎年更新されるテーマを使用し、最低限企業名等を編集するだけのずさんなサイトでした。。

ただ、コワーキングスペースで作業するようになったり、地場の様々な会社様と繋がるたびに、名刺交換する機会が多く、名刺すらも作っていなかったので、名刺でも作ろうかと思い始めました。これが最初のきっかけです。

なぜきっかけになったかと言うと、名刺を作成するとなると、ホームページのURLはもちろん載せるし、名刺には会社のロゴも載せます。まともなサイトもまともな企業ロゴも作成していなかったので、これを期にそろそろ作成するかとなりました。

なぜAstroを採用したのか

様々な選択肢があるなかで、astroを採用した理由は主に以下です。

  • Wordpressはこれ以上使いたくなかった（gitで管理しずらい）
  • 近くにastroの有識者がいた
  • 同時に自社サービスの公式HPもastroで作り直していた

Wordpressはこれ以上使いたくなかった

正直Wordpressはかなり便利かと思います。ほとんどのホスティングサービスでは簡単にインストールできるようになっているし、カスタマイズも簡単。様々なプラグインも用意されているし、ポチポチとやっていけばそれなりのサイトはすぐに作成できます。またエンジニアでなくてもブログの更新等もGUIで簡単にできます。ContactForm7もめちゃくちゃ簡単で便利ですよね。

エンジニアを志す初学者にとっても、Wordpressは最良のファーストステップだとも思います。html, css, javascript, PHPの基礎を学び、それらをカスタマイズしていくことで力がついていきます。自分自身、Wordpressの自作テーマを作成したり、企業のHPを作成したり（今も活用してくれている）、Wordpressにはそれなりに関わってきています。

ただ、何が嫌だったかと言うと、Wordpressはgithubでの管理がし辛いんですよね。。いや、ある程度はできるかとは思うのですが、自作テーマなんかはgitで管理してgithubにあげておけばいいし。ただ、コンテンツ（ブログ記事とか）はWordpressはデータベースに保存する仕組みなので、コンテンツ自体をgitで管理することはできません。（できないよね？）

また、広く普及している分セキュリティに関しても不安はありますし、Webアプリでもない基本的な静的なサイトは、アクセスされてからレンダリングする仕組みじゃなくて良いよね？とも思います。

Astroの有識者と友だちになったのがきっかけ

一緒にサーフィンする仲間に、Web制作に携わる友人が何人もいますが、そのうちの一人がastroをがっつりやっていて話を聞いてみて良さげだと思ったからです。

月に一度行う勉強会で、astroを触り、Webのモダンな開発にも触れておきたいと感じました。

また、astroはビルドするタイミングで静的なページをレンダリングするため、ユーザーがアクセスしたときのレスポンスが早いのが特徴です。もちろん、ユーザーのアクセスに合わせて内容を更新したり、部分的にjavascriptをうまく活用するAstro Islandという仕組みがあったり、柔軟に対応できるのもポイントが高いです。

今回の自社HPのケースでは、更新頻度は高くなく静的なサイトなので、astroにピッタリでした。またメルカリのエンジニアリングブログもastroで作成されているのも採用の決め手の一つでした。

自社アプリの公式サイトもastroで

そんな経緯があり、自社アプリの公式サイトもastroで作成しなおしました。

DAIMOKU PRO

CSS

astroを採用するに際して、もう一点cssのフレームワークをどうしようか問題がありました。選択肢としては、

  • Vanilla CSS
  • SCSS
  • Tailwind CSS

がありました。

私としては、以前はBootstrapを使用していましたし、それにSCSSを組み合わせてサイトを作成していたりとしていましたが、少しWebから離れていたのもあって、もう一度思い出す意味も込めて、Vanilla CSSを採用しました。要はシンプルなCSSです。（あれVanilla CSSって言い方あったっけ？）

レスポンシブ対応やよく使用するdisplay: flexなどいろいろと思い出しながら一つ一つ再度自分のスキルとして身につけていきました。結果として、astroのチュートリアルを終えてから、2週間程度でデザインからリリースまで本サイトの公開することができました。

SCSSは使ってよかったかもと思う一方、Tailwindなどのフレームワークは学習コストがまた少しかかるため、今回は見送って良かったかなと思っています。このサイトのような、小さめの規模であれば、正直シンプルなCSSもしくはSCSSで十分かと感じています。

Tailwind CSSなどCSSのフレームワークを使用するのは、複数人での大規模開発で統一感をもたせながら開発する必要があるときなどには、大きなメリットを発揮するんじゃないかな。

ホスティングサービス

今回の自社HPは昔からずっと使っているエックスサーバーを使用することにしました。

Netlifyという選択肢もあったのですが、調査を進めていくうちに、金額面や問合せフォームなどの観点から断念しました。Netlifyも使いやすくてよいのですが、どうやら日本からのアクセスは遅いらしいという点もマイナスポイント。（ちゃんと自分で調査したわけではありませんが。。）

Netlifyが日本からだと遅い

また、Netlifyでは、OrganizationでのPrivate repoはPro Plan（月額19$）に登録しないと使用できないとのこと。さらに、デプロイしたgitユーザー1アカウントにつき追加で月額19$かかります。確かにPricingにかかれてはいたのですが気づかず、Netlifyのサポートに問合せたことで判明しました。。結局初月はPro Planの19＄にくわえて、2人がデプロイしたので19 * 2で合計57$もかかってしまいました。

う〜ん。。。名前もNetflixに似てて紛らわしいし、金額面でも日本からのアクセスが大半という面でも、今の自分の需要にはあっていないな、と判断しました。

エックスサーバーへのデプロイに際してのつまづき

もともとこの企業HPは、最近の技術的学び等をブログ記事にして公開していきたいという思いもあったので、技術ブログも合わせて作成しています。

タグ別記事一覧・カテゴリ別記事一覧

この技術ブログの一覧ページでは、Query Paramtersでアクセスした内容に応じて、カテゴリでのフィルタリングとタグでのフィルタリングを実装していました。/blog?category="Mobile"でアクセスすれば、それでフィルタリングする感じです。

ただこの方法はSSR（サーバーサードレンダリング）であり、ユーザーのアクセスに応じてページがレンダリングされレスポンスするので、若干のタイムラグが発生します。また、事前にレンダリングしておくのがastroの一つの強みなので、そのメリットを消してしまうのも微妙だと気が付きました。

このSSRの仕組みに変更するには、astro.config.mjsにoutput: 'server'と指定します。

export default defineConfig({
  site: 'https://example.com',
  integrations: [mdx(), sitemap()],
  output: 'server' // <- これ
});

ただしこのままだと、全ページがSSRとなるので、事前にレンダリングしておいて問題ないページには、 export const prerender = true; という記述でプレレンダリングとします。

この設定方法でQuery Prametersによる表示内容の変更が機能していました。しかし、これをエックスサーバー上で機能させるには、調査の結果adaptorを自作する必要があることが判明し、そこまで労力はかけてられなかったので、結局Query Parameterを利用した仕組みは捨てて、公式チュートリアルに記載されている内容でタグ別の記事一覧、カテゴリ別の記事一覧を実装しなおしました。

Github Actionsを使用した自動デプロイ

エックスサーバーへの自動デプロイは特につまずくことなく簡単に実装ができました。

Github Actionsでmainにpushされたら、ビルドしビルドが完了したらFTPでアップロードという流れです。

  1. Github Actions用のコード作成

詳細説明は省きますが、/.github/workflows/deploy.ymlを作成し、以下のコードを記述します。（ファイル名はdeploy.ymlでなくても構いません）

  1. Github上でsecretsの設定

repoのSettingsタブ > Secrets and variables > Actions と進み、Secretsタブを選択して値を追加します。

name: Deploy website on push

on:
  push:
    branches:
      - main

jobs:
  deploy:
    name: Deploy
    runs-on: ubuntu-latest

    steps:
      - name: Get latest code
        uses: actions/checkout@v3

      - name: Use Node.js 20.9.0
        uses: actions/setup-node@v3
        with:
          node-version: "20.9.0"

      - name: Build Project
        run: |
          npm install
          npm run build

      - name: Sync files
        uses: SamKirkland/FTP-Deploy-Action@v4.3.4
        with:
          server: ${{ secrets.FTP_SERVER }}
          username: ${{ secrets.FTP_USERNAME }}
          password: ${{ secrets.FTP_PASSWORD }}
          local-dir: ./dist/
          server-dir: ${{ secrets.FTP_SERVER_DIR }}
          protocol: ftp

※ 各FTPのパラメータは、エックスサーバーのコンソールで確認可能。

おわりに

ということで、astroでこの自社HPを作成し直しました。最近は3Dデータを用いたiOS開発なども行っているので、学んだ知見を少しずつアウトプットしていこうと思います。名刺も作るぞ！