誰でもできる!WEBサイトの公開方法【初心者向け】

こんにちはTERUです。
フリーランスでホームページやECサイト制作を仕事にしています。

読者の悩み

  • ホームページ作成したけど、どうやってインターネット上に公開するの?
  • 公開するにはドメインやサーバーが必要だと分かったけど、具体的にどうすればいいの?

インターネットに公開するためには、いくつかの大きな作業(ステップ)があります。
「サーバー」や「ドメイン」など聞きなれない単語も多く、初心者の方には挫折することも多いと思います。

本記事では、まずインターネット公開までの流れを整理し、各作業毎に別記事で詳しく手順を解説いたします。

頑張ってインターネットに公開するまで辿り着きましょう!

この記事を読んで分かること

  • ホームページをインターネット上に公開する具体的な手順が分かる。

本記事の信頼性

  • フリーランスとしてWeb制作をメインに仕事をしている。
  • Web制作会社にてディレクターの経験もあり。
  • 普段からエックスサーバー(XSERVER)を利用している。
目次

Webサイトを公開するための予備知識

Webサイトを公開するには、いくつかの専門用語を理解する必要があります。

例えば。

公開用ファイルWebサイトとしてインターネットに公開するファイル一式
ドメインWebサイトがどこにあるかを判別する情報
サーバーユーザーのリクエストに応じてデータやサービスを提供するコンピューター
専門用語の例
TERU

少し分かりづらいですね。。

自分の身近なことに置き換えて考えてみましょう。

Webサイトをインターネットに公開すること→お家を立てることに置き換えます。

各要素の役割

各要素の役割について
各要素の役割
  • サーバー:土地
  • ドメイン:住所
  • SSL:鍵
  • Webサイト:家

土地(サーバー)を契約して、住所(ドメイン)登録を行い、家(Webサイト)を立てる

TERU

こんな感じに置き換えてみると、少しはイメージしやすくなると思います。

Webサイト公開の流れ

ここからは、本格的に公開までの手順を説明していきます。
Webサイト公開までには、大きく5つのステップをクリアする必要があります。

Webサイト公開の道のり
  1. サーバー契約
  2. ドメイン取得
  3. ドメイン設定
  4. SSL化(http→https)設定
  5. ファイルアップロード

各ステップの作業について、一つずつ説明します。

STEP1:サーバー契約

まずは土地であるサーバーの契約から進めていきます。

サーバー(レンタルサーバー)は、自分が何を重要視するか(費用?or 安心? or 性能?)によって、選択が変わります。
重要視するポイント(基準)の詳細については、下記の記事で解説しています。

本記事では、当ブログでも使用しているエックスサーバー(XSERVER) を想定して手順を記載します。

キャンペーン情報

エックスサーバーのお得なキャンペーン情報です。

「半額キャッシュバックキャンペーン」
※2022年8月25日(木)18:00 まで

2022年8月25日まで「半額キャッシュバックキャンペーン」を実施中で、キャンペーン中に12ヶ月以上の契約で利用料金が実質半額になります!

サーバー契約は下記の流れで行います。

サーバー契約の流れ
  1. サーバーの申し込み
  2. お支払い方法の設定

サーバーの申し込み

手順①:エックスサーバー(XSERVER) にアクセスして、画面右上の「お申し込み」を選択します。

サーバーの申し込み

手順②:「10日間無料お試し〜」を選択します。

サーバーの申し込み2

手順③:お申し込みフォーム画面にて、プランの「スタンダード」が選択されていることを確認します。
通常のWebサイトやWordPressブログは、スタンダードプランのスペックで十分です。

サーバーの申し込み3

手順④:画面下の「Xserverアカウントの登録へ進む」を選択します。

サーバーの申し込み4

手順⑤:アカウント情報の入力画面になるので、氏名、住所、電話番号など、必要情報を入力します。

サーバーの申し込み5

重要:パスワードは忘れないようにメモしておきましょう!!

キャンペーン情報などお知らせメールが不要な場合は、チェックを外しておきましょう

手順⑥:入力が完了したら、画面下の「次へ進む」を選択します。

サーバーの申し込み6

手順⑦:入力したメールアドレス宛に6桁の数字のみ記載されたメールが届くので、数字を「確認コード」欄に入力して、「次へ進む」を選択します。

サーバーの申し込み7

手順⑧:確認画面が表示されるので、入力内容に問題なければ、「この内容で申込みする」を選択します。

サーバーの申し込み8

手順⑨:入力したメールアドレス宛にアカウント登録完了のメールが届きます。
件名:「【Xserver】■重要■サーバーアカウント設定完了のお知らせ[試用期間] 〜」

以上でサーバーのお申し込みは完了です。

「SMS・電話認証へ進む」というボタンが表示された場合

「この内容で申込みする」ではなく、「SMS・電話認証へ進む」が表示された場合の手順になります。

手順①:「SMS・電話認証へ進む」を選択します。

手順②:「認証コードを取得するお電話番号」を入力し、「取得方法」を決めて、「認証コードを取得する」を選択します。
※ここでは、SMSでの取得方法にしています。

サーバーの申し込み9

手順③:指定した取得方法で、認証コードが届きます。認証コードを入力してから「認証して申し込みを完了する」を選択します。

サーバーの申し込み10

お支払い方法の設定

次にお支払い方法の設定を行います。

お支払い方法の設定を行わないと「ドメイン設定」ができません。

手順①:エックスサーバーの管理画面にアクセスします。

お支払い方法の設定

手順②:①「XserverアカウントID」と②登録したパスワードを入力し、「ログインする」を選択します。

お支払い方法の設定2
①XserverアカウントIDアカウント登録完了メールに記載されています。

②パスワードアカウント情報の画面で入力した値

手順③:管理画面の右上にある「料金支払い」を選択します。

お支払い方法の設定3

手順④:料金支払い画面にて、対象サーバーをチェック(①)、更新期間を選択(②)し、「お支払い方法を選択する」を選択します。

お支払い方法の設定4

Xserverの料金は、契約期間によって月額料金が変わってきます。
更新期間は長いほど、金額的にはお得になります。
※契約更新時に、期間を変更することは可能です。

※2022年7月時点の情報です。
出典:エックスサーバー|高速・安定の高性能レンタルサーバー

手順⑤:あとは好きな決済方法を選択して、お支払いを完了させます。

お支払い方法の設定5

お支払いが完了すれば、「STEP1:サーバー契約」の作業は全て完了です。

STEP2:ドメイン取得

次にWebサイトの住所にあたるドメインを取得します。

レンタルサーバーを契約すると「XXXX.xsrv.jp」のような初期ドメインが自動で割り当てられますが、自分の好きなドメイン名(独自ドメイン)を取得しましょう。

なぜなら、独自ドメイン取得することで下記のメリットがあるからです。

独自ドメイン取得のメリット
  • 自分の好きな文字列を使用できる。
  • ユーザーに対して信頼性や独自性が出る。(覚えてもらいやすい)
  • レンタルサーバーを移行する際もドメインを引き継げる。
  • 取得したドメインでメールアドレスが作成できる。

独自ドメイン取得の手順については、パターン別に下記の記事で解説しています。

XSERVER(エックスサーバー)で取得する場合

お名前ドットコムで取得する場合

STEP3:ドメイン設定

ドメインの取得ができたら、ドメイン設定を行なっていきます。
ドメイン設定は、サーバー(土地)とドメイン(住所)を紐づける作業になります。

紐付けを行うことで、契約したレンタルサーバー上でドメインが利用できるようになります。

ドメイン設定の手順については、下記の記事で詳しく解説しています。

STEP4:SSL化設定

ドメイン設定ができたら、SSL化設定を行います。

SSL化とは、インターネット上でデータを暗号化してやり取りする仕組み(SSL)を実装することです。

すごく簡単に言うとWebサイト(家)のセキュリティを向上させる作業になります。

SSL化設定を行うことで、利用者にWebサイトを安全に利用してもらうことができます。

SSL化設定の手順については、下記の記事で詳しく解説しています。

STEP5:ファイルアップロード

最後にファイルアップロードを行います。

Webサイトとして用意した公開用ファイル一式をサーバーにアップロードします。
これは、Webサイト(家)をサーバー(土地)上に立てる作業になります。

アップロードとは、ネットワークを通じてサーバー上にデーターを配置する作業です。

ファイルアップロードの手順については、下記の記事で詳しく解説しています。

ファイルアップロードが完了すると、インターネット上にWebサイトが公開されます!

まとめ

今回は、Webサイトを公開する方法について具体的に解説しました。

Webサイトを公開するまでの手順
  1. サーバー契約
  2. ドメイン取得
  3. ドメイン設定
  4. SSL化(http→https)設定
  5. ファイルアップロード

初めての方は、一度で理解するのは難しいと思います。
本記事では、公開までの流れを網羅的に記載して、なるべく各ステップの手順を別記事で詳しく解説しています。

TERU

分からなくなったら、何度でも見返してもらえればと思います。

お疲れ様でした。以上です。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次
目次
閉じる