【独学6ステップ】Web制作のためのWordPress学習ロードマップ
ポートフォリオサイトを公開する方法【初心者向け】
「ポートフォリオサイトは作ったが、公開する方法がわからない…。初心者でも公開できる方法を解説してほしい!」
という方向けの記事です。
ポートフォリオサイトを世の中に公開しようとするも、方法がわからないという人は多いと思います。
本記事では、安価に「サーバー」を契約して、「ドメイン」を取得してポートフォリオサイトを公開する方法を解説します。
サイトの公開方法は、これからWeb業界に挑戦する人知っておいて損はないと思いますので、やさしく解説していきます!
ポートフォリオサイトを公開する方法
- ポートフォリオサイトを公開する方法
- ポートフォリオサイトを公開するのにかかる費用
- 「さくらのレンタルサーバ」でレンタルサーバーを契約する
- 「お名前.com」でドメインを取得する
- サーバーとドメインを紐づける
- ファイルをアップロードしてサイトを公開する
- 最後に
ポートフォリオサイトを公開するのにかかる費用
レンタルサーバーの契約やドメインの取得するためには様々なサービスがありますが、本記事では「さくらのレンタルサーバ」でサーバーを契約し、「お名前.com」を取得する方法を解説します。
本ブログも同様の方法でサイトを公開しています。
ポートフォリオを公開するために必要なサーバー費用、ドメイン費用は下記のようになります。
費用 | 備考 | |
「さくらのレンタルサーバ」でレンタルサーバーの契約 | 524円(月額) | 無料期間14日間あり |
「お名前.com」でドメイン取得 | 約1000円(年額) | 初年度0円 |
さくらのレンタルサーバは月額524円、そしてドメインは年額約1000円でサイトを公開できます。
それぞれ無料期間がありますので、一度試してみてやめたくなったら解約することもできます。
それでは、ポートフォリオサイトの公開方法を解説していきます。
「さくらのレンタルサーバ」でレンタルサーバーを契約する
お申し込み
まずは、さくらのレンタルサーバでサーバーの契約を行います!
右上の【お申し込み】をクリックして申し込みページへ移動します。
プランの選択
次にサーバーのプランを選択します。
個人ブログの規模であれば「スタンダードプラン」で十分です。ブログの規模が大きくなった時はプランのグレードアップもできるので心配要りません。
独自ドメインを取得するかの選択項目もありますが「レンタルサーバだけ契約する」を選択して【お支払い方法の選択】へ進みます。
会員登録のご案内メールを受け取る
サーバー費用の支払いに必要なので、会員登録ページへ促されます。
まずは、通知先メールアドレスにメールアドレスを入力して、個人情報の取り扱いに同意して、「会員登録のご案内メール」を受け取ります。
「会員登録ご案内メールを送信しました」という画面に遷移したら、入力したメールアドレスに「案内メール」が送信されるので、URLから会員登録へ進みます。
さくらのインターネット会員登録
「会員メニューパスワード」は会員メニューを開く際に必要になるので、メモしておきましょう。
「メールマガジンの受信設定」は不必要な方は「受け取らない」でOKです。
全て入力できたら確認画面へ進みます。
会員情報の確認画面へ遷移するので、全て問題なければ【会員登録完了】しましょう。
会員登録完了メールが届きますので、以下の会員登録情報をメモしておきましょう。後で「さくらのレンタルサーバ会員メニュー」へログインする際に必要になります。
・会員ID
・パスワード
お支払い方法の選択
会員登録が完了したら「お支払い方法の選択」画面へ遷移します。
まずは「ご契約期間」を選択します。
長期契約すればするほど月額費用が低くなりますが、僕はいつも1ヶ月単位で契約しています。
理由は、契約した時はブログを続けるか迷っていましたし、今もいつブログを辞めるかわからないからです。
ブログを長く続けることが決まっている場合は長期契約をおすすめします!
次に「お支払い方法」選択します。
お支払い方法は下記から選択することができます。
・クレジットカード
・銀行振込
・請求書払い
「ご契約期間」と「お支払い方法」を入力し終えたら【入力内容の確認】をクリック
お申し込み内容の確認
お申し込み内容のを確認します。
主に確認するべき箇所は「プラン名」と「請求金額」です。
問題なければ、規約の同意にチェックを入れて【この内容で申し込む】をクリックします。
サーバーの契約完了!
この画面が表示されたら「さくらのレンタルサーバ」でのサーバーの契約は完了です!
「お名前.com」でドメインを取得する
取得したいドメインを検索
まずは、お名前.comにアクセスしてドメインを取得しましょう!
【取得希望の文字列を入力】に希望のドメイン名を入力して【検索】をクリックします。
始めてドメインを取得するのであればドメインの種類は「.com」でOKです。
申し込み
◯印が表示されているドメインは取得可能です。
また、ドメインの種類によって、ドメインの登録費が異なります。
ドメインの登録費、更新費ともに「.com」が最も安いので「.com」で空いているドメインを探すことをおすすめします。
ドメインの種類による登録費、更新費についてもっと詳しく知りたい方はこちらから確認できます。
希望するドメインを選択して【お申し込みへ進む】をクリックします。
ドメインの使用用途について聞かれるので、上の【Webサイト・ブログ・メールで利用する】をクリックします。
お申し込み内容の確認(重要)
お申し込み内容が表示されるので、確認します。
ここで注意すべき点は「レンタルサーバー」がお申し込み内容に追加されていることです。
初月度は無料となりますが、次月度から1,430円請求されますので、こちらは右端のゴミ箱アイコンを押して削除します。
商品がドメインのみになったことが確認できたらOKです。
右側の、メールアドレス登録と新規パスワード設定を入力して【次へ】をクリックし、進みます。
個人情報の入力
お名前.comのアカウントを作るために個人情報を入力して【次へ進む】をクリックします。
「お名前ID」「パスワード」はログインするために必要になるのでメモしておきましょう。
お支払い方法の選択
お支払い方法は下記から選択することができます。
・クレジットカード
・コンビニ
・銀行振込
・請求書
【申込む】をクリックする前に、下にスクロールして、「さくらのレンタルサーバ」にチェックを入れます。
これは、取得したドメインと後に契約する「さくらのレンタルサーバ」のサーバーを紐づけるために必須です。
ここまで入力できましたら、右の【申込む】をクリックします。
メールアドレスの有効性確認
登録したメールアドレスに、確認用の認証コードが送信されるので、入力して【次へ】をクリックします。
ドメインの取得完了!
この画面が表示されたら「お名前.com」でドメインの取得は完了です!
サーバーとドメインを紐づける
「さくらのレンタルサーバ」の会員メニューへログイン
さくらのレンタルサーバ会員認証ページへアクセスします。
メモした「さくらのレンタルサーバ」の会員IDと、パスワードを入力してログインします。
「さくらのレンタルサーバ」のコントロールパネルを開く
会員メニューページが開きます。
このページで、会員情報や、契約中のサービスを確認することができます。
コントロールパネルを開くために左のメニューバーから【契約中のサービス一覧】をクリックします。
今回契約した「さくらのレンタルサーバ スタンダード」の【コントロールパネルを開く】をクリックします。
「さくらのレンタルサーバ」のコントロールパネルが開きます!
サーバーに取得したドメインを追加する
コントロールパネルの左のメニューバーの【ドメイン/SSL】をクリックして、「ドメインの新規追加」をクリックします。
ドメインの追加する方法を選択できます。
今回は一番下の「他社で取得したドメインを移管せずに使う」をクリック。
下記画像の赤枠に取得したドメインを入力して【追加】をクリック。(ドメインを入力する際に間違わないように注意!)
取得したドメインが、サーバーに追加されます。
これでサーバーとドメインの紐付けは完了です!
ドメインのSSL設定
登録したドメインのSSL設定を行います。
SSLはサイトを保護するために必要な設定です。
追加したドメインの右側の【SSL】をクリックして設定を進めます。
【登録設定を始める】をクリック。
「Let’s Encrypt(無料SSL)」の右側の【利用する】をクリックします。
「Let’s Encryptの利用ポリシーに同意する」にチェックを入れて【無料SSLを設定する】をクリックします。
この画面が表示されたらSSL設定完了です!
追加したドメインがインターネットへ反映されるまでに数時間から数日かかることがあるので、一度休憩しましょう!
ファイルをアップロードしてサイトを公開する
Web公開用フォルダの設定
再びコントロールパネルの左メニューから【ドメイン/SSL】をクリックして、ページを開き、取得したドメインの【設定】をクリックします。
ドメインの設定画面が開きますので「Web公開用フォルダ」に取得したドメインのファイルを入れるためのフォルダを作成します。
「Web公開用フォルダ」へ、取得したドメイン名を入力します。
入力したら、下へスクロールして【保存】をクリックします。
ファイルマネージャーを開く
「さくらのレンタルサーバ」のコントロールパネルの「ホーム」から【ファイルマネージャー】をクリックします。
公開用フォルダの作成
上記のような画面に遷移します。
右クリックを押して「表示アドレスへの操作」→「フォルダの作成」から公開用フォルダを作成します。
作成するフォルダの名前を聞かれるので「Web公開用フォルダの設定」で入力したフォルダ名(私の場合は「foofoofoo.net」)を入力します。
作成したフォルダをダブルクリック
作成したフォルダが表示されるのでダブルクリックします。
フォルダにファイルをアップロード
右クリックを押して「表示アドレスへの操作」→「アップロード」からファイルをアップロードします。
「ファイル追加」をクリックし、html、css、jsなどのファイルを選択します。
その後、「アップロードを開始」をクリックをしたらファイルのアップロードは完了です!
ポートフォリオサイトの確認
アドレスバーに、ドメイン名(foofoofoo.net)を入力してアクセスします。
アップロードしたファイルの内容が表示されていればOKです!
ここまでお疲れ様でした!
最後に
以上が、ポートフォリオサイトを公開する方法です。
手順は少し長いですが、これからWeb業界へ挑戦しようとしている方には知っていて損は無い知識です!
参考になりましたら幸いです!