Astroの src/pages/ ディレクトリにLP用の .astro ファイルを作成し、そこに既存のコードとアセットを組み込む方法が最もシンプルです。
すでに作成したLPを、開発中のAstroサイト内で特定のURL（例: /lp）で表示したい、でも他のAstroページとはスタイルやスクリプトを完全に分けたい、という場合の移行手順を紹介します。
AstroにLPを移行する手順
ランディングページの作成は自分でコーディングするとかなり手間がかかるため、テンプレートを活用することで効率よく制作できます。
様々なテンプレートが配布されていますが、自分でカスタマイズしてパターンを量産できるLP-UIKITがおすすめです。
-> LP-UIKIT 量産できるランディングページテンプレート
1.Astroページファイルを作成する (src/pages/lp.astro など)
src/pages/ ディレクトリ内に、LPを表示するための新しい .astro ファイルを作成します。ファイル名がそのままURLパスになります。
- 例:
/landing-pageで表示したいならsrc/pages/landing-page.astroを作成。 - 例:
/campaignで表示したいならsrc/pages/campaign.astroを作成。
このファイルには、レイアウトコンポーネント (<BaseLayout> など) を適用しません。LP独自のHTML構造をそのまま使うためです。
2.HTMLコンテンツをコピーする
作成した .astro ファイル（例: src/pages/landing-page.astro）を開きます。
既存のLPの HTMLファイルの内容すべて (<!DOCTYPE html>, <html>, <head>, <body> タグ全体）をコピーし、.astro ファイルの --- コードフェンスの下 にそのまま貼り付けます。
---
// このファイルはLP用なので、Astroのレイアウトは使いません。
// フロントマターは空、または必要なメタデータ定義のみ記述します。
// 例: export const prerender = true; (静的生成する場合)
---
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LPのタイトル</title>
{/* CSSのリンクなどは後で修正します */}
{/* <link rel="stylesheet" href="css/lp-style.css"> */}
</head>
<body>
{/* ... ここに既存LPのbody内の全コンテンツ ... */}
{/* JSのリンクなども後で修正します */}
{/* <script src="js/lp-script.js"></script> */}
</body>
</html>
3.アセットファイル (CSS, JS, 画像) を public/ に配置する
LPで使用しているCSSファイル、JavaScriptファイル、画像ファイル、フォントファイルなどを、Astroプロジェクトの public/ ディレクトリ にコピーします。
public/ 内にLP専用のフォルダを作ると管理しやすいでしょう。
- 例:
public/lp-assets/css/,public/lp-assets/js/,public/lp-assets/images/
your-project/
├── public/
│ └── lp-assets/ <-- LP用アセットフォルダ (例)
│ ├── css/
│ │ └── style.css
│ ├── js/
│ │ └── script.js
│ └── images/
│ └── logo.png
│ └── hero-bg.jpg
├── src/
│ └── pages/
│ └── landing-page.astro <-- ステップ1で作成
└── ...
4.CSSのリンクを修正する
.astro ファイルに貼り付けたHTML内の <link rel="stylesheet" ...> タグの href 属性を修正します。
public/ ディレクトリに配置したCSSファイルへのパスを、必ず / から始まるルート相対パス で指定します。
<head>
{/* ... */}
<title>LPのタイトル</title>
{/* 修正例 */}
<link rel="stylesheet" href="/lp-assets/css/style.css">
</head>
(注意: もしCSSがHTML内の <style> タグに書かれていた場合は、そのままでもOKです。Astroのスコープ機能により、他のページには影響しません)
5.JavaScriptのリンクを修正する
同様に、HTML内の <script src="..."></script> タグの src 属性も修正します。
public/ ディレクトリに配置したJSファイルへのパスを、必ず / から始まるルート相対パス で指定します。
<body>
{/* ... LPのコンテンツ ... */}
{/* 修正例 (通常はbody終了タグ直前) */}
<script src="/lp-assets/js/script.js"></script>
</body>
6.画像やアセットのパスを修正する
HTML内の <img> タグの src 属性や、CSS内の background-image: url(...) などで画像やフォントを参照している箇所もすべて修正します。
これらも 必ず / から始まるルート相対パス で、public/ ディレクトリ内のファイルパスを指定します。
<img src="/lp-assets/images/logo.png" alt="ロゴ">
/* CSS内の画像パス修正例 */
.hero {
background-image: url('/lp-assets/images/hero-bg.jpg');
}
7.【重要】JavaScriptイベントハンドラの確認・修正
もし既存LPのHTML内に onclick="myFunction()" や <button onclick="..."> のような形でJavaScriptのイベントハンドラが直接書かれていた場合、それらはAstroのテンプレート内では そのままでは動作しません。
修正方法:
- LP用のJavaScriptファイル（例:
public/lp-assets/js/script.js）を開きます。 - そのJSファイル内で、
document.getElementById(...)やdocument.querySelector(...)を使ってボタンなどの要素を取得します。 - 取得した要素に対して
addEventListener('click', myFunction)のように、イベントリスナーを登録するコードを記述します。
この修正を行わないと、LP内のボタンなどがクリックしても反応しなくなります。
エラー「Please add the "is:inline" directive」
[vite] Internal server error:
<script src="/lp-assets/js/script.js"> references an asset in the "public/" directory. Please add the "is:inline" directive to keep this asset from being bundled.
Javascriptをバンドルさせず、このままHTML出力したいので以下のように修正します。
<body>
{/* ... LPのコンテンツ ... */}
{/* 修正前: */}
{/* <script src="/lp-assets/js/script.js"></script> */}
{/* 修正後: is:inline を追加 */}
<script src="/lp-assets/js/script.js" is:inline></script>
</body>
開発サーバーでの確認
- 開発サーバーを起動 (
npm run devなど) して、作成したLPのURL（例:http://localhost:4321/landing-page）にアクセスします。 - レイアウト、スタイル、画像が正しく表示されているか確認してください。
- ボタンのクリックなど、JavaScriptが関わる機能が意図通りに動作するかを 必ず確認 してください。
他のAstroページ（ブログ記事など）を開き、LPのスタイルやスクリプトが悪影響を与えていないかも念のため確認しましょう（public/ に配置し、パスを正しく設定していれば通常は大丈夫です）。