React/Next.jsの学習におすすめの本(参考書)を目的別に計4冊紹介!
ポートフォリオサイトを公開する方法
この記事は
「ポートフォリオサイトは作ったが、公開する方法がわからない…。初心者でも公開できる方法を解説してほしい!」
という方向けの記事です。
ポートフォリオサイトを世の中に公開しようとするも、方法がわからないという人は多いと思います。
本記事では、安価に「サーバー」を契約して、「ドメイン」を取得してポートフォリオサイトを公開する方法を解説します。
サイトの公開方法は、これからWeb業界に挑戦する人知っておいて損はないと思いますので、やさしく解説していきます!
- ポートフォリオサイトを公開する方法
- Step.0 ポートフォリオサイトを公開する前に
- Step.1 レンタルサーバーを契約する
- Step.2 ドメインを取得する
- Step.3 サーバーにドメインを設定する
- Step.4 SSLの設定をする
- Step.5 ファイルをアップロードしてサイトを公開する
- 最後に
Step.0 ポートフォリオサイトを公開する前に
ポートフォリオサイトを公開するのにかかる費用
レンタルサーバーの契約やドメインの取得するためには様々なサービスがありますが、本記事では「さくらのレンタルサーバ」でサーバーを契約し、「お名前.com」を取得する方法を解説します。
本サイトも同様の方法でサイトを公開しています。
ポートフォリオを公開するために必要なサーバー費用、ドメイン費用は下記のようになります。
費用 | 備考 | |
「さくらのレンタルサーバ」でレンタルサーバーの契約 | 524円(月額) | 無料期間14日間あり |
「お名前.com」でドメイン取得 | 約1000円(年額) | 初年度0円 |
さくらのレンタルサーバは月額524円、そしてドメインは年額約1000円でサイトを公開できます。
それぞれ無料期間がありますので、一度試してみてやめたくなったら解約することもできます。
それでは、ポートフォリオサイトの公開方法を解説していきます。
Step.1 「さくらのレンタルサーバ」でレンタルサーバーを契約する
レンタルサーバーの申し込み
手順①:さくらのレンタルサーバにアクセスして、画面右上の「お申し込み」を選択します。
手順②:「スタンダードプラン」を選択して、「お支払い方法の選択」へ進む。
個人サイトの規模であれば「スタンダード」プランで十分です!ブログの規模が大きくなった時はプランのグレードアップもできるので心配要りません。
手順③:「レンタルサーバだけ契約する」を選択して「お支払い方法の選択」へ進む。
今回はお名前.comでドメインを取得するので、さくらのレンタルサーバではドメインを取得しません。
手順④:メールアドレスを入力して、個人情報の取り扱いに同意し「会員登録のご案内メール」を受け取ります。
手順⑤:入力したメールアドレスに「案内メール」が送信されるので、URLから会員登録へ進みます。
手順⑥:さくらのインターネット会員情報を入力し、確認画面へ進みます。
「会員メニューパスワード」は会員メニューを開く際に必要になるので、メモしておきましょう。
「メールマガジンの受信設定」は不必要な方は「受け取らない」でOKです。
手順⑦:会員情報をメモし、会員登録を完了しましょう。
会員登録完了メールが届きますので、以下の会員登録情報をメモしておきましょう。後で「さくらのレンタルサーバ会員メニュー」へログインする際に必要になります。
・会員ID
・パスワード
お支払い方法の選択
手順①:「ご契約期間」と「お支払い方法」を選択し、「入力内容の確認」をクリックします。
長期契約すればするほど月額費用が低くなります。長く運用することが決まっていれば、長期契約がオススメです。
手順②:お申し込み内容を確認し「この内容で申し込む」をクリックします。
主に確認するべき箇所は「プラン名」と「請求金額」です。
問題なければ、規約の同意にチェックを入れて【この内容で申し込む】をクリックします。
手順③:お申し込み完了画面が出れば、レンタルサーバーの契約完了です!
Step.2 「お名前.com」でドメインを取得する
ドメインを取得するサービスは数多くありますが、本記事ではドメイン取得サービスでも最も有名なお名前.comでの取得方法を説明します。
ドメインの取得手順
手順①:お名前.comにアクセスして取得したいドメイン名を入力して「検索」をクリックします。
手順②:取得したいドメイン名が取得可能であれば、「お申込みへ進む」をクリックします。
すでに利用されているドメイン名であれば、別のドメイン名を検索します。
ドメインの登録費、更新費ともに「.com」が最も安いので「.com」で空いているドメインを探すことをおすすめします。
ドメインの種類による登録費、更新費についてもっと詳しく知りたい方はこちらから確認できます。
手順③:ドメインの使用用途について聞かれるので、上の【Webサイト・ブログ・メールで利用する】をクリックします。
手順④:お申し込み内容を確認して「次へ」をクリックします。
ここで注意すべき点は「レンタルサーバー」がお申し込み内容に追加されていることです。
初月度は無料となりますが、次月度から1,430円請求されますので、こちらは右端のゴミ箱アイコンを押して削除します。
手順⑤:個人情報を入力して【次へ進む】をクリックします。
「お名前ID」「パスワード」はログインするために必要になるのでメモしておきましょう。
手順⑦:お支払い方法を選択しましょう。
手順⑧:下にスクロールして、「さくらのレンタルサーバ」にチェックを入れて、「申込む」をクリックします。
取得したドメインと後に契約する「さくらのレンタルサーバ」のサーバーを紐づけるために必須です。
手順⑨:登録したメールアドレスに、確認用の認証コードが送信されるので、入力して【次へ】をクリックします。
手順⑩:申し込み完了!
この画面が表示されたら「お名前.com」でドメインの取得は完了です!
Step.3 サーバーにドメインを設定する
手順①:さくらのレンタルサーバ会員認証ページにアクセスして、会員メニューへログインします。
メモした「さくらのレンタルサーバ」の会員IDと、パスワードを入力してログインします。
手順②:「契約中のサービス一覧」から「コントロールパネルを開く」をクリックします。
手順③:コントロールパネルの左のメニューバーの【ドメイン/SSL】をクリックして、「ドメインの新規追加」をクリックします。
手順④:「他社で取得したドメインを移管せずに使う」をクリックします。
手順⑤:取得したドメインを入力して「追加」をクリック。(ドメインを入力する際に間違わないように注意!)
手順⑥:サーバーにドメインの設定完了!
ドメインのSSL設定
登録したドメインのSSL設定を行います。SSLはあなたのサイトを保護するために必要な設定です。
手順①:追加したドメインの右側の【SSL】をクリックして設定を進めます。
手順②:【登録設定を始める (SSL証明書の種類を選択)】をクリック。
手順③:「Let’s Encrypt(無料SSL)」の右側の【利用する】をクリックします。
手順④:「Let’s Encryptの利用ポリシーに同意する」にチェックを入れて【無料SSLを設定する】をクリックします。
手順⑤:SSL設定完了!
追加したドメインがインターネットへ反映されるまでに数時間から数日かかることがあるので、一度休憩しましょう!
Step.5 ファイルをアップロードしてサイトを公開する
手順①:コントロールパネルの左メニューから【ドメイン/SSL】をクリックして、ページを開き、取得したドメインの【設定】をクリックします。
手順②:「Web公開用フォルダ」へ、取得したドメイン名を入力します。
入力したら、下へスクロールして【保存】をクリックします。
手順③:「さくらのレンタルサーバ」のコントロールパネルの「ホーム」から【ファイルマネージャー】をクリックします。
手順④:右クリックを押して「表示アドレスへの操作」→「フォルダの作成」から公開用フォルダを作成します。
手順⑤:「Web公開用フォルダの設定」で入力したフォルダ名(私の場合は「foofoofoo.net」)を入力します。
手順⑥:作成したフォルダが表示されるのでダブルクリックして開きます。
手順⑦:右クリックを押して「表示アドレスへの操作」→「アップロード」からファイルをアップロードします。
「アップロードを開始」をクリックをしたらファイルのアップロードは完了です!
手順⑦:アドレスバーに、ドメイン名(foofoofoo.net)を入力してアクセスします。
アップロードしたファイルの内容が表示されていればOKです!
最後に
以上が、ポートフォリオサイトを公開する方法です。
- Step.1 レンタルサーバーを契約する
- Step.2 ドメインを取得する
- Step.3 サーバーにドメインを設定する
- Step.4 SSLの設定をする
- Step.5 ファイルをアップロードしてサイトを公開する
ポートフォリオを公開して、副業や転職活動に役立てましょう!