CODE

【初心者コーダー向け】現役Webエンジニアが教えるサーバー契約+FTPでサイト公開までの全行程まとめ

こんにちは!フリーランスWebディレクターのショーへーです。

この記事は、『未経験からコーディングの副業で月5万を稼ぐためのステップ』の解説記事です。

魔法じゃないので努力は必要ですが、未経験の方でも30日間で達成可能なコーディングカリキュラムをまとめています。

あわせて読みたい
【30日】未経験からコーディングの副業で月5万を稼ぐためのステップ副業としてHTMLのコーディングで月5万を稼ぐためのステップを具体的に解説しています。魔法じゃないので努力は必要ですが、未経験の方でも30日間で達成可能です。...

これからコーディングを勉強してみようかな…と思われてる方は、ぜひこちらからどうぞ!

ポートフォリオを公開しよう

この記事では、初心者コーダーの方向けに、ローカル環境で構築したポートフォリオサイト(HTML/CSSで作成)を、サーバー上にアップロードするまでの全工程を解説してきます。

これまでローカル環境でしか見れなかったサイトが、ついにネット上で世界中に公開されるわけです。

Twitterでシェアするときも、URLを共有するだけであなたのサイトを見てもらえます!楽しみですね( ^ω^ )

またLP制作を副業とする場合、基本的にお客さんはサーバーにファイルをアップロードする方法なんて知りません。

作業者であるあなたがサーバー上にサイトをアップロードして公開してあげる必要がありますので、しっかり解説についてきて下さいね!

それでは行ってみましょう。

 

サーバーを契約しよう【オススメはエックスサーバー】

まずは作ったポートフォリオをアップロードするためのサーバーを契約していきます。

そもそも『サーバーとは』『ドメインとは』もググって欲しいんですが、例えるならば

  • サーバー = 土地
  • ドメイン = 住所登録
  • 家 = HTML等のファイル

です。

誰かを家に呼びたくても、土地がなければ家は建たないし、住所登録しておかなければ場所がわからず誰も来てくれません。

というわけで、まずはサーバー/ドメインから契約していきましょう!

定番ですが、初心者にオススメなのは断トツでエックスサーバーです。

✔︎エックスサーバーの良いところ

  • 管理画面が使いやすい
  • 信頼できる安定性と速度
  • 使い倒せる大容量(最安でも200G)
  • マルチドメイン無制限
  • FTPアカウントも無制限
  • 自動バックアップが付いている
  • WordPressのインストールも簡単
  • 無料で簡単にSSL化(https化)できる
  • 永久無料のドメインがもらえる(※キャンペーン中)

細かく上げるとまだありますが、初心者〜上級者まで使いやすいコスパの良いレンタルサーバーってことです。

僕も、このブログや開発に使うテスト環境はエックスサーバーを使ってます。

 

さっそく公式ページから、申し込みを進めていきましょう↓

申し込み〜キャンペーンドメインの取得まで

まずサイドバーの『お申し込みはこちら』をクリック。

『新規お申し込み』をクリック。

①は実際には使わない初期ドメインですので、申し込み可能ならどんな文字列でもOKです。

②は最も安い『X10』プランで十分

そのほかは住所・名前・連絡先など、会員情報を入力していきます。

全て入力し終わったら『お申し込み内容の確認』→『お申し込みをする』

申し込みが完了すると、すぐアカウント設定完了の通知メールが届くはずです。

インフォパネルのリンクをクリックし、メールに記載してある「会員ID」「パスワード」でエックスサーバーの管理画面にログインしましょう。

無事に管理画面にログインできたと思います。

ですが10日間の『お試し期間中』のユーザーは、ドメインの設定ができません

ポートフォリオは独自ドメインで運用したいですし、DAY21〜23では『取得したドメインのサブドメインにビジネスLPをアップする』ところまで進めていきますので、まず料金の支払いを済ませます。

①をチェックし、②でお好きな契約期間を選択してください(長期で契約した方がお得です)。

期間を選択したら、『お支払い方法を選択』に進み、支払いを完了させましょう。

支払いが完了したら、次は『キャンペーンドメインの取得』です。

新規でサーバーを契約する際、エックスサーバーを選ぶ大きな理由の一つが、永久無料のドメインが1つ付いてくるからです。

現在はちょうどキャンペーン期間中ですので、普通は年間3000円ほどかかる「.com」ドメインも無料でもらえます。

これから長く使っていくドメインですので、気に入るドメインを選んでくださいね( ^ω^ )

もし手順がわからない方は、公式のキャンペーンドメインのお申し込み手順を参考にどうぞ!

 

ドメインの設定

キャンペーンドメインも取得できたら、次は『ドメイン設定』です。

サーバーパネルに移動して、右上の『ドメイン設定』をクリックしてください。

 

タブを『ドメイン設定追加』に切り替え、先ほど取得したキャンペーンドメインを入力しましょう!

入力したら、『確認画面へ進む』→『追加』でOKです。

これでドメインも設定できました👍

あっという間ですね!

 

FTPクライアントソフトを使って、サイトを公開しよう

さて、サーバーとドメインの設定ができたので、いよいよポートフォリオのファイル達をサーバーへアップロードしていきます。

この作業が終われば、ついにサイト公開です!

まずはファイルのアップロードに必要な『FTPクライアントソフト』をダウンロードしていきましょう。

 

初心者にオススメのFTPソフト【Cyberduck】

初心者にオススメのFTPクライアントソフトが、Cyberduckです。

他にも有名どころだと『FileZilla』などがありますが、シンプルな機能とUIでわかりやすいのはCyberduck。

こちらの公式サイトにアクセスし、画面左上の「Download」ボタンをクリックしてください。

https://cyberduck.io/

Mac / Windows それぞれ選んでダウンロードしましょう!

 

FTP接続&ファイルのアップロード

Cyberduckのダウンロードが終わったら、エックスサーバーの申し込み完了メールに戻ります。

このメールに記載されている

  1. FTPホスト
  2. FTPユーザー
  3. 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の使い方はぜひマスターしておきましょう👍

それではまた!