HTMLファイルをサーバーにアップロードする方法

HTMLファイルをサーバーにアップロードする方法

HTMLファイルをサーバーにアップロードする場合には、ローカルに保存しているHTMLファイルを、FTPソフトを使用してサーバーに転送することでアップロードすることができます。アップロードが成功するとブラウザにWebページとして表示できます。

FTPを準備してサーバーを接続、そしてHTMLファイルをローカルフォルダからサーバーへアップロードするまでの方法をまとめました。

初めてファイルをサーバーにアップロードする方や、サーバーにファイルをアップロードするやり方の復習をしたい方がいましたら読み進めてみてください。

 

HTMLファイルをサーバーにアップロードする準備

 

HTMLファイルを保存しているPCのローカルフォルダからサーバーへファイルをアップロードできるように準備します。

 

準備するのはFTPソフトです。

 

FTPソフトを準備してPCで使用可能にすると、ローカルフォルダとアップロードするWebサーバーのフォルダの両方を、FTPの画面一つでファイル移動ができるようになるため、サーバーへアップロードがやりやすいです。

またHTMLファイルだけに限らず、ホームページをWeb表示するためのファイル構成に必要な画像ファイル、CSSファイルなどもFTPソフトを準備しておくと、ローカルからサーバーへのアップロードが可能になります。

FTPソフトは「FileZilla」というFTPソフトをインストールしてHTMLファイルをサーバーにアップロードするのが私としてはおすすめです。

 

 

上記のFileZillaをインストールする方法の記事でFTPソフト「FileZilla」のダウンロードとインストール方法を説明しています。HTMLファイルをサーバーにアップロードする準備をするための参考にしてください。

 

HTMLファイルをFTPで表示

 

ファイルをサーバーにアップロードするためにインストールしたFTPソフトを開くと、PC内のフォルダ構造がFTPで以下の画像のように表示します。画像で使用しているFTPはFileZillaです。

 

 

ローカルフォルダ(PC内のフォルダ)の階層がFTP画面の左側のパネルに表示します。

サーバーにアップロードするHTMLファイルを表示するには、アップロードするHTMLファイルを保管しているフォルダをクリックして選択します。すると下段のパネルで、選択したフォルダに入っているHTMLファイルが表示します。

 

Advertisement

 

このとき表示したFTPの表示状態は、まだPC内に保存しているローカルファイルだけです。今回の場合ならサーバーにアップロードする前のHTMLファイルを、ローカルフォルダで表示できるだけです。

HTMLファイルをサーバーにアップロード可能にするためにFTPでサーバー接続します。

 

サーバーにアップロードするためのFTP接続

 

ファイルをサーバーにアップロードするためにFTPを接続します。

FTP接続をするやり方はFileZillaを例にして説明します。

 

 

FileZillaを開いた画面の左上には、上記の画像のようにサーバーの接続設定ができるアイコンがあります。アイコンをクリックするとサイトマネージャーが開きます。

開いたサイトマネージャーの画面では「新しいサイト」のボタンをクリックします。「新規サイト」の項目があるのでサイト名を入力します。

次に「一般」で以下の5つの入力項目を設定します。

 

  • 「ホスト」にホスト名
  • 「ユーザー」にユーザー名
  • 「パスワード」にサーバーのパスワード
  • 「暗号化」は「明示的なFTP over TLSが必要」にします。
  • 「ログオンタイプ」は「通常」にします。

 

 

「ホスト」「ユーザー名」「パスワード」については、これからHTMLファイルをアップロードしたいFTP設定のアカウントを、それぞれ使用しているレンタルサーバーで確認して入力します。

入力後に「接続」をクリックするとサーバーのフォルダ階層が表示されます。

もう少し詳しい説明はエックスサーバーを例にしている以下の記事を参考に設定してください。

 

 

HTMLファイルをサーバーにアップロードする

 

FTPでサーバーとの接続ができると、あとはローカルのHTMLファイルをサーバーに転送するアップロード操作をしていきます。

例として簡単に作成した確認用のHTMLファイルをサーバーにアップロードしながら説明します。

 

HTMLファイルをFTPでアップロード

 

はじめにFTPの画面左側のローカルサイトのパネルでHTMLファイルを保管しているローカルフォルダを選択して表示します。

 

 

フォルダを探しずらい場合は、上の画像のようにサイトマネージャーの「詳細」タブでファイルを参照して開くと早いです。

 

 

選択したフォルダ内のファイルはFTPのローカル側の下段パネルに表示するので、サーバーにアップロードするHMTLファイルをクリックで選択しておきます。選択すると背景が青くなります。

 

Advertisement

 

次にサーバー側の右パネル操作です。HTMLファイルをアップロードするサーバー内のフォルダの場所を表示させます。

ファイルをアップロードするサーバーのフォルダの場所はドキュメントルートと呼ばれるフォルダで、ホームページを公開するために必要なファイルを保存しておく場所です。ドキュメントルートは使用しているレンタルサーバーによって異なります。

 

 

例えばレンタルサーバーがエックスサーバーの場合では、ファイルをアップロードするドキュメントルートフォルダの場所が「public_html」というフォルダ名です。

ドキュメントルートはどこなのか各レンタルサーバーのサイトで調べることができます。調べたらHTMLファイルをアップロードするために、サーバー側のフォルダをクリックして選択しておきます。

このときアップロード場所を選択しておかないと、サーバーの意図しないフォルダにファイルがアップロードされてしまい、ファイルを見失いがちになることに注意です。

 

 

最後にサーバーにアップロードするために表示させて選択しておいたローカルパネル側のHTMLファイルを、右クリックして「アップロード」をクリックします。

そうするとローカルにあったHTMLファイルが、選択しておいたサーバーのフォルダに転送されてアップロードが完了します。

 

複数のファイルをサーバーにアップロード

 

HTMLファイルだけではなくCSSファイルや画像ファイルなど、ホームページの表示に必要な複数のファイルをまとめてサーバーにアップロードしたい場合もあるかと思います。

そんなときにはフォルダ内の複数のファイルをまとめて選択できます。

 

 

具体的にはローカル側で複数のファイルを格納しているフォルダをクリックして下段のローカルパネルに表示してから、同じく下段のローカルパネルで「command+クリック」で複数のファイルをまとめて選択します。

操作としてはcommandを押しながらマウスでファイルをクリックしていくことで複数のファイルを選択していく感じです。

複数のファイルを選択できると青く選択状態になります。あとは右クリックで「アップロード」をクリックすると、サーバーにファイル転送されてアップロードが完了します。

複数のファイルを選択するときに、たまに不可視ファイルが含まれてることもあります。

ファイル名が「.DS_Store」とかいうファイルです。

.DS_Storeはサーバーにアップロードする必要がないので、.DS_Storeファイルは選択しないでサーバーにアップロードです。

 

サーバーにHTMLファイルがアップロードできたか確認

 

ファイルをサーバーにアップロードすることができた後には、必ずHTMLファイルがサーバー指定のフォルダへアップロードできているか間違えたサーバーのフォルダにアップロードしてしまい失敗していないかの確認と共に、ブラウザにWebページとして反映するか確認をします。

サーバーにアップロードできたか確認後に、ブラウザにWebページとして反映しなかった私の失敗事例を紹介

 

 

サーバーにアップロードできたと思いきや、ドキュメントフォルダにフォルダごとアップロードしてしまい、ドメインだけではブラウザにトップページが反映しない失敗をしたことがあります。

サーバーにアップロードできたか確認してみてよかったと思うと同時に、ローカルからサーバーに転送する時点で確認しとこうよと思う瞬間でした。

WebサイトのトップページになるHTMLファイルのindex.htmlは、フォルダから出してファイルだけでサーバーのドキュメントフォルダにアップロードすることでドメインで表示ができます。

 

HTMLカテゴリの最新記事