プロジェクトを作成する
公式ドキュメントを参考にプロジェクトを作成します。
❯ npm create astro@latest
Need to install the following packages:
create-astro@4.13.2
Ok to proceed? (y) y
> npx
> create-astro
astro Launch sequence initiated.
dir Where should we create your new project?
./demo-200stack-astro
tmpl How would you like to start your new project?
A basic, helpful starter project
deps Install dependencies?
Yes
git Initialize a new git repository?
Yes
✔ Project initialized!
■ Template copied
■ Dependencies installed
■ Git initialized
next Liftoff confirmed. Explore your project!
Enter your project directory using cd ./demo-200stack-astro
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:
│ ◠ ◡ ◠ Good luck out there, astronaut! 🚀
╰─────╯
Houstonが可愛い。
404ページを作る
デモのために404ページを作る。
---
import Layout from '../layouts/Layout.astro';
---
<Layout>
<section style="text-align: center; padding: 4rem 1rem;">
<h1>404 - ページが見つかりません</h1>
<p>指定されたURLのページは存在しないか、移動された可能性があります。</p>
<a href="/" style="display: inline-block; margin-top: 1.5rem; text-decoration: underline;">
トップページに戻る
</a>
</section>
</Layout>200stack向けの設定をする
astroはデフォルトで静的出力をするので、設定を変えなくても良いですが一応静的出力の設定をします。
// @ts-check
import { defineConfig } from 'astro/config';
// https://astro.build/config
export default defineConfig({
output: 'static', // 一応明示的に指定しておく
})routing-config.jsonc
200stack用のルーティングファイルを設置して、ページが存在しない場合は404ページを表示するようにします。
{
"version": "1",
"rules": [
],
"notFound": {
"destination": "/404.html",
"status": 404,
"htmlOnly": true,
"enabled": true
}
}ここまでで最低限の設定が完了です。この状態で200stackにデプロイします。
これが作成したコードのGitリポジトリです。