※本記事はアフィリエイト広告を利用しています
概要
今回は、Webサイトの公開手順を紹介します。
「サーバーとかよくわからないンゴよw」という方でも大丈夫です、実際やってみるとそこまで難しくありませんのでご安心ください。
サイト公開までの全体的な流れは以下のようになります。
- サーバー契約
- ドメイン取得・設定
- サーバーにファイルアップロード
前提
HTML,CSS等、公開するサイトに関する実装（コーディング）は済んでいるものとします。
また、今回はMacでの操作方法になるためWindowsの方とは若干操作等異なるかもしれません。
予めご了承ください。
軽く用語説明
「サーバーってそもそも何？」「ドメインって？？？？？？？」
という方のため、簡単に説明します。（めんどくさかったら読み飛ばしてもOKです）
サーバー（server）は簡単に言うと「君が作ったhtml,css等をアクセスした人に表示しますよ」という動きをしてくれるやつです。因みにserverは日本語訳で「提供する側」のことを指します。
ドメイン（domain）は、公開したサイトがインターネット上のどこに存在するかを判別する情報です。住所みたいなものだと思ってください。
※本当は色々奥が深いので、詳しく知りたい方は調べてみてください。
レンタルサーバーの契約
まずはレンタルサーバーを契約しましょう。
レンタルサーバーは無料と有料のがありますが、筆者個人としては確実に
有料のサーバーを契約することをお勧めします。
無料の場合、主に以下のようなデメリットがあります。
- 品質が低いため、うまく動作しない可能性がある
- サーバーの容量が低い
- 余計な広告が表示される
「有料の方が良いのはわかったけど、じゃあどれがいいの」
→おすすめは「エックスサーバー」です。（筆者自身も使わせてもらってます）
おすすめする理由は、主に以下の点です。※2023年10月22日時点での情報です
- 初期費用はもともと3300円だったのが、今は0円
- ディスク容量が一番安いプランで300GB
- WordPressの導入をしてくれる「クイックスタート」あり
→取り敢えずWordPressを使いたいといった方におすすめ
他にも色々魅力はあるのですが、ひとまずこのあたりです。初期費用0円マジでありがたいです。
ここからはエックスサーバーの契約手順を紹介します。
まず、公式サイトにアクセスします。
アクセスしたら右上の「お申し込み」をクリックします。
「10日無料お試し 新規申し込み」をクリックします。
契約内容を入力します。
サーバーID：既に値が入ってると思いますので、そのままでOKです。
プラン：希望プランを選択します。迷ったらスタンダードでOKです。
WordPressクイックスタート：WordPressを使いたいという方は「利用する」にチェックを入れましょう。今回はチェックを入れないパターンの手順を紹介していきます。
入力が終わったら「Xserverアカウントの登録へ進む」をクリックし次へ進みます。
続いて、Xserverアカウントの情報を入力します。
各項目入力したら「次へ進む」をクリックします。
※パスワードは忘れないように控えておきましょう
入力したメールアドレス宛に6桁の認証コードが届くので、入力します。
入力したら「次へ進む」をクリックします。
最終確認画面が表示されるため、「この内容で申込みする」をクリックします。
※申し込み完了後、「【Xserver】■重要■サーバーアカウント設定完了のお知らせ」のメールが届きますが、パスワードなど重要な情報が記載されているため、必ず控えておきましょう。
（メモ帳などに内容をコピペしておく等が良いと思います）
続いて支払い方法の登録を行います。
まず、Xサーバー管理画面にアクセスします。
ログイン画面が表示されますので、登録したメールアドレスとパスワードを入力します。
ログインしたら、画面上部にある「料金支払い」をクリックします。
対象サーバーにチェック&契約期間を選択し、「支払い方法を選択する」をクリックします。
契約期間は長ければ長いほど得になります。
気になる月額料金ですが、2023/11/6 までキャンペーンがやってるらしく、36ヶ月間だと1ヶ月あたり693円になるみたいです。
「いや、そんな長期間使うかわかんねーよ」て方はまずは12ヶ月程度が無難かと思います。
「お試しで使ってみたい程度なんだけど…」という方は1ヶ月あたりの料金が高くなりますが
3ヶ月でも良いと思います。↓
お支払い方法登録画面で決済方法を設定し、「決済画面へ進む」をクリックします。
契約内容に問題ないことを確認できたらサーバーの契約は完了です。
ドメインの取得・設定
続いてドメインを取得しましょう
まず、Xサーバー管理画面にアクセスします。
ログインしたら、「ドメイン取得」をクリックします。
「取得したいドメインを入力」の欄に任意の文字を入力し、取得したいドメインにチェックをいれ、ドメイン名を決めます。（1つでも複数でもどちらでも可）
※ドメイン名は変更できないため、慎重に決めましょう。
筆者のおすすめは「.com」です。なぜかというと、こちらのドメインの取得料金は初回の取得だと年額１円です。ほぼ無料みたいなものなので、迷ったら「.com」でいいと思います。
ドメイン料金一覧はこちらから確認できます。
「都道府県.jpを表示する」をクリックすると、都道府県名のドメインのチェックボックスが表示されますので、こちらを利用してもOKです。入力ができたら「ドメインを検索する」をクリックします。
取得可能なドメインが一覧で出てくるので、取得したいやつにチェックを入れて
利用規約同意にチェックを入れ、「お申し込み内容とお支払いに進む」をクリックします。
「取得できません」と表示されます。その時はドメイン名を変えてみてください。
後は決済方法を選択する画面が表示されるので、先ほどと同じように進めます。
購入内容に問題なければ、ドメインの取得は完了です。
ドメインを取得できているか確認をします。
Xサーバー管理画面にアクセスし、「ドメイン」に取得したドメイン名が表示されていればOK。
続いて、ドメイン設定をします。
管理画面で「サーバー管理」をクリックします。
「ドメイン設定」をクリックします。
「ドメイン設定追加」タブを選択し、取得したドメインを入力します。
入力したら、「確認画面へ進む」をクリックします。
「無料独自SSLを利用する（推奨）」
「高速化・アクセス数拡張機能「Xアクセラレータ」を有効にする（推奨）」
のチェックは必ず入れておいてください。
確認画面が表示されるので、「追加する」をクリックします。
「ドメイン設定一覧」に追加したドメインが表示されます。
※追加して暫くは「反映待ち」になっていて、設定が適応されるまで１時間程度かかります。
これでドメイン設定完了です。
サーバーにファイルをアップロード
最後に、サーバーにファイルをアップロードしていきましょう。
FTP（File Transfer Protocol）というのを使ってサーバーにファイルを転送します。
FTPは超簡単にいうと サーバーとのファイルのやり取りで必要になるやつ です。
※本当は色々奥が深いので、詳しく知りたい方は調べてみてください。（２回目）
まず、FTPソフトをインストールしましょう。
おすすめは「FileZilla」です。今回はこちらを基に手順を紹介します。
FileZilla公式サイトにアクセスします。
「Download FileZilla Client」をクリックします。
ダウンロードボタンをクリックし、ダウンロードします。
ダウンロードしたいエディションを選んでくださいと出ますが、一番左の「Download」ボタンを押しましょう。
ダウンロードしたら、FileZillaを起動しましょう。
ダウンロードしたファイルをダブルクリックすればFileZillaアプリが表示されるので、こちらを開きます。
開いたらこんな感じの画面が出てくると思います。
左側がローカル環境で、右側が本番環境（アップロード先）のフォルダが表示されます。
（まだサーバーに接続していないため、右側は何も表示されていない状態です。）
サーバーに接続していきます。
画面左上のボタンをクリックします。
赤枠の各項目に入力していきます。
入力内容はサーバーを契約時に届いたメール
件名：「Xserverアカウント】■重要■サーバーアカウント設定完了のお知らせ 」の
■FTP情報 の部分に記載されていますので、そちらを確認にして入力していきましょう。
入力が完了したら「接続」をクリックして接続します。
接続できたら右側にたくさんフォルダが表示されると思います、これで接続はできました。
続いて、ファイルのアップロードをしていきます。
右側に先ほど取得したドメイン名のフォルダがあると思いますのでそちらをダブルクリックして開きます。
その中に「public_html」フォルダがあるのでこちらを開きます。
「public_html」の中に公開したいhtml,cssファイルを全て入れます。
※アクセス時に表示されるhtmlは「index.html」に設定されるため、この名前のhtmlファイルは置いておきましょう。
これで公開がされました！実際にアクセスしてみて確認しましょう。
https://取得したドメイン
をURLに入力すればアクセス可能です。これで公開は完了です。
お疲れ様でした！！