サーバーなどの専門用語がわからなくても公開できますか？
初心者でもわかるように教えてほしいな。
こういったお悩みに答えます。
本記事の信頼性
しむけん(@shimuken0104)
この記事を書いている僕は、通算ブログ歴1年5ヶ月。
現在は、フリーランスエンジニアをしつつ、ブログを書いています。
今回は、Webサイトの公開手順を５ステップでご紹介していきます。
画像を見ながら、１つずつ進めるだけで、必ずWebサイト公開ができるようになりますよ。
手順を進める前に
今回は、HTML/CSSで自作した模写サイトなどの、Webサイト公開を目的としています。
当記事では、WordPressのインストールはしない手順で解説しています。
PHPの知識がある方や、ブログを始めたい方は、下記を参考にしてみてください。
>>【2021年】WordPressの始め方！初心者でも10分で完成！
よくわからない方は、このまま進めてOK（いつでもWordPressに変更可能）
それではどうぞ！
Webサイトの公開に必要な要素3つ
まず、ウェブサイトの公開に必要な要素を確認しておきましょう。
必要な要素は3つあります。
Webサイト公開に必要な3要素
専門用語がでてきたので、下記のようにイメージしておきましょう。
Webサイト公開に必要な要素3つ
- サーバー：土地
- ドメイン：住所
- ファイル：家具
つまり、Webサイト（家）を所有するために、サーバー（土地）、ドメイン（住所）、ファイル（家具）を準備する感じです。
サーバー＝土地、ドメイン＝住所、ファイル＝家具
ざっくりイメージができればOK！
では、続いてWebサイト公開までの流れをご説明します。
Webサイト公開までの流れ
ウェブサイト公開までの流れは下記になります。
では、具体的なWebサイトの公開手順について説明していきます。
Webサイト公開手順①レンタルサーバーを申し込む
まずは、レンタルサーバーに申し込みます。
今回は、ConoHa WING（コノハウイング）
を使ってホームページ公開をしていきます。
ConoHa WING（コノハウイング）がおすすめな理由
レンタルサーバー会社はたくさんありますが、ConoHa WINGをおすすめする理由は下記になります。
ConoHa WINGがおすすめな理由
- 国内最速の表示速度
- 料金が安い（月800円～）
- 独自ドメインが無料
- 初期費用0円
- SSLが無料
とはいえ、大手企業GMOが運営しているので安心して使うことができますよ。
通常のレンタルサーバーは、初期費用3,000円ほどかかることも多いですが、ConoHa WINGは初期費用が無料なのも嬉しいポイント。
今回は、ConoHa WINGをつかってWebサイトを公開していきます。
ConoHa WINGページを開きながら、読んでください。
【2021年1月29日まで】WINGパック「ベーシックプラン」お申し込みで全契約期間20%OFF
2021年1月29日18時までに、WINGパック「ベーシックプラン」に申し込むと全契約期間20%OFFになる、お得なキャンペーンが開催中です。
STEP1 コノハウイング申込み画面にアクセス
ConoHa WINGお申し込みページ
まずは、下記リンクからConoha WING（コノハウイング）公式ページにアクセスし、『今すぐお申し込み』をクリックします。
次に、『初めてご利用の方』の枠内にメールアドレス（2回）とパスワードを入力し、『次へ』をクリック。
メールアドレスとパスワードを入力する
STEP2 サーバープランを選ぶ
下記のプラン選択画面になったかと思います。
プラン選択画面
まず、料金プラン設定の5つを決めていきます。
- 料金タイプ：WINGパック（※WINGパックは3ヶ月以上の期間契約）
- 契約期間：3ヶ月（期間が長くなると割引率UP）
- プラン：ベーシック（サイトのアクセスが多くなれば変更でOK）
- 初期ドメイン：適当でOK。（ブログURLに関係ありません）
- サーバー名：そのままでOK
おすすめの料金プラン
なお、今回はHTML/CSSで自作したサイトを公開することが目的のため、『WordPressかんたんセットアップ』は『利用しない』にチェックを入れます。
料金確認をして、『次へ』をクリックします。
料金確認し、「次へ」をクリック
STEP3 お客様情報を入力
お客様情報の入力画面に変わったと思います。
情報を入力し、『次へ』をクリックします。
赤枠の情報を入力し「次へ」をクリック
STEP4 SMS・電話認証をする
次に、本人確認のため、SMS認証をしていきます。
携帯電話の番号を入力し、『SMS認証』をクリック。※電話認証でも問題ありません。
電話番号を入力し、「SMS認証」をクリック
すると、携帯に『認証コード』が届きます。
携帯に認証コードが届く
認証コードを下記の画面で入力し、『送信』をクリックします。
認証コードを入力し「送信」する
STEP5 お支払い情報を入力
次に、お支払い情報を入力していきます。
クレジットカードの情報を入力し、『お申込み』をクリックしましょう。
クレジットカード情報を入力し「お申込み」をクリック
以上で、サーバーのお申し込みは完了です。
Webサイト公開手順②無料独自ドメインを取得する
サーバーお申し込み後、下記の表示がされたら『ドメイン新規取得』を選択し『追加する』をクリックします。
ドメイン新規取得にチェックし「追加する」をクリック
次に『ドメイン名』にお好きなドメイン名を入力します。
好きなドメイン名を入力
『カートに追加』を選択し、『次へ』をクリック。
好きなドメインを選択し「次へ」
登録情報を入力し、『次へ』をクリックします。
登録情報を入力し「次へ」をクリック
内容を確認し、『決定』をクリックすると、独自ドメインの取得は完了です。
内容確認し「決定」をクリック
次からは、ファイルのアップロードの手順を紹介しますね！
Webサイト公開手順③サーバーにファイルをアップロードする
Webサイトを公開するためには、サーバーにファイル（html/css、画像データなど）をアップロードする必要があります。
サーバーにファイルをアップロードする手順は3つ。
- FileZillaをダウンロード
- FTP設定をする
- サーバーに接続する
１つずつ説明していきます。
その①：FTPツールをダウンロード
まずは、FTPツールをダウンロードします。
今回は、FTPツールの定番『FileZilla（無料）』を使って説明していきます。
下記より、FileZillaをダウンロード＆インストールして下さい。
その②：FTP設定をする
次に、FTP設定をしていきます。
まずは、ConoHa WINGコントロールパネルにアクセスします。
ログインすると下記画面になるので『 WING 』を選択し、『サイト管理』をクリックします。
「WING」を選択し「サイト管理」をクリック
次に『FTP』をクリックし、『FTPアカウント』を選択します。
「FTP」→「FTPアカウント」をクリック
『ユーザー名』と『パスワード』を設定し、『保存』をクリックします。（メモ必須）
ユーザー名とパスワードはメモ必須
作成したアカウント名をクリックし、『FTPサーバー』をメモしておきます。
FTPサーバーをメモする
メモしておく情報3つ
- ユーザー名
- パスワード
- FTPサーバー
上記をメモしておけばOKです。
その②：サーバーに接続する
では、サーバーに接続するための初期設定をしていきます。
まず、FileZillaを起動し、『左上のアイコン』をクリック。
FileZilla左上アイコンをクリック
『新しいサイト』をクリックし、覚えやすいサイト名（なんでもOK）を入力します。
「新しいサイト」をクリックし「サイト名」を入力
次に、右側の項目を入力するために、先ほどメモした情報を使います。
- ホスト：メモしたFTPサーバーを入力
- ユーザー：メモしたユーザー名を入力
- パスワード：メモパスワードを入力
- ポート：21と入力
「ホスト」「ポート」「ユーザー」「パスワード」を入力し接続する
上記を入力し『接続』をクリックすると、サーバーに接続ができます。
その③：ファイルをアップロード
まず、FileZillaから『 public_html 』を探し、ダブルクリック。
public_htmlをクリック
設定した『独自ドメイン』のフォルダをクリックします。
独自ドメインフォルダをクリック
『アップロードしたいファイル』を選択し、FileZillaの『独自ドメインフォルダ』にドラッグ＆ドロップします。
ファイルをFileZillaにドラッグ＆ドロップ
これで、ファイルのアップロードは完了です。
次に、実際にWebサイトを見て確認してみましょう。
Webサイト公開手順④公開されているか確認する
アップロードされているか確認するには、検索欄にURLを入力します。
当ブログだと、http://shimukenblog.com/wpと入力します。
独自ドメインを入力し、サイト確認
Webサイト公開手順⑤SSL設定をする
セキュリティ強化のために、SSL設定をしておきましょう。
SSL化されているサイトの特徴
- URL横に鍵マークがついている
- httpsから始まる
SSL化されている例
では、SSLの設定をしていきます。
まずは、ConoHa WINGコントロールパネルにアクセスします。
メニュー上部の『WING』を選択し『サイト管理』をクリック。
「WING」→「サイト管理」をクリック
次に、『サイトセキュリティ』を選択し、『独自SSL』をクリックします。
「サイトセキュリティ」→「独自SSL」をクリック
『無料独自SSL』の利用設定を『ON』にします。
「無料独自SSL」を「ON」に設定
以上で、SSL設定は完了です。
もし、上手くいかない場合は、ツイッターで相談も受け付けていますので、遠慮なく聞いてくださいね。
Webサイト公開によくある質問
ウェブページ公開でよくある質問をまとめました。
パスワードをつけて公開する方法はありますか？
あります。
まず、ConoHa WINGコントロールパネルにアクセスします。
『WING』→『サイト管理』→『サイトセキュリティ』→『ディレクトリアクセス制限』の順にクリックします。
アクセス制限の手順
サイト全体にパスワードをつける場合は、空欄のまま『保存』をクリック。
特定のページ（ディレクトリ）のみアクセス制限する場合は、ディレクトリを入力します。
全体にパスワードをかける場合は、空欄で「保存」
『 / 』を選択し、右側の『エンピツマーク』をクリック。
「 / 」を選択し「エンピツマーク」をクリック
次に『＋』を選択し『ユーザー名』と『パスワード』を入力し『保存』をクリックします。
「＋」をクリックし、「ユーザー名」「パスワード」を入力
以上で、該当のページにパスワードが設定されました。
検索しても自分のサイトが出てきません。
結論からいうと、待ちましょう。
検索にサイトが表示されるには、多少時間がかかります。
なぜなら、クローラーにウェブページをインデックスされる必要があるためです。
Googleサーチコンソールを使って、インデックス促進をする方法もあります。
Webサイトのアクセス数を調べるには？
Googleアナリティクスの設定が必要です。
設定方法は、下記のサイトが参考になります。
まとめ：Webサイト公開はかんたんです！
今回は、Webサイト公開5つの手順をご説明しました。
手順通りにすすめるだけで、ホームページ公開ができたかと思います。
もし、ポートフォリオとしてWebサイトを作ったという方は、下記も参考にしてみてくださいね。
-
-
【必見】フリーランスに必要な営業方法！ 未経験でも怖くない！
続きを見る
今回は以上です。