プログラミング

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

2021年11月8日

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

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

想定読者

  • 自作のHTMLファイルを公開したことない人
  • プログラミング初学者でこれからオリジナルサイトを公開したい人
  • FTPソフトの使い方が知りたい人

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

  • 自作のサイトが簡単に公開できるようになる
  • どういう理由でサイトが公開されているかの概要が掴める
  • もうサイト公開に関して困らない

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

最初に用意するもの

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

  • HTMLファイル
  • FTPソフト

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

FTPって何?

File Transfer Protocolは、コンピュータネットワーク上のクライアントとサーバの間でファイル転送を行うための通信プロトコルの一つである。

引用元ーWikipedia

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

File Zillaのダウンロード

Windows

Mac

具体的な手順

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


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


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


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

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

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


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


  • ドメイン選択する


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


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

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

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

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

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


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


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


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


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


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


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

「公開するファイルを用意」→「FTPソフトを通じてファイルをサーバーに格納」→「転送完了でサイト公開ができる」

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

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

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

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ソフトを介してでないとネット上に公開できないので、くれぐれもファイルマネージャーから直接アップロードしないようにしてください。

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

まとめ

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

手順のおさらい

  1. FTPソフトと公開するサイトのファイルを用意
  2. FTPソフトを起動→接続
  3. public_html直下に自作サイトのファイルたちを格納していく
    ※階層がずれないように注意
  4. 転送がうまくいったら「転送完了」と出るのでそしたら成功
  5. 実際にURLを叩いてネット上に公開されているか確認

→FTP上での操作は全て画面上のターミナルで記録されているのでエラーやターミナルが動いていなかった場合は最初からやり直してみてください。

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

おすすめ
【今日から始められる】レンタルサーバーのおすすめ5選を厳選紹介

続きを見る

  • この記事を書いた人
  • 最新記事

てん

今:Webエンジニア【経歴】新潟大学 ▶︎ web広告代理店マーケ / 営業 ▶︎ 独立 ▶︎ Uber ▶︎エンジニア ■福岡出身27歳 ■記録&アウトプットとしてブログ書いてますm

-プログラミング