コーダーの僕がAstroのチュートリアル「初めてのAstroブログ」をやってみた。
この記事では難しいと思う箇所や大切そうな部分などを実際に作業しながら備忘録としてメモしていきます。
「Astroを触ってみたいけど難しそう」という方の後押しになれたら幸いです。
また、 Astroの更新が早いので公式のチュートリアルの解説は実際のコマンドを使用した結果や出力されるソースと少し違います(2025/1/9現在)。それで戸惑う方もいると思いますのでこの記事では、なるべく画像を多めにしています
もしもこの記事の情報が古くなっていたらコメント頂けると嬉しいです。
※ 記事が少し細かめです、必要に応じて読み飛ばしてください。
※ 間違いや古い情報などありましたらコメントして頂けると嬉しいです
Astroではこのように謳われており、実際に使ってみて難易度的にどのくらいなのかを検証・お伝えできればと思う。
チュートリアルは全６ユニットに分かれているようで、各ユニット内のチェックリストをクリアしていく形式になる。
今回はそのユニット1をやってみた備忘録になる。
事前準備と環境
HTML、Markdown、CSS、そして多少のJavaScriptについての基本的な知識があれば、まったく問題ありません！指示に従っていくだけで、すべてのチュートリアルを完了できます。Astroはすべての人のためにあるのです！🧑🚀 👩🚀 👨🚀
プロジェクトをウェブ上に公開するためには、GitHub（または類似のサービス）のアカウントが必要になります。
Githubのアカウントを使うので持っていない方は用意しておきましょう！
その他環境は次の通り
- WSL2
- VSCode(ターミナルもVSCode内)
- Node.js: v22.12.0(Astroを使う為には18.14.1以降が必要)
- Astro: 5.1.3
Node.jsのバージョン
バージョンの確認に関してはターミナルで次のコマンドで確認できます。
node -v
これでv18.14.1以上が表示されたらOKです。
もしもnodeが入っていない場合、またはバージョンが低い場合にはこの記事を参考にしてみてください。
ユニット1の最終目標: 初めてのAstroサイトの作成とデプロイ
ユニット１の内容としては５個のステップに分かれているようです。
最終目的としては、GitGubにコミットしたらNetlifyが自動でビルドしてサイトを公開することの様です。
このユニットでは、GitHubに保存され、Netlifyに接続された新しいプロジェクトの作成をおこないます。
コードを書いている途中で、変更を定期的にGitHubにコミットします。Netlifyは、GitHubリポジトリ内のファイルを使用してウェブサイトをビルドし、誰でも閲覧できる一意のアドレスでインターネット上に公開します。
GitHubに変更をコミットするたびに、Netlifyに通知が送信されます。すると、Netlifyは自動的にサイトを再ビルドし、変更を反映した上でサイトを再公開します。
プロジェクトの作成
コマンドで作成します。
WSLで作業をするときには「~(ホームディレクトリ)」の下にプロジェクトを作成しましょう。
理由はこちら↓
早速コマンドで作成していきます。
新しく作成するAstroプロジェクトは完全に空のディレクトリにしか作成できないので、新しく空のディレクトリを用意しておくと間違いないです。
作成するディレクトリにcdで移動して以下のコマンドを使用します。
npm crate astro@latest
コマンドを実行するとインストールするためにいくつかの質問されるので答えていきましょう
1. プロジェクトをどこに作成しますか？
今回は./first-tutorialとしました。
入力したらEnterで次に進みます
2. テンプレートを使用するか？
Astroでは様々なテンプレートが用意されています。
公式だけではなく公開している人も沢山いるので適したものがあったら見てみたり、勉強するのも良いかと思います。
今回はA basic, minimal starterを選択します。
3. 依存関係のファイルをインストールするか？
これはYesでいいです。
必要なものをあらかじめ入れてくれるので手間が省けます。
4. Gitリポジトリを初期化するか？
これも基本的にYesでいいと思います。
Gitを使ったことが無い人はこれを機に使ってみましょう！
5. インストール完了
質問が最後まで完了し、下のような出力がでたらインストールは完了です。
Enter your project directory using cd ./first-tutorial
メッセージにあるように先ほど指定したディレクトリが作られているのでlsやcdをして確認してみましょう。
VSCodeの準備とプロジェクトを開く
普段使っているお好きなエディターを使っていいですが、今回はVSCodeを使っていきます。
VSCode以外を使う方は、先ほど作成したプリジェクトを開いてこの章を読み飛ばしてください。
※ VSCodeの基本的な使い方は今回解説しません
こちらの記事などが参考になるかと思います。
プロジェクトを開く
まずはVSCodeで作成したプロジェクトを開いてください。
Astroのプロジェクトを初めて開くと推奨拡張機能をインストールするかどうかのポップが出ると思うのでインストールしましょう。
もしも出てこなかったりしても安心してください。拡張機能で「Astro」と検索すると一番上にでてくるのでこれを入れてあげてください。
このようにプロジェクトが開けていたらOKです
ターミナルを開く
作業中にいくつかコマンドを実行しますのでVSCodeのターミナルも開いておきましょう。
先程インストールするのに使っていたターミナルでも構いませんが、毎回開いたりするのが面倒になるのでVSCode側で開いておいた方が楽だと思います。
開き方は
上部のメニュー → ターミナル → 新しいターミナル
もしくは
Ctrl + Shift + @で開けます
画面の下にターミナルが出てきたら完了です。
この時、ターミナルは開かれているプロジェクトのディレクトリの場所を自動で開いてくれるので便利です。
devサーバーの起動とブラウザで確認
ターミナルで次のコマンドを実行します。
この時、インストールされたプロジェクトのルートで実行してください。
私の場合、first-tutorialディレクトリです。
※VSCodeの場合には先ほどの手順で開いた場所のままで大丈夫です。
npm run dev
コマンドを入力し正常に実行されると
のようになると思います。
ここに記載されている「Local」という箇所に書いてあるリンクをブラウザ入力して開いてみましょう。
※VSCodeの場合、このリンクをCtrl + クリックで開けます。
私の場合はhttp://localhost:4321/でした。
Astroはポート4321が使用可能の場合にはこれを使用し、既に使われている場合には別のポート番号が割り振られます。
この番号が違っても問題ないので気にしないで進みましょう。
このような画面が開けたら無事完了です。
このnpm run devで実行されている間は、現在開いているターミナルでは他のことは出来ず、Astroのログやメッセージが表示されます。
別な事をしたい時には、別のターミナルウィンドウを開くか、Ctrl + cを押してdevサーバーを停止してください。
また作業中に勝手にdevサーバーが停止することもあります。その時には何も気にせず再度npm run devをしてみましょう。
Welcomeページを編集してみる
手始めに先ほど開いた画面の文言を変えてみます。
結論から言うと、この部分のファイルはsrc/components/welcome.astroになります。
まずは変えてみましょう。
ファイルを開くと次のようになっていると思います。
この14行目の文言を変えて保存してみましょう。
ファイルを編集する際の注意点です！
1～4行目の
---
import astroLogo from '../assets/astro.svg';
import background from '../assets/background.svg';
---
この部分は触らないように注意しましょう！
この---の間はコードフェンスと呼ばれ、とても大切な部分なので消したりしないようにしてください。
試しにこのように1行追加してみました。
先程、npm run devをしていて、そのままの状態でしたら変更を保存した瞬間に即時ブラウザにも反映されていると思います。
もしも反映されない・表示されない方は、ターミナルで
このようになっているか確認してみましょう。
なっていなかったらdevサーバーが停止していると思うので、npm run devを再度実行してdevサーバーを起動してみてください。
GitHubに保存する
この記事では長くなってしまうのでGitHubの使い方やリポジトリにプッシュする方法は解説しません。
VSCodeのGitの機能や、SorceTree、ターミナルを使って現在のプロジェクトをGitHubにプッシュしてください。
VSCodeの場合はこちらの記事のGitの部分を参考にしてください。
GitHubの使い方
Sourcetreeの使い方
今回私はastro-first-tutorialというリポジトリを作成しました。
リポジトリはこちら
Netlifyの準備を用意する
Netlifyアカウントを用意してください。
アカウントがない方はこちらから作成できます(無料)
いくつかのアカウント登録方法が用意されているのでお好きな方法で登録してください。
登録自体はいくつかの質問に答えるだけでできます！
英語での表示がされていますが、簡単な質問で難しいことはないので、翻訳をかけたり目的や自分に合っていそうな英単語を選択するだけでいけます。
サイトを作成(公開)する
ダッシュボードを開くと「Import an Existing project」という項目があるのでクリックします。
ここから3つのステップで公開まで進みます。
GitHubとの連携をする
まずはGitHubのリンクがあるので選択してリポジトリの連携を開始します。
ここからは色々な認証が入りますので、それぞれ必要情報を入力して連携をしてください。
リポジトリの選択をする
認証などのステップが完了したらリポジトリの選択画面に移動します。
先程作成したリポジトリを選択します。
選択が完了したら「Install」をクリックしましょう。
デプロイするプロジェクトを選ぶように指示されますので指示に従っていきましょう。
表示されているプロジェクトをクリックします。
デプロイの設定を行う
ここから設定を行っていきます。
「Site name」で指定する内容は公開するURLになるので任意の物を設定してください。
重複していたら使用できないので、入力後「Check availability」をクリックして「Site name is available」が表示されていたら使用できます。
ビルドの設定を行う
ここは基本的にそのままでいいです。
リポジトリに複数のブランチが存在する場合には一番上で公開するブランチ名を選択してください。
Astroのデフォルトのままだと「main」ブランチになっていると思います。
私は今回「development」どいうブランチになっています。
最後に「Deploy curacao-astro-first-tutorial」をクリックしてください。
Add environment variablesとあるので、環境変数もここで設定できるのかな？
本番用で何か分けるkeyとかがあるならここで設定できたのかなと思います。
デプロイ完了
画面が遷移し少し待っていると「Deploy success!」というモーダルがでてきます。
ここで「View site deploy」をクリックか、先ほど設定したURLを開くことで画面を確認することができます。
これでdeployは完了です！
チュートリアルのユニット1終了！
これでユニット1のチュートリアルは完了になります！
新規でプロジェクトを作って何とかデプロイまでたどりつけました。
ここまでやってみた感想をまとめてみます。
ユニット1をやってみた感じ
- 公式のチュートリアルが日本語化されているのはわかりやすくよかった
- 実際の挙動と公式のチュートリアルのドキュメントに差があったので、ここは慣れていないと戸惑う人もいそうと思った
- Netlifyに関しては英語なので抵抗感がある人は多いかもしれないが、直感で操作はできた
- Netlifyの最近の記事がないのでとっつきにくさは感じた
- GitHubやサーバーのデプロイは慣れていないと抵抗感や苦手意識はあると思うが、これは今回のAstro自体が使えるか？とはまた別の話なので無視するが、実際問題はそっち側で躓く人の方が多いと思った
- Astro自体は簡単に使い始めることができた、これからどうなっているか楽しみ
- 今回はコーダーでもできるか？というメインの検証があったが、結論としては「今のところできそう」というのが正直な所
- ビルドだったりローカルとサーバの環境による設定の違いが今後どうなっていくのかが気になる(Laravelとかで痛い目見たことがあるので...)
総括
今のところコーダーでもできそう！
躓くかな？と思う部分は、GitHubだったりNetlifyなどAstro以外の事がほとんどだったので、そこは一旦乗り越えてしまえば今のところ大丈夫そう。
といってもAstroほとんど触れてないので、次のチュートリアルでどうなるかという感じ。
終わりに
次はユニット2を進めていきます！
ユニット2ではページの追加やスタイルを変えたりするみたいです。
実際に変更したものをどうやってサイトに反映させるかなど気になるところ。
長くなりましたが、ここまでお付き合いいただきありがとうございました。
この記事が誰かの役に立てると幸いです。