【サイト公開】自作のHTMLファイルのアップロード方法をわかりやすく解説

• 自分でHTMLファイルを作ったけどどうやってサイト公開するかわからない
• 自分で作ったサイトをサーバーにアップロードしたい！
• 正しい方法でサイト公開したことなくて悩んでる

今回はこういった疑問について解説していきます。

想定読者は上記の人たちを想定しています。筆者が当時プログラミング（特にHTML,CSS）を学んだばかりで自作のサイトを公開する方法を知りませんでした。そのためやり方がわからない気持ちがとてもわかります。そ雨した同じ悩みを持った人に向けてこの記事は書かれています。

この記事を読んで自作のオリジナルをサクッと公開していきましょう。

最初に用意するもの

オリジナルサイトを公開するには以下2つが必要です。

• HTMLファイル
• FTPソフト

FTPソフトは基本的には無料で公開されているもので十分機能が備わっているのでそちらを使っていきます。今回はFile Zillaを使います。

簡単にいうと、ローカルな環境からサイトを公開する時に使う繋ぎ役のようなものです。サイト公開する時はこのFTPソフトを介して公開する必要があります。

具体的な手順

ダウンロードが完了したら解凍して早速起動していきます。

• 起動したら左上のホストをクリック

  




• 「新しいサイト」「名前入力」と進む

  




• ホスト名・ユーザー名・パスワードを入力

  

この時それぞれの名前を確認するにはサーバーを開いて確認する。
今回は、エックスサーバーの場合で確認してみます。

サーバーの契約方法はこちらの記事で解説してます

参考



【完全初心者向け】ブログの始め方から収益化や拡散する方法までを解説

続きを見る

• サーバー管理画面を開く

  




• サブFTPアカウント設定をクリック

  




• ドメイン選択する

  




• FTPソフト設定をクリック

  




• ここでそれぞれの名前を確認します。

  

ここでパスワードは「サーバーパスワードと同じ」とあるのでサーバーパスワードを使います。

サーバーパスワードがわからない人は、サーバー契約時に届いたメールから確認します。

メールボックスで「エックスサーバー　設定完了」とメール検索をして該当のメールを探します。

• メール内のログイン情報にパスワードが記載されている

  




• 無事・ホスト名・ユーザー名・パスワードが入力できたら接続する

  




• 上のターミナル上で接続成功の表示を確認する。

  




• 右下の画面から「public_html」を選択

  




• public_html内に自作のファイルを格納して、転送成功が確認できたら完了！

  




• サーバー管理画面の「ファイルマネージャー」からも格納されているかが確認できる。

  

以上が、自作のファイルを公開するまでの手順になります。

この流れでサイトが公開できます。

公開する際に気をつけること

ファイルの階層を気をつけながらアップロードする

FTPソフトに接続し、「public_html」内にファイルを格納する際、ファイル内にそのままドラッグ&ドロップをしてしまうとファイルの階層が合わずサイトが公開されない可能性があります。

例）公開予定のファイルがまとまったフォルダがあった時（フォルダ名を「original_site」だとする）

public_htmlの直下は必ず「index.html」がないといけないので、public_htmlの下が「original_site」だと、階層が一つずれてしまいます。

この時

1. public_htmlを開く
2. original_site内で構成されているフォルダやファイルを事前にpublic_html上に用意しておく
3. その中に1つずつoriginal_site内のファイルを格納していく

階層で言うと「public_html」と「original_site」はイコールになるので、階層がずれないように注意して格納しましょう。FTPソフトないでフォルダなどを作成する際は右クリックから「フォルダを作成」で作ることができます。

サーバーのファイル管理からだとアップロードできない

今回、FTPソフト→ファイルアップロード→サイト公開

と言う手順を解説しました。ファイルのアップロードは必ずFTPソフトを介してでないとネット上に公開できないので、くれぐれもファイルマネージャーから直接アップロードしないようにしてください。

（筆者は以前始めからエックスサーバーのファイルマネージャーから自作サイトのファイルをアップロードしようとしてネット上に公開されずに悩んでいたことがありました。。。）

まとめ

これで自分で作ったサイトを無事ネット上に公開することができました。

今回は以上になります。ありがとうございました。