💭

Astroチュートリアルメモその1【新規プロジェクト作成】

2022/11/02に公開

Astro

tech

Astroのチュートリアルを試しているのでそのメモ。

エディタはVSCodeを使用。

インストールなどはnpm。

Node.jsが必要

Node.jsが必要なのでインストール。

JavaScriptを使う人はだいたい入ってるはず。必要なバージョンはチュートリアルのテキストに記載されているのでそれを確認。多分その時々で変わるはず。

Node.jsのバージョン確認は以下。

node -v

Astroの新規プロジェクトを作成

npmでAstroの新規プロジェクトを作成

npm create astro@latest

コマンドを打つと色々聞かれる。

プロジェクトのフォルダを作成

新しいプロジェクトはどこに作るのか聞かれる。

? Where would you like to create your new project? » ./tutorial

チュートリアル通りに./tutorialを入力。

使うテンプレートを選択

? How would you like to setup your new project? » - Use arrow-keys. Return to submit.
    a few best practices (recommended)
    a personal website starter kit
>   an empty project

チュートリアル通りにemptyを選択する。

依存関係のインストール

? Would you like to install npm dependencies? (recommended) » (Y/n)

依存関係のインストール。チュートリアル通りにY。

gitの初期化

? Would you like to initialize a new git repository? (optional) » (Y/n)

gitを初期化するか聞かれる。チュートリアル通りにY。

TypeScriptオプションの選択

? How would you like to setup TypeScript? » - Use arrow-keys. Return to submit.
    Strict
    Strictest
>   Relaxed
    Help me choose

TypeScriptのオプションを聞かれる。

チュートリアルだとRelaxedを選択。

TypeScriptできっちり書くならStrictで良いと思う。チュートリアルは進行通りに勧めるためRelaxedを選択している。

インストール後のコマンドなど

  next   Liftoff confirmed. Explore your project!

         Enter your project directory using cd ./tutorial 
         Run npm run dev to start the dev server. CTRL+C to stop.
         Add frameworks like react or tailwind using astro add.

         Stuck? Join us at https://astro.build/chat

+—————+  Houston:
| ^ u ^  Good luck out there, astronaut!
+—————+

ディレクトリを移動してnpm run devで開発サーバーが立ち上がる。

終了はターミナルでctrl + C。

この辺りの操作はNext.jsと同じ。開発サーバーがデフォルトでローカルホスト3000なのも同じ。

チュートリアルのブログ作成はなんとなくNext.jsで作るプログに似てる。かなり参考にしているような印象。

既存のトップページを触る

tutorial/src/pages/index.astroがトップページになる。

pages配下にファイルを作るとルーティングされるのもNext.jsに似てる。

このトップページをちょっといじって表示が変わるのを確認する。

以下がデフォルトのindex.astro。

---
---

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" type ="image/svg+xml" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width" />
    <meta name="generator" content = {Astro.generator} >
    <title>Astro</title>
  </head>
  <body>
    <h1>Astro</h1>
  </body>
</html>

---の中にJavaScript文を書けたりする。{}で囲むことでhtml部分にJavaScript部分で定義した配列とかを使える。

チュートリアルでは、h1タグ部分を「My Astro Site」に変更して保存することになる。

開発サーバーを起動していると、ホットリロードでページが変わる。

Githubに登録してNetlifyに

チュートリアル通りにすすめるのならば、GitHubにリポジトリを作る。

普通に新規プロジェクトを作ればOK。チュートリアルではNetlifyを使うことになっているので、その準備でもある。

本番環境にアップする必要がない人はこの辺りは無視で良い。