ローカル環境で作成したポートフォリオサイトの公開方法【WEB初学者向け】

コーディング

こんにちはTERUです。
フリーランスでWEB制作(コーディング or ディレクション業務)をしています。

読者の悩み

  • ローカル環境で作成したサイトの公開方法が知りたい

本記事では、こういった疑問に答えます。
WEB制作初学者向けにポートフォリオサイトなど、ローカル環境で作成したサイト(HTML/CSS/JSなど)をインターネット上に公開する方法を説明します。

サーバーの操作やFTPを使ったファイルのアップロードは、身につけると制作案件の幅も広がるので、これを機に勉強してみてください。

サイト公開手順

  1. はじめに
  2. サーバーを契約しよう
  3. ドメインを取得しよう
  4. サーバーにドメインを設定しよう
  5. FTPを利用してファイルをアップロードしよう
  6. まとめ

本記事の信頼性

  • Web制作会社にてWebディレクター経験あり
  • 現在フリーランスでWEB制作をしている
  • WordPressを使ったWeb制作を数多く経験している

スポンサードサーチ

はじめに

はじめに
まずはじめに、これから契約する「サーバー」と「ドメイン」について、ざっくりとイメージを理解しておきましょう。

それぞれの役割は以下になります。

  • サーバー:土地
  • ドメイン:住所
  • HP(WEBサイト):家

WEBサイト(家)を公開するためにサーバー(土地)とドメイン(住所)が必要です。
これから契約方法を説明します。

スポンサードサーチ

サーバーを契約しよう

サーバーを契約しよう
契約できるサーバーはいくつか種類がありますが、オススメはエックスサーバー
です。

エックスサーバーのオススメポイント

  • 管理画面がシンプルで使いやすい
  • サーバー稼働率99.99%以上の信頼性
  • WordPressのインストールが簡単
  • 無料でSSL化(https)に対応
  • 自動バックアップ機能あり

このサイトもX-Serverを利用しています。

サーバーを契約しよう
多数のコーポレートサイトでも利用されており、制作案件でも一番触る機会があるサーバーだと思います。

サーバー申し込み

さっそく公式サイトからエックスサーバーの申し込みを進めていきましょう。

(1)「お申し込みはこちら」を選択します。
サーバー申し込み
(2)「10日間無料お試し 新規お申込み」を選択します。
サーバー申し込み2
(3)プランは「X10」が選ばれていることを確認して、「Xserverアカウントの登録へ進む」を選択します。
※通常のコーポレートサイトやポートフォリオサイトはX10プランでスペックは十分です。
サーバー申し込み3
(4)ここからは、アカウント情報の入力画面になるので、氏名、住所、電話番号など、必要情報を入力して会員登録を完了させます。
サーバー申し込み4
(5)会員登録を完了させると以下のメールが届きます。
件名:【Xserver】■重要■サーバーアカウント設定完了のお知らせ[試用期間] 〜
サーバー申し込み6
(6)インフォパネルのリンクをクリックし、上記メールに記載してある「会員ID」「パスワード」でエックスサーバーの管理画面にログインします。
サーバー申し込み5

※そのまま、「お支払い情報の設定」に進みましょう

お支払い情報の設定

「お試し期間中」のユーザーは、この後のドメイン設定ができないので先にお支払い情報を設定しましょう。
(1)「料金支払い」を選択します。
お支払い情報の設定
(2)対象サーバーをチェック(①)、更新期間を選択(②)し、「お支払い方法を選択する」を選びます。あとは好きな決済方法を選択して、お支払いを完了させます。
※更新期間は長いほど、金額的にはお得になります。
お支払い情報の設定2

スポンサードサーチ

ドメインを取得しよう

ドメインを取得しよう
ドメインはサイトの住所の役割を持ちます。
ドメインを取得するサイトは数多くありますが、ほとんど差はありません。

本記事では、有名なドメイン取得サービスの一つであるお名前.comでの取得方法を説明します。

ドメイン取得手順

(1)取得したいドメイン名を入力して「検索」を選択します。
ドメイン取得手順
(2)取得したいドメイン名が取得可能であれば、「お申込みへ進む」を選択します。
※すでに利用されているドメイン名であれば、別のドメイン名で探します。
ドメイン取得手順2
(3)ドメインを利用するサーバーを選択してくださいと表示されるので、「利用しない」を選択し、右側の「初めてご利用の方」-「メールアドレス」、「パスワード」を入力し、「次へ」を選択します。
ドメイン取得手順3
※今回はエックスサーバーを利用するので、お名前.comのサーバーは使用しません。
(4)会員情報の入力画面で必須項目を入力し、「次へ」を選択します。
ドメイン取得手順4
(5)お支払い方法の入力画面が出るので、こちらも必要項目を入力し、「申込む」を選択します。
ドメイン取得手順5
以上がドメイン取得手順になります。

よくある質問1:ドメイン名は何がいいの?

結論、ドメイン名はなんでもいいです。

よく言われている注意ポイントを2点説明します。

  • トップレベルドメイン(.com.jpなど)は特に気にしなくてOK
     →無難なのは、日本人に馴染みがある.com.jp
  • 日本語ドメインは避けましょう。
     →サイトを共有(シェア)された際に文字化けする。
     →文字化けURLだと利用者からは、不信感もたれる

よくある質問2:ドメイン利用料はいくら?

取得するドメイン名により、利用料は変わるが、1年間のドメイン利用料の目安は1年間で200円〜1000円ほどです。

スポンサードサーチ

サーバーにドメインを設定しよう

サーバーにドメインを設定しよう
先ほど取得したドメインを契約したエックスサーバーで利用できるように設定します。

ドメイン設定

(1)Xserverインフォパネルから①「XserverアカウントID」と②「Xserverアカウントパスワード」を入力してログインします。
ドメイン設定
(2)「サーバー管理」を選択し、サーバーパネルを表示します。
ドメイン設定2
(3)サーバーパネルで、「ドメイン設定」を選択します。
ドメイン設定3
(4)「ドメイン設定追加」タブを選択し、取得したドメイン名を入力して「確認画面へ進む」を選択します。
ドメイン設定4
(5)確認画面が表示されるので「追加する」を選択します。
ドメイン設定5
(6)反映に1時間ほどかかるので休憩しましょう。
ドメイン設定6

エックスサーバのネームサーバーを確認

(1)サーバーパネルで、「サーバ情報」を選択します。
エックスサーバのネームサーバーを確認
(2)サーバ情報画面の赤枠部分がネームサーバー情報なのでメモしておきます。
エックスサーバのネームサーバーを確認2

ドメインのネームサーバーを変更

お名前.comで取得したドメインのネームサーバーをエックスサーバーのネームサーバに変更します。
(1)ドメインNaviで①「お名前ID」と「パスワード」を入力してログインします。
ドメインのネームサーバーを変更
お名前.comでドメイン取得時に「[お名前.com]ドメイン登録 完了通知」というメールが届いています。
ドメインのネームサーバーを変更2
上記のメールにお名前IDは記載されています。パスワードは自身が設定したパスワードを入力してください。
(2)ドメインタブを選択し、ドメイン一覧から対象ドメイン名のネームサーバーの「初期設定」を選択します。
ドメインのネームサーバーを変更3
(3)ネームサーバー設定画面にて「その他」タブを選択し、赤枠部分にエックスサーバーのネームサーバを追記して「確認」を選択します。
ドメインのネームサーバーを変更4
(4)確認画面が表示されるので「OK」を選択します。
ドメインのネームサーバーを変更5
以上でドメインとサーバの紐付けは完了です。
ネームサーバー変更には24時間ほどかかるので、次の作業は1日休んでからやりましょう。

スポンサードサーチ

FTPを利用してファイルをアップロードしよう

FTPを利用してファイルをアップロードしよう
FTPソフトを利用して、契約したサーバーにファイルをアップロードしましょう。
アップロードすれば、インターネット上にサイトが公開されます。

FTPソフト(FileZilla)のインストール

今回はWindows/Mac共に無料で利用できる「FileZilla」というFTPソフトを利用します。
詳しいインストール方法は下記サイトを参照ください。

サーバーへの接続方法

(1)FileZillaを開き赤枠の「サイトマネージャー」を選択します。
サーバーへの接続方法
(2)サイトマネージャー画面で「新しいサイト」を選択します。
サーバーへの接続方法2
(3)「ホスト」、「ユーザー」、「パスワード」を入力し「接続」を選択します。
サーバーへの接続方法3
※入力する値についてはサーバー契約した際に送付されてるメールを参考にしてください。

件名:【Xserver】■重要■サーバーアカウント設定完了のお知らせ〜

サーバーへの接続方法4

ファイルのアップロード

(1)接続するとディレクトリが表示されるので、ドメイン設定したドメイン名を選択します。

※ここでは「teru12131.com」

ファイルのアップロード
(2)次に、「public_html」フォルダを選択し、中に入ってる初期状態のファイルを全て削除します。
ファイルのアップロード2
ファイルのアップロード3
(3)ローカル環境にあるポートフォリオサイトのファイルを全てドラック&ドロップで「public_html」フォルダ内にアップロードします。
※表示させたいページのファイル名はindex.htmlにしてください
ファイルのアップロード4
ファイルのアップロード5
(4)これでサイト公開は完了です。
※ブラウザからドメイン名にアクセスするとポートフォリオサイトが表示されます。
ファイルのアップロード6

スポンサードサーチ

まとめ

以上がローカル環境で作成したサイト(ポートフォリオ等)をインターネット上に公開する方法になります。

今回説明したサーバー、ドメイン、FTPの操作については、制作案件でも必要となる作業なので身につけておいて損はないです。作業の幅が広がると単価アップもできますので頑張りましょう!

何かご質問がありましたら、気軽にご連絡ください。
以上です。

スポンサードサーチ