AIで作ったHTMLをサーバーへ公開・更新する手順

ロリポップで初めて公開する方へ

サーバー契約、番号付きの接続設定、公開フォルダ、MySQLの設定まで、全8章で説明します。
全8章の目次 →　画像で接続設定を照合 →

この手順が対象にするホームページ

対象は、手元にHTML・CSS・画像があり、レンタルサーバーへファイルを転送して公開するサイトです。FTPソフトと、サーバー契約先から発行された接続情報を用意します。

AIからReactなどのソースコードだけを受け取った場合、公開用ファイルの生成（ビルド）が必要なことがあります。PHP、ログイン、データベースを使う場合も、この手順だけでは公開が完了しません。まず、何を公開用ファイルとして受け取ったか確認してください。

まず、パソコン内に公開用フォルダを作ります。説明用の例では、次の3ファイルを使います。実際の名前は自分のサイトに合わせて読み替えてください。

site/
  index.html       ← ページの本文
  styles.css       ← 色や配置
  images/
    shop.jpg       ← ページに使う写真

HTMLが images/shop.jpg を参照しているなら、サーバーでも同じ位置関係を保ちます。画像だけ別の場所へ送ると表示できません。

AIへ確認するときの伝え方

「このサイトをレンタルサーバーに公開します。転送する完成ファイルと、作業用ファイルを分けて説明してください。ビルドやサーバー側の設定が必要なら、その作業も教えてください。」

AIには接続パスワードや秘密鍵を渡さず、実際のサーバー設定は契約先の案内で確認します。

かんたん日本語FTPで接続先を登録します。次の値は推測せず、レンタルサーバーの管理画面や公式マニュアルから確認します。

項目	確認する内容
方式・ホスト名・ポート	FTP / FTPS / SFTPの指定、接続用サーバー名、ポート番号。FTPSとSFTPは別の方式です。
ユーザー名・認証情報	契約先から発行された情報。サービスのログイン情報とは異なる場合があります。
公開フォルダ	対象ドメインに対応する場所。名称は契約先により異なります。
公開URL	転送後にブラウザで開くURL。接続用のホスト名と同じとは限りません。

複数サイトがある場合は、接続先名にドメインと用途を入れます。接続後は右側のフォルダを開き、対象ドメインの公開先であることを確かめます。既存サイトを更新する場合は、先にサーバー側の対象ファイルをバックアップしてください。

暗号化されないFTPより、契約先が対応するFTPSまたはSFTPを使えるか確認します。

左側で公開用フォルダを開き、右側で公開先を開きます。上の例なら index.html、styles.css、images フォルダを、位置関係を保って転送します。

よくある一段ずれ

公開先に site フォルダごと入れると、トップページではなく /site/ の下に置かれます。ドメインのトップで表示したい場合は、指定された公開先へ中身を置きます。

上書き確認が出たら、同名ファイルを置き換えてよいか確かめます。知らないファイルを一括削除して場所を空ける必要はありません。

変更内容	送り直すもの	公開後の確認
営業時間を10時から11時へ変更	その文章を含むHTML	新しい時間になっているか。ほかの掲載箇所も残っていないか。
写真を同じ名前で差し替え	新しい画像ファイル	古い写真がキャッシュで残っていないか。
写真の名前も変更	新しい画像と参照先を直したHTML	HTMLの名前と実ファイル名が一致しているか。
文字の色や配置を変更	変更したCSS。構造も変えた場合はHTMLも	別のページにも意図しない影響がないか。

更新前の版は残しておきます。公開後に問題が出たら、変更したファイルを確認し、必要に応じて保存しておいた版へ戻します。画像やCSSを変えると、同じファイルを使う別ページにも反映されます。

症状	最初に見るところ	次にすること
トップページが出ない	対象ドメインの公開フォルダとindex.htmlの位置	接続成功だけで判断せず、管理画面の公開先と照合する。
文字だけで画像・デザインが出ない	画像とCSSの転送漏れ、パス、大文字・小文字	HTMLの参照先と、サーバー側の実ファイルを比べる。
古い内容のまま	送ったファイルの場所・内容とブラウザのキャッシュ	正しい版を送ったか確認したうえで再読み込みする。
接続に失敗する	方式、ホスト名、ポート、認証情報	契約先の公式情報と照合。サーバー側の接続制限も確認する。
エラー画面が出る	表示されたエラーと直前の変更	追加の転送を止め、設定・プログラムの問題か切り分ける。

問い合わせには、使用したソフトの版、操作、エラー文を添えると状況が伝わります。パスワードや秘密鍵は送らないでください。