記事内に商品プロモーションを含む場合があります
こんな読者さんの問いにお答えします。
ドメイン、サーバーって何？
まずポートフォリオ（Webサイト）を公開するには「ドメイン」と「サーバー」が必要です。
それぞれが何なのかと言うと、よく例えられるのが↓こんな感じ。
- ドメインが「住所」
- サーバーが「土地」
加えるなら、その他書いたコード（htmlやCSS）や、画像ファイルなどが「家」にあたります。
掘り下げるとキリがないので、これくらいの認識で良いです。
エックスサーバーをオススメする理由
ところで、サーバーを提供するレンタルサーバー会社にはいろんなところがありますが、その中でも以下の理由でエックスサーバーをお勧めしています。
- エンジニア界隈で評判が良い
- 動作が安定している
- 他のサーバーよりも動作が速い
- 管理画面が操作しやすい
Web制作会社でエンジニアをしていたとき、ベテランエンジニアからエックスサーバーをオススメされました。
その当時はさくらサーバーを使っていたのですが、実際に乗り換えてみると、動作が速い。それ以来、「どこのサーバーがオススメですか？」と聞かれる度にエックスサーバーと答えています。
後者に移設して3年ほどになりますが、サーバーが落ちて、webサイトが見れないなどの不具合などなく安定している印象です。
これらの理由からエックスサーバーをオススメします。
では、実際にドメインとサーバーの契約手順を見ていきましょう（所要時間:約60分）
【手順1】事前に取得したいドメインを考えておく
見出しにもあるように、取得したいドメインを考えておきます。
ドメインは早い者勝ちで、同じものを誰かが使用していると取得できません。
本記事では、engineer-code.comというドメインを取得したいとして進めます。
ちなみにドメインは年間で2000円程度ですが、エックスサーバーでは、レンタルサーバーと同時契約で永年無料になることが多いです。
下記キャンペーンがここ数年継続しています。
【手順2】エックスサーバーのアカウントを取得する（ドメイン・サーバー契約）
次にエックスサーバーのアカウントを取得しましょう。
（ここで一気にドメインとサーバー契約まで進めます）
ここからエックスサーバーのWebサイトに飛びます。
ざっとエックスサーバーの内容を確認して、下の方にある「お申し込みはこちら」をクリックします。
初めてご利用のお客様の「10日間無料お試し 新規お申込み」を押します。
※のちほど、WordPress一括設定無料オプションを指定するので、実際は無料期間はありません
申し込み内容を入力する
サーバーIDはそのままで、プランはX10で充分です。
WordPressクイックスタートの無料オプションですが、後々のことを考えて設置することをオススメします。
※これから副業したり、転職を考えている方はWordPressはふれておいた方が有利です
無料オプションにチェックを入れると、確認画面が表示されるので「確認しました」をクリックします。
すると入力欄が増えるので、指定された内容に沿って入力します。
サーバー契約期間を選択する
支払いが関わってくる箇所なので、ここから細かく見ていきます。
「サーバー契約期間」は、始めは12ヶ月で16,500円が指定されていますが、初期費用を抑えたい場合は、最低の3ヶ月にします（もちろん12ヶ月やそれ以上でもOK）。
空きドメインを確認する
次に取得したいドメイン（住所）を入力します。
冒頭でもお伝えした通り、既に使われているドメインは取得できないので、ここでチェックします。
今回、本記事で取得したいのはengineer-code.comでしたので入力します。
すると、まだ使用されていないようで「取得可能！」と表示されました。
.com以外にも.net .org .info .bizなど他にも種類があるので必要に応じて選択してください。
ちなみに、使用されているものを選ぶと「すでに使用されているドメイン名です」と表示されるので、.netのところを変えたりするなどして、取得できるものにしてください。
ここでは、まだ取得されていない.comで今回は進めます。
WordPress情報を入力する
続いて、WordPress情報の入力です。
ここは後からでも変更可能なので、適当なものを入力しておきます。
入力後、「Xserverアカウントの登録へ進む」をクリックします。
エックスサーバーのアカウント情報を入力する
次はアカウント情報入力画面に進みます。
必要事項を入力し、「利用規約」「個人情報に関する公表事項」に同意するにチェックを入れます。
チェックを入れると「次へ進む」ボタンが表示されるのでクリックします。
確認コード入力画面になるので、メールボックスを確認し、メールの本文内にある6ケタのコードを入力してください。
入力内容を確認し、問題なければ「SMS・電話認証へ進む」をクリックします。
次に取得する電話番号、取得方法を選択したら、「認証コードを取得する」をクリックしましょう。
続いてスマホにコードが届いているので確認し、コードを入力します。
これで、エックスサーバーのアカウント取得が完了しました。
下記画像のような画面に遷移すれば、エックスサーバーのアカウントを取得し、ドメインとサーバーの契約が無事に完了となります。
（※重要）届いたメールを保管する
アカウント取得、またドメイン・サーバー契約と同時にメールが3通届きます。
これらのメールは後に、FTPソフトなどでサーバーにアクセスする際必要になりますので、必ず、重要メールとしてスター付きにするなどにし、保管しておいてください。
【手順3】ドメインとサーバーがひも付くまで待機する
ひとまず、ここまでお疲れ様でした。
先ほど取得したドメイン（本記事では、engineer-code.com）にアクセスしても、以下のような画面になり、「無効なURL」と表示されます。
これはドメインとサーバーが、まだひもづいていないためです。
これが数十分経つと、以下のような画面になります。
（ちなみにこれはWordPressの初期状態のトップページです）
このようになればドメインとサーバーがひも付いた状態なので、ここから自由にサイト制作をしたり、編集したりすることが可能となります。
【手順4】ファイルをアップして公開する
ここまで来れば、簡単です。
あとはコーディングしたHTML・CSSや画像ファイルなどをサーバーにアップロードします。
ポートフォリオページの構成
今回ポートフォリオをアップするサイトの構成を以下のようにするとします。
engineer-code.com
└ portfolio
├ works1
├ works2
└ works3
それぞれの役割は以下の通りです。
engineer-code.com
└ portfolio（ポートフォリオのまとめ）
├ works1（作品）
├ works1（作品）
└ works1（作品）
ファイルをアップしよう
まず、エックスサーバー管理画面にてログインします。
ログインしたら、「ファイル管理」画面に行きます。
（ファイル管理画面にてファイルをアップします）
自身のドメインの階層（ここではengineer-code.com）に入っていきます。
ドメインをダブルクリックします。
次にpublic_htmlの中に入ります。ダブルクリックします。
public_htmlの中に入ったら、次は画面上部にある「新規フォルダ」をクリックします。
（現在の階層は左サイドバーで確認できます）
ここで新たなportfolioという階層を作ります。
テキストを打ったら、「作成」を押しましょう。
すると、public_html階層内に新しくportfolio階層ができました。
（このあたりは普段使っているパソコンと同じ理屈です）
さらにportfolioをクリックして、中に入ります。
portfolioディレクトリの中に入ったら、さらにwork1、work2と階層を作りたいので、同様に上部にある「新規フォルダ」をクリックします。
work1を名付け、「作成」を押します。
同じようにwork2、work3階層も作ります。
作ると以下のようになります。
では、早速work1にファイルを入れるために中に入りましょう。ダブルクリックします。
work1に入ったら、今度は画面上部の「アップロード」をクリックします。
（ここで初めてファイルがアップ可能となります）
ドラッグ&ドロップでファイルをアップします。
ファイルが全てアップできたら、実際に画面を確認してみましょう！
以上がドメイン、サーバーの契約からポートフォリオ公開までの手順です。
まとめ
ここまで以下のことをお伝えしてきました。
- ドメイン、サーバーって何？
- エックスサーバーをオススメする理由
- 【手順1】事前に取得したいドメインを考えておく
- 【手順2】エックスサーバーのアカウントを取得する
- 【手順3】ドメインとサーバーがひも付くまで待機する
- 【手順4】ファイルをアップして公開する
これでお客様や転職先の企業にポートフォリオを見てもらうことができます。
ポートフォリオは案件を受注したり、転職活動でスキルを見てもらうのに必要です。
ここから先は積極的にアプローチし、案件や企業からの内定を獲得していってください。
