Zenn
🌐

Claude.aiのArtifactsで作成したWebサイトをNetlifyで一般公開する

2024/08/09に公開
Netlify
artifacts
Claude
tech

この記事では、Claude.aiのArtifactsを使って作成したアプリやポートフォリオサイトを世界に公開する方法をご紹介します。プログラミング経験がなくても簡単に実行できる手順なので、数分で公開プロセスを完了することができます。

Netlifyとは？

Netlifyは、ウェブサイトを簡単に公開できるサービスです。プログラミングの知識がなくても、ドラッグ＆ドロップでファイルをアップロードするだけで、誰でも無料でウェブサイトを世界中に公開できます。複雑な設定は不要で、初心者でも数分で自分のサイトを立ち上げられるのが特徴です。また、無料プランがあるため、個人のブログや小規模なプロジェクトを始めるのに最適です。

前提条件

  • Claudeで作成した単一のHTMLファイル
  • Netlifyアカウント（まだ持っていない場合は、この手順で作成します）

手順

1. ClaudeのArtifactsからHTMLをローカルに保存

  1. Claudeとの対話でHTMLのArtifactを作成します。
    この際、単一のHTMLファイルを出力するよう指示します。

  2. Artifactのコードをコピーします。

  3. ローカルのテキストエディタ（メモ帳やVisual Studio Codeなど）を開きます。

  4. コピーした内容を貼り付け、ファイル名をindex.htmlとして保存します。

  5. フォルダを新規作成し、index.htmlをフォルダ内に移動します。

注意点：

  • Claudeには単一のHTMLファイルを出力するよう指示してください。Reactコンポーネントではなく、通常のHTML、CSS、JavaScriptを含む完全なWebページを生成するよう依頼します。
  • 必要なスタイルやスクリプトはすべてHTMLファイル内に含めるよう指示します。外部ファイルへの参照は避けてください。

index.htmlをダブルクリックして、サイトが正常に表示されればOK

2. Netlifyアカウントの作成

  1. Netlifyにアクセスします。
  2. 右上の「Sign up」をクリックします。
  3. お好みの方法（メールアドレス、GitHub、GitLab、Bitbucketなど）でサインアップします。
  4. 必要な情報を入力し、アカウントを作成します。

3. サイトの手動デプロイ

  1. Netlifyダッシュボードにログインします。

  2. 「Sites」タブを選択します。

  3. 「Add new site」→「Deploy manually」を選択します。

  4. 指定されたエリアにローカルに保存したHTMLファイル（index.html）を含んだフォルダをドラッグアンドドロップします。

    注意： HTMLファイルではなく、HTMLファイル（index.html）を含んだフォルダをアップロードすることに注意してください。

  5. ファイルのアップロードが完了するまで待ちます。

  6. デプロイが完了すると、自動生成されたURLが表示されます（例：https://random-words-123.netlify.app）。

  7. 「Open production deploy」をクリックすると、サイトが開きます。


    これでサイトの公開は完了です！

4. サイト名（URLの一部）を変更したい場合（オプション）

サイト名を変更すると、自動生成されたURLの一部（https://●●●.netlify.appの●●●の部分）を変更できます。

  1. Netlifyダッシュボードで、該当するサイトを選択します。
  2. 「Site configration」をクリックします。
  3. 「General > Site details」セクションにある「Change site name」をクリックします。
  4. 新しいサイト名を入力し、「Save」をクリックします。

例：サイト名を「my-portfolio」に変更すると、URLは https://my-portfolio.netlify.app になります。

注意：サイト名は一意である必要があり、既に使用されている名前は選択できません。

5. カスタムドメインの設定（オプション）

自分のドメインを持っている場合は、独自ドメインを設定することもできます。

  1. 「Domain management」セクションに移動します。
  2. 「Add a domain」をクリックします。
  3. 使用したいドメイン名を入力し、「Verify」をクリックします。
  4. 画面の指示に従って、DNSレコードを設定します。

サイト内容の更新方法

サイトの内容を更新したい場合は、以下の手順を行います：

  1. HTMLファイルを更新します。
  2. Netlifyダッシュボードの「Sites」タブから該当するサイトを選択します。
  3. 「Deploys」タブをクリックします。
  4. 「Drag and drop your site folder here」エリアに、更新したHTMLファイルを含んだフォルダをドラッグアンドドロップします。

    これで、自動的に新しいバージョンがデプロイされます。

トラブルシューティング

ウェブサイトの公開に問題が発生した場合、以下の点を確認してください：

  1. ファイル名の確認
    • ファイル名が正確に index.html となっているか確認してください（大文字小文字を区別）。
  2. HTMLの構造確認
    • ファイルの先頭に <!DOCTYPE html> があることを確認してください。
    • <html>、<head>、<body> タグが正しく配置されているか確認してください。

まとめ

以上の手順で、Claudeで作成した単一のHTMLファイルで構成されるウェブサイトを、Netlifyを使って手動でデプロイすることができます。この方法を使えば、GitHubリポジトリを作成することなく、直接ファイルをアップロードして素早くウェブサイトを公開できます。

Discussion