324 文字
2 分
Astro入門①
2024-08-23

Astro入門①静的サイトをつくろう#

超簡単です 誰でも数分でできます

1. git, Node.js, pnpmをインストール#

1-1. git#

https://gitforwindows.org/
ここからDLしてインスコしてください
選択肢とかチェックは全部デフォでOK

1-2. Node.js#

https://nodejs.org/en/
ここからDLしてインスコしてください
選択肢とかチェック(略)

1-3. pnpm(必須では ない)#

ターミナル開いて下記コードをコピペしてEnter

npm install -g pnpm

2. Astroの構築#

2-1. 一から作る#

一から作る場合はnpm createでプロジェクトフォルダ作ればいいです
参考: https://docs.astro.build/ja/install-and-setup/

npm create astro@latest

2-2. テーマファイルを使う#

テーマファイルを使うなら各テーマの指示に従ってください
基本はGitHubからcloneしてnpm iするだけじゃないかな
このサイトで使ってる『fuwari』ってテーマもそう

saicaca
/
fuwari
Waiting for api.github.com...
00K
0K
0K
Waiting...
git clone https://github.com/saicaca/fuwari.git ./fuwari
cd ./fuwari
pnpm install
pnpm add sharp

3. ローカルで動作確認#

cd プロジェクトフォルダのパス(ex: fuwari)
npm run dev

ローカルサーバー(おそらくデフォルトは”localhost:4321”)へアクセスして、サイトが表示されてればOK

4. 好きにサイトをいじる#

好きにしてください

TIP

src/content/に各ページをmdで書いてつくるよ
著者情報とかはsrc/config.tsをいじればいいよ

5. ビルド#

プロジェクトフォルダ/dist/以下にファイルが出力されます

npm run build

6. アップロード#

FTPとかでレンタルサーバーとかに上げてください

以 上