今回はWebサイトの公開方法について説明していきます。
作ったWebサイトをサーバーにアップロードするときに、どこにどのファイルを入れたらいいのか、サーバーにアップロードできたと思ったら次はWebサイトをどこから開けばいいのか分からず迷走しました。
これからWebサイトをアップロードする皆さまが迷わないようしっかり説明していきますので、よろしければ最後までご覧ください！
レンタルサーバーはXサーバー、FTPソフトはサイバーダックを使って説明します。使っているサーバーやFTPソフトが違う場合は他のサイトの方が詳しいと思うので、参考程度に見てもらえれば嬉しいです。
こんな悩みを持つ方に読んで欲しい
- Webサイトを作ったはいいけど、公開する方法が分からない
- Webサイトを公開するのに必要なものが知りたい
- Xサーバーとサイバーダックを使ってWebサイトをアップロードしたい
Webサイト公開の流れ
Webサイトの公開の流れとしては、以下の4ステップです。
- レンタルサーバー契約
- ドメイン取得
- Webサイト作成
- 作成したWebサイトの公開 ←今回はココ
今回は4つめの「作成したWebサイトの公開」について詳しく説明していきたいと思います。
Webサイトを公開するために必要なもの
Webサイトを公開するために必要なものは、以下の4つです。
- Webサイト
- レンタルサーバー
- ドメイン
- FTPソフト
Webサイト
これを忘れることはないと思いますが、念のため…。
レンタルサーバー
Xサーバーを使用しています。
Xサーバーを選んだ理由は、以下です。
- Webサイトの表示速度が速い
- 無料独自SSLを使える
- 自動バックアップ機能がついている
- 24時間365日の手厚いサポートがある
- 大量アクセスがあっても落ちない
- データの容量が多い
ドメイン
ドメインはWebサイト1つにつき、1つ必要です。
ドメインを複数作る方法は以下の2つです。
- 新たにドメインを取得する
- サブドメインを作る ←コチラがオススメ！
私はサブドメインを作る方法をオススメします！
新たにドメインを取得するとまた新たに料金がかかりますが、サブドメインはいくつ作っても料金がかからないからです。
FTPソフト
Webサイトのファイルをサーバーに転送するために使用します。
サイバーダックを使用しています。
サイバーダックを使っている理由は、見た目がシンプルで扱いやすいと思ったのと、Macでの定番ソフトだからです。
無料で使える定番ソフトは以下の通りです。
- FileZilla(windows・Mac)
- FFFTP(windows)
- サイバーダック(Mac)
サイバーダックを使用してWebサイトをサーバーにアップロードする方法
- 新規接続
- FTP情報入力
- 接続
- ドメインのフォルダにhtmlなどのファイルを格納
サイバーダックを起動したら、はじめにサーバーと接続する必要があります。
新規接続と書いてあるボタンが上の方にあるので押すと、FTP情報を入力するボックスが出てきます。
| 一番上 | FTP-SSLにします。 初期状態では「FTP(ファイル転送プロトコル)」になっているので、右側の赤い三角のところで選択してください。 |
|---|---|
| サーバ、ユーザー名 | 2枚目の画像の「FTPサーバー(ホスト）名、ユーザー名（アカウント名）」をそれぞれ入力してください。 2枚目の画像のページには、「xサーバーパネルにログイン→FTP→サブFTPアカウント設定→FTPソフト設定」の順で開くとたどり着けます。 「初期FTPアカウントの設定内容」と「サブFTPアカウントの設定内容」の2種類ありますが、上の「初期FTPアカウントの設定内容」で大丈夫です。 |
| パスワード | Xサーバーパネルにログインするときのパスワードを入力します。 |
| Anonymousログイン | チェックがついていたら外します。 |
| キーチェーンに追加する | チェックしてください。 |
サーバーとの接続が終わると、サーバーの中身が表示される。
その中に独自ドメインのフォルダがあるのを確認する。
私の独自ドメインは一番上の「kou-rin.com」なので、サーバーとの接続に成功していることになります。
下の画像は、独自ドメインのフォルダの中身です。
「piblic_html」があるのを確認してください。
下の画像は、public_htmlフォルダの中身です。
この中にhtmlファイルやcssフォルダを入れます。
サーバーにアップロードしたいWebサイトが複数あって、サブドメインを作ると、上の画像のように「public_html」の中にサブドメインの名前のついたフォルダが表示されます。
例えば私だと、「corporate」と「shopping」です。実際にhtmlファイルやcssフォルダを入れたものが下の画像です。
私は自分のパソコンの中では、個別にフォルダを作ってその中にhtmlファイルやcssフォルダ、imageフォルダなどを格納しています。
しかし、サイバーダックのドメインフォルダの中に入れるものは、htmlファイルやcssフォルダなどWebサイトを直接構成している(これがあるからWebサイトを表示できている)ものだけを入れてください。
サーバーにアップロードしたあとのWebサイトの開き方
- サーバーパネルにログイン
- ドメイン
- SSL設定一覧
- SSL用アドレス
サーバーパネルにログインすると、下の画像のような画面が出てきます。
その中から「ドメイン」を見つけます。ドメインを見つけたら、その中に「ドメイン設定」というのがあるのでそれをクリックしてください。
ドメイン設定をクリックしたら、下の画像のような「ドメイン選択画面」が表示されます。
その中に独自ドメインの表示があるので、右側の「選択する」ボタンを押します。
「選択する」を押すと、下の画像のような「SSL設定」の画面が表示されます。
「SSL設定一覧」の中にWebサイトを開くためのアドレスがあります。
サイバーダックでどのフォルダにファイルを入れたのか確認し、SSL用アドレスのアドレスからWebサイトを開きます。
まとめ
Webサイトを公開するには、
- Webサイトを公開するときに必要なものを用意する
- FTPソフトを使ってWebサイトをサーバーにアップロードする
- Webサイトの開き方を知る
です。
