こんにちは！フリーランスWebディレクターのショーへーです。
この記事では初心者コーダーの方向けに、ローカル環境で作った静的ファイル（HTML/CSS/jQueryなど）を、サーバー上にアップロードするまでの全工程を解説してきます。
これまでローカル環境でしか見れなかったサイトが、ついにネット上で世界中に公開されるわけです。
Twitterでシェアするときも、URLを共有するだけであなたのサイトを見てもらえます！楽しみですね( ^ω^ )
またLP制作を副業とする場合、基本的にお客さんはサーバーにファイルをアップロードする方法なんて知りません。
作業者であるあなたがサーバー上にサイトをアップロードして公開してあげる必要がありますので、しっかり解説についてきて下さいね！
なお
- 「Web制作を基礎からしっかり学びたい」
- 「Web制作会社に転職したい」
- 「フリーランスに挑戦したい」
という方向けにオンラインスクールも運営してますので、よかったら見てみてください👍
それでは行ってみましょう。
index
サーバーを契約しよう【オススメはエックスサーバー】
まずは作ったHTMLファイル達をアップロードするためのサーバーを契約していきます。
そもそも『サーバーとは』『ドメインとは』もググって欲しいんですが、例えるならば
- サーバー ＝ 土地
- ドメイン ＝ 住所登録
- 家 ＝ HTML等のファイル
です。
誰かを家に呼びたくても、土地がなければ家は建たないし、住所登録しておかなければ場所がわからず誰も来てくれません。
というわけで、まずはサーバー/ドメインから契約していきましょう！
定番ですが、初心者にオススメなのは断トツでエックスサーバーです。
✔︎エックスサーバーの良いところ
- 管理画面が使いやすい
- 信頼できる安定性と速度
- 使い倒せる大容量（最安でも200G）
- マルチドメイン無制限
- FTPアカウントも無制限
- 自動バックアップが付いている
- WordPressのインストールも簡単
- 無料で簡単にSSL化（https化）できる
- 永久無料のドメインがもらえる（※キャンペーン中）
細かく上げるとまだありますが、初心者〜上級者まで使いやすいコスパの良いレンタルサーバーってことです。
僕も、このブログや開発に使うテスト環境はエックスサーバーを使ってます。
さっそく公式ページから、申し込みを進めていきましょう↓
申し込み〜キャンペーンドメインの取得まで
まずサイドバーの『お申し込みはこちら』をクリック。
『新規お申し込み』をクリック。
①は実際には使わない初期ドメインですので、申し込み可能ならどんな文字列でもOKです。
②は最も安い『X10』プランで十分。
そのほかは住所・名前・連絡先など、会員情報を入力していきます。
全て入力し終わったら『お申し込み内容の確認』→『お申し込みをする』
申し込みが完了すると、すぐアカウント設定完了の通知メールが届くはずです。
インフォパネルのリンクをクリックし、メールに記載してある「会員ID」「パスワード」でエックスサーバーの管理画面にログインしましょう。
無事に管理画面にログインできたと思います。
ですが10日間の『お試し期間中』のユーザーは、ドメインの設定ができません。
ポートフォリオは独自ドメインで運用したいですし、DAY21〜23では『取得したドメインのサブドメインにビジネスLPをアップする』ところまで進めていきますので、まず料金の支払いを済ませます。
①をチェックし、②でお好きな契約期間を選択してください（長期で契約した方がお得です）。
期間を選択したら、『お支払い方法を選択』に進み、支払いを完了させましょう。
支払いが完了したら、次は『キャンペーンドメインの取得』です。
新規でサーバーを契約する際、エックスサーバーを選ぶ大きな理由の一つが、永久無料のドメインが2つ付いてくるからです。
現在はちょうどキャンペーン期間中ですので、普通は年間3000円ほどかかる「.com」ドメインも無料でもらえます。
これから長く使っていくドメインですので、気に入るドメインを選んでくださいね( ^ω^ )
もし手順がわからない方は、公式のキャンペーンドメインのお申し込み手順を参考にどうぞ！
キャンペーンドメインがなかった場合
時期によっては、ドメインプレゼントキャンペーンが実施されていないことがあります。
※その場合はだいたい「初期費用半額」などの別キャンペーンが実施されてます。
この場合はドメインは自分で取得する必要がありますが、どこで契約するのがおトクなんでしょうか。
結論から言うと、エックスサーバーの姉妹サービスであるエックスドメイン
でOKです。
念のため、最も有名なドメイン取得サービス「お名前.com
」との比較を載せておきます。
↓お名前.comで「30days-trial.com」というドメインを取得しようとした場合 
↓エックスドメインで「30days-trial.com」というドメインを取得しようとした場合
というわけで、1年目・2年目以降の料金ともエックスドメインの方が安いです。
またエックスサーバーの姉妹サービスなので、会員情報を二重に登録する手間が省けるというメリットもあります。
ドメインによってはお名前の方が安かったりもしますが、言っても1年で数百円の違いなので、ぶっちゃけ誤差かと(￣▽￣;)
めんどくさいのが嫌ならエックスドメインでサクサク進めてしまっていいと思います。
✔︎オススメのドメイン取得サービス
ドメインの設定
キャンペーンドメインも取得できたら、次は『ドメイン設定』です。
※エックスドメイン等で契約した方は、キャンペーンドメインを「契約ドメイン」と読み替えてください。
サーバーパネルに移動して、右上の『ドメイン設定』をクリックします。
タブを『ドメイン設定追加』に切り替え、先ほど取得したキャンペーンドメインを入力しましょう！
入力したら、『確認画面へ進む』→『追加』でOKです。
これでドメインも設定できました👍
あっという間ですね！
FTPクライアントソフトを使って、サイトを公開しよう
さて、サーバーとドメインの設定ができたので、いよいよHTMLファイル達をサーバーへアップロードしていきます。
この作業が終われば、ついにサイト公開です！
まずはファイルのアップロードに必要な『FTPクライアントソフト』をダウンロードしていきましょう。
初心者にオススメのFTPソフト【Cyberduck】
初心者にオススメのFTPクライアントソフトが、Cyberduckです。
他にも有名どころだと『FileZilla』などがありますが、シンプルな機能とUIでわかりやすいのはCyberduck。
こちらの公式サイトにアクセスし、画面左上の「Download」ボタンをクリックしてください。
Mac / Windows それぞれ選んでダウンロードしましょう！
FTP接続＆ファイルのアップロード
Cyberduckのダウンロードが終わったら、エックスサーバーの申し込み完了メールに戻ります。
このメールに記載されている
- FTPホスト
- FTPユーザー
- FTPパスワード
を、Cyberduckに入力しましょう。
左上の『新規接続』を押し、先ほどの①②③を入力したら『接続』を押してください。
こんなフォルダが出てきたら、ログインに成功した証です。
ドメイン名のフォルダがあるはずなので、そちらを開いてください。
次に、『public_html』フォルダを開きます。
このフォルダ直下がドメインのルートディレクトリです。
初期状態ではファイルがあるはずなので、それらを全て削除します。
ローカル環境にあるサイトのHTML / CSS / 画像フォルダなどを、『public_html』の中へとドラッグ＆ドロップします。
最後に、表示させたいHTMLファイルのファイル名を「index.html」に変更してください。
これで全ての準備が完了です！！
さっそく追加したドメインをChromeで開き、サイトが表示されてるか確認しましょう！！
おめでとうございます＼(^o^)／
これでサイトのリリースは完了です！
ちなみに、Cyberduckで一度接続したサーバーへは履歴からも接続が可能です。
ソフト上部の「時計マーク」を押すと、過去に接続したサーバーの一覧が表示されますので、接続したいサーバーをクリックするだけです( ^ω^ )
リリース報告のその前に！Twitterカードを設定しよう
ここまでの手順をクリアされた方は、無事にサイトが公開できているはずです。
ツイートで友達にも報告したいところだと思いますが、最後にもう一手間！
Twitterでシェアされたサイトを見ると、ほとんど画像が表示されてますよね？
↑こういうのです。Twitterカードってヤツですね！
どうせポートフォリオを公開するなら、Twitterカード付きで見栄えよく公開したいですよね？
サルワカでその設定がわかりやすく解説されてるので、こちらを参考に設定してください！
【2018年版】Twitterカードとは？使い方と設定方法まとめ
終わったら、もう一度修正したindex.htmlをアップロードし、今度こそ自分のサイトを公開しましょう( ^ω^ )
まとめ：初心者にはエックスサーバー＋Cyberduckがオススメ
以上、サーバー契約からFTPでのサイト公開までの解説でした。
エックスサーバーもCyberduckも使いやすいので、ぜひ記事を参考に使ってみてください。
余談ですが、最近はどのレンタルサーバーにもWordPressの「簡単インストール」機能がついているので、Webエンジニアでもない限り「サーバーの中のフォルダ構成」や「アップロードの手順」なんて知る機会が必要ありません。
でもFTP接続でファイルのアップロード・編集・削除ができると、自分のブログテーマを部分的にカスタマイズしたり、画像を直接差し替えたり、、といったこともやりやすくなります。
周りが数千円で外注するようなちょっとした修正作業を、自分でできたらお得ですよね。
（※ただしその際には間違ってファイルを消さないように十分注意してくださいね‼️）
コーダーとしての副業だけでなく、私生活でも使える知識なので、Cyberduckの使い方はぜひマスターしておきましょう👍
それではまた！
