2019/9/28こんにちは!フリーランスWebディレクターのショーへーです。この記事は、『未経験からコーディングの副業で月5万を稼ぐためのステップ』の解説記事です。魔法じゃないので努力は必要ですが、未経験の方でも30日間で達成可能なコーディングカリキュラムをまとめています。【30日】未経験からコーディングの副業で月5万を稼ぐためのステップ副業としてHTMLのコーディングで月5万を稼ぐためのステップを具体的に解説しています。魔法じゃないので努力は必要ですが、未経験の方でも30日間で達成可能です。まとめ:初心者にはエックスサーバー+Cyberduckがオススメポートフォリオを公開しようこの記事では、初心者コーダーの方向けに、ローカル環境で構築したポートフォリオサイト(HTML/CSSで作成)を、サーバー上にアップロードするまでの全工程を解説してきます。これまでローカル環境でしか見れなかったサイトが、ついにネット上で世界中に公開されるわけです。)またLP制作を副業とする場合、基本的にお客さんはサーバーにファイルをアップロードする方法なんて知りません。作業者であるあなたがサーバー上にサイトをアップロードして公開してあげる必要がありますので、しっかり解説についてきて下さいね!それでは行ってみましょう。サーバーを契約しよう【オススメはエックスサーバー】まずは作ったポートフォリオをアップロードするためのサーバーを契約していきます。HTML等のファイルです。誰かを家に呼びたくても、土地がなければ家は建たないし、住所登録しておかなければ場所がわからず誰も来てくれません。いうわけで、まずはサーバー/ドメインから契約していきましょう!定番ですが、初心者にオススメなのは断トツでエックスサーバーです。無料で簡単にSSL化(https化)できる永久無料のドメインがもらえる(※キャンペーン中)細かく上げるとまだありますが、初心者〜上級者まで使いやすいコスパの良いレンタルサーバーってことです。僕も、このブログや開発に使うテスト環境はエックスサーバーを使ってます。申し込み〜キャンペーンドメインの取得までまずサイドバーの『お申し込みはこちら』をクリック。『新規お申し込み』をクリック。1は実際には使わない初期ドメインですので、申し込み可能ならどんな文字列でもOKです。2は最も安い『X10』プランで十分。会員情報を入力していきます。申し込みが完了すると、すぐアカウント設定完了の通知メールが届くはずです。インフォパネルのリンクをクリックし、メールに記載してある「会員ID」「パスワード」でエックスサーバーの管理画面にログインしましょう。無事に管理画面にログインできたと思います。10日間の『お試し期間中』のユーザーは、ドメインの設定ができません。ポートフォリオは独自ドメインで運用したいですし、DAY21〜23では『取得したドメインのサブドメインにビジネスLPをアップする』ところまで進めていきますので、まず料金の支払いを済ませます。1をチェックし、2でお好きな契約期間を選択してください(長期で契約した方がお得です)。期間を選択したら、『お支払い方法を選択』に進み、支払いを完了させましょう。支払いが完了したら、次は『キャンペーンドメインの取得』です。新規でサーバーを契約する際、エックスサーバーを選ぶ大きな理由の一つが、永久無料のドメインが1つ付いてくるからです。現在はちょうどキャンペーン期間中ですので、普通は年間3000円ほどかかる「.com」ドメインも無料でもらえます。時期によっては、ドメインプレゼントキャンペーンが実施されていないことがあります。※その場合はだいたい「初期費用半額」などの別キャンペーンが実施されてます。この場合はドメインは自分で取得する必要がありますが、どこで契約するのがおトクなんでしょうか。結論から言うと、エックスサーバーの姉妹サービスであるエックスドメインでOKです。念のため、最も有名なドメイン取得サービス「お名前.com」との比較を載せておきます。↓エックスドメインで「30days-trial.com」というドメインを取得しようとした場合というわけで、1年目・2年目以降の料金ともエックスドメインの方が安いです。エックスサーバーの姉妹サービスなので、会員情報を二重に登録する手間が省けるというメリットもあります。̄;)めんどくさいのが嫌ならエックスドメインでサクサク進めてしまっていいと思います。✔︎オススメのドメイン取得サービス格安ドメイン名取得サービス『エックスドメイン』ドメインの設定キャンペーンドメインも取得できたら、次は『ドメイン設定』です。※エックスドメイン等で契約した方は、キャンペーンドメインを「契約ドメイン」と読み替えてください。サーバーパネルに移動して、右上の『ドメイン設定』をクリックします。タブを『ドメイン設定追加』に切り替え、先ほど取得したキャンペーンドメインを入力しましょう!入力したら、『確認画面へ進む』→『追加』でOKです。これでドメインも設定できました👍あっという間ですね!FTPクライアントソフトを使って、サイトを公開しようさて、サーバーとドメインの設定ができたので、いよいよポートフォリオのファイル達をサーバーへアップロードしていきます。この作業が終われば、ついにサイト公開です!まずはファイルのアップロードに必要な『FTPクライアントソフト』をダウンロードしていきましょう。初心者にオススメのFTPクライアントソフトが、Cyberduckです。他にも有名どころだと『FileZilla』などがありますが、シンプルな機能とUIでわかりやすいのはCyberduck。こちらの公式サイトにアクセスし、画面左上の「Download」ボタンをクリックしてください。それぞれ選んでダウンロードしましょう!FTP接続&ファイルのアップロードCyberduckのダウンロードが終わったら、エックスサーバーの申し込み完了メールに戻ります。このメールに記載されているFTPホストFTPユーザーFTPパスワードを、Cyberduckに入力しましょう。左上の『新規接続』を押し、先ほどの123を入力したら『接続』を押してください。こんなフォルダが出てきたら、ログインに成功した証です。ドメイン名のフォルダがあるはずなので、そちらを開いてください。次に、『public_html』フォルダを開きます。このフォルダ直下がドメインのルートディレクトリです。初期状態ではファイルがあるはずなので、それらを全て削除します。画像フォルダなどを、『public_html』の中へとドラッグ&ドロップします。最後に、表示させたいHTMLファイルのファイル名を「index.html」に変更してください。これで全ての準備が完了です!!さっそく追加したドメインをChromeで開き、サイトが表示されてるか確認しましょう!!おめでとうございます\(^o^)/これでサイトのリリースは完了です!ちなみに、Cyberduckで一度接続したサーバーへは履歴からも接続が可能です。)リリース報告のその前に!Twitterカードを設定しようここまでの手順をクリアされた方は、無事にサイトが公開できているはずです。ツイートで友達にも報告したいところだと思いますが、最後にもう一手間!Twitterでシェアされたサイトを見ると、ほとんど画像が表示されてますよね?↑こういうのです。)まとめ:初心者にはエックスサーバー+Cyberduckがオススメ以上、サーバー契約からFTPでのサイト公開までの解説でした。エックスサーバーもCyberduckも使いやすいので、ぜひ記事を参考に使ってみてください。余談ですが、最近はどのレンタルサーバーにもWordPressの「簡単インストール」機能がついているので、Webエンジニアでもない限り「サーバーの中のフォルダ構成」や「アップロードの手順」なんて知る機会が必要ありません。FTP接続でファイルのアップロード・編集・削除ができると、自分のブログテーマを部分的にカスタマイズしたり、画像を直接差し替えたり、、といったこともやりやすくなります。周りが数千円で外注するようなちょっとした修正作業を、自分でできたらお得ですよね。WebマーケターショーヘーWordPressを中心にWeb制作歴5年のWebエンジニアです。フリーランス歴は3年ほど。PHP・WordPress・Laravelが好きです。月間15万PVのフリーランス向けメディア「東京フリーランス」の運営、月間1000人以上が学ぶプログラミング学習カリキュラム「30DAYSトライアル」の作成、プログラミングスクールの講師なども勤めています。