Web制作

【エックスサーバー】ポートフォリオやWordPressサイトの公開方法【テスト環境にも使える!】

※ 当サイトではアフィリエイト広告を利用しています

ポートフォリオってどうやって公開するの?WordPressサイトも公開できる??
テストサーバー用意したいけどどうすればいいんだろう・・・
どっちもレンタルサーバーを契約すれば出来るよ!

当ブログではおすすめのレンタルサーバーと、それぞれのレンタルサーバーでの契約方法について解説しています。

上記はWordPressブログを始めたい人向けの記事ですが、ブログをやらなくてもWeb制作を仕事にするならレンタルサーバーの契約は必須です。

レンタルサーバーは以下のような場面で使います。

レンタルサーバーを契約して出来ること

  • ポートフォリオサイト公開(WordPressサイト含む)
  • テストサーバー作成
  • WordPressブログ開設

大きく分ければ『静的サイト(HTMLサイト)』『WordPressサイト』の2つになります。

コーディングやWordPressで仕事をしていくにはサーバーの契約は必須なので、まだサーバーの契約をしておらず先ほどの記事でエックスサーバーに決めた人は、こちらの記事を見ながらサーバーの契約は済ませてしまいましょう。

当記事の反響も頂いています。

4/3 12時まで実質半額!

今すぐサーバーを契約する

契約特典でドメイン永久無料!

WordPressブログの始め方』と書いてありますが、ブログをやる必要はありません。

 

コーディングの時給と作業効率を上げる!
2年間の実務で実際に使ったコードをまとめた『コーディング&WordPressメモまとめ集』をBrainで公開しています。
  • コピペで使えるWordPressの各テンプレート
  • 実務でよく使う見出し一覧
  • 実務でよく使うテキストのhoverアニメーション
  • 実務でよく使うボタン内の矢印9種類
  • Contact Form 7の色々・・・
などなど、他にもコピペで使えるコードがたくさん載せてあるので、時短=時給アップに繋がります。
さらに『コードのまとめ方が参考になった』というレビューも多数頂いているので、これを元に自分なりの"メモまとめ集"を作るという使い方も出来ます。
1,100部以上販売し、レビューは630件以上あるので、気になる方は以下のボタンからチェックしてみて下さい👇

1,100部突破🎉

商品ページはこちら!

2024年4月15日値上げ!

Webサイトとサーバーの関係とは?

ポートフォリオサイトの公開方法を解説していく前に、Webサイトの公開とサーバーの関係について理解しておきましょう。

Webサイトの公開に必要な3つの要素はこちらになります。

Webサイトの公開に必要な3つの要素

Webサイトの公開に必要な3つの要素

WordPressブログの場合は『ファイル』のところにWordPressもインストールしますが、ポートフォリオサイトやLPなどの静的サイト(HTMLサイト)の場合は以下のような手順で公開します。

  1. コーディング
  2. サーバー・ドメインを契約
  3. サーバーにコーディングしたファイルをアップロード
  4. SSL化・Basic認証・セキュリティ対策など

サーバーやドメインなどは初めて聞くとよく分からないと思いますが、コーディングやWordPressを仕事にするなら知っておく必要があります。

またサーバーやドメインの契約は基本的にはクライアント側の作業ですが、納品方法の1つに『サーバーへファイルのアップロード』というのがあります。

そこで実案件の前に自分でレンタルサーバーを借り、ポートフォリオサイトの公開ついでにサーバーなどの扱いに慣れておく事をおすすめします。

もしサーバーを扱ったことがなく、実務でよく分からないまま、

『間違ってファイルを削除して、取り返しが付かないことをしてしまった』

とは、なりたくありませんよね?

サーバーとドメインの契約は難しそうに見えますが、以下の記事通りに進めればサーバーの契約からWordPressのインストールまで簡単に出来ます。

あわせて読みたい
【エックスサーバー】WordPressブログの始め方を分かりやすく解説【初心者向け】
【エックスサーバー】WordPressブログの始め方を分かりやすく解説【初心者向け】

続きを見る

コーディングで仕事をしていくならWordPressも出来たほうが収入はアップするので、今すぐやらなくても自分のブログを持っておいてWordPressに慣れておいた方がいいかと思います。

実際に私はWordPress案件をやる前からWordPressブログを始めていました。

そしてそのおかげで初案件はWordPress案件でしたが、あたふたせずに済みました。

 

エックスサーバーでポートフォリオサイトを公開する方法

それでは本題に入っていきますが、サーバーの契約は先ほどご紹介した記事から済んでいるとして解説を進めていきます。

まずはエックスサーバーのコントロールパネルを開くために、サインアップ画面からログインします(サーバーIDとサーバーパスワードが必要)

≫ ファイルマネージャにログイン

こちらがファイルマネージャの画面です。

エックスサーバー:ファイルマネージャ

エックスサーバー:ファイルマネージャ

そして『.xsrv.jp』というのが初期ドメインになります。

エックスサーバー:ファイルマネージャ(初期ドメイン)

エックスサーバー:ファイルマネージャ(初期ドメイン)

このフォルダを開いてみるとこのようになっています。

エックスサーバー:ファイルマネージャ(初期ドメインフォルダ内)

エックスサーバー:ファイルマネージャ(初期ドメインフォルダ内)

この『public_html』フォルダの中には『index.html』と『default_page.png』があります。

エックスサーバー:ファイルマネージャ(public_html内)

エックスサーバー:ファイルマネージャ(public_html内)

これは例えば初期ドメインが『junpei.xsrv.jp』であれば『http://junpei.xsrv.jp』にアクセスすればこちらが表示されるので、そのファイルとなります。

エックスサーバー:ファイルがアップロードされていない時のページ表示

エックスサーバー:ファイルがアップロードされていない時のページ表示

この2つのファイルは削除してOKですが削除したら元には戻せないので、気になる人は『ダウンロード』をクリックして保存しておきましょう。

エックスサーバー:ファイルマネージャ(ファイルのダウンロード)

エックスサーバー:ファイルマネージャ(ファイルのダウンロード)

同様に削除は『削除』ボタンから出来ます。

エックスサーバー:ファイルマネージャ(ファイルの削除)

エックスサーバー:ファイルマネージャ(ファイルの削除)

ファイルを削除してページを開くと、先ほどとは違うエラー画面が表示されますが特に気にしなくてOKです。

エックスサーバー:403ページ

エックスサーバー:403ページ

あとはここにポートフォリオサイトのファイルをドラッグ&ドロップで入れれば完了です。

ファイルをドラッグ&ドロップするとこちらが表示されます。

エックスサーバー:ファイルマネージャにファイルをドラッグ&ドロップ

エックスサーバー:ファイルマネージャにファイルをドラッグ&ドロップ

アップロードするファイルは『index.html』、アップロード先は『○○.xsrv.jp/public_html』になっているのでOKです。

そして一番下の『ファイル名の文字コード』ですが、デフォルトでは『SJIS』になっているので『UTF-8』にしてから『アップロード』をクリックしましょう。

エックスサーバー:アップロードファイル名の文字コード変更

エックスサーバー:アップロードファイル名の文字コード変更

ファイルは複数まとめてアップロード可能ですが、フォルダ単位でのアップロードは出来ないので『フォルダを作成してからその中にファイルをアップロード』となります。

エックスサーバー:ファイルマネージャ(新規フォルダ作成)

エックスサーバー:ファイルマネージャ(新規フォルダ作成)

そして『public_html』がこのようになりました。

エックスサーバー:ファイルマネージャ(静的サイトのファイルアップロード完了)

エックスサーバー:ファイルマネージャ(静的サイトのファイルアップロード完了)

そしてページが開ければ完了です(初期ドメインが『junpei.xsrv.jp』であれば『http://junpei.xsrv.jp』)

 

SSL化について

SSL化とは?

SSL化とは、インターネット上でのデータの通信(サイトとサイトを閲覧しているユーザーとのやり取り)を暗号化して、盗み見、盗聴、傍受、改ざんなどを防ぐ仕組みです。

SSL化はサーバーパネルの『ドメイン → SSL設定』から設定します。

エックスサーバー:サーバーパネル(ドメイン → SSL設定)

エックスサーバー:サーバーパネル(ドメイン → SSL設定)

次にSSL化をしたいドメインの『選択する』をクリックします。

エックスサーバー:サーバーパネル(SSL設定・ドメイン選択画面)

エックスサーバー:サーバーパネル(SSL設定・ドメイン選択画面)

そして『独自SSL設定追加』タブを選択して、設定対象ドメインとサイトを確認したら『確認画面へ進む』をクリックします。

『CSR情報(SSL証明書申請情報)を入力する』にはチェックを入れなくてもSSL設定可能なので、チェックは入れずに『確認画面へ進む』をクリックします。

エックスサーバー:サーバーパネル(SSL設定)

エックスサーバー:サーバーパネル(SSL設定)

そして確認画面で問題なければ『追加する』をクリックします。

エックスサーバー:サーバーパネル(SSL設定・確認画面)

エックスサーバー:サーバーパネル(SSL設定・確認画面)

するとこちらの画面になるので少し待ちます(この時は10秒くらいでした)

エックスサーバー:サーバーパネル(SSL設定・新規取得申請中画面)

エックスサーバー:サーバーパネル(SSL設定・新規取得申請中画面)

そしてこちらの画面に切り替われば完了です。

エックスサーバー:サーバーパネル(SSL設定完了画面)

エックスサーバー:サーバーパネル(SSL設定完了画面)

ここで『戻る』をクリックするとこちらが表示されます。

エックスサーバー:サーバーパネル(SSL設定一覧・反映待ち)

エックスサーバー:サーバーパネル(SSL設定一覧・反映待ち)

『反映待ち』と表示されている間はアクセスしてもこちらが表示されるので、しばらく待ちましょう。

SSL化の反映待ち状態のページ

SSL化の反映待ち状態のページ

 

Basic認証(ベーシック認証)をかける

あとはBasic認証(アクセス制限)のかけ方を解説します。

Basic認証とは?

Basic認証とはページにアクセス制限をかけることで、ユーザー名やパスワードを入力しないとページが開けないようにすることです。ページにアクセスした時点でユーザー名とパスワードを求める認証ダイアログが立ち上がります。

ポートフォリオであればかける必要はないかも知れませんが、テスト環境の構築として公開前のWebサイトのファイルをアップロードする時は必須です。

テストサーバーとは?

実際に公開するサーバーとは別に、公開前にWeb上でどう見えるかをテストするためのサーバー。ローカル環境ではテスト出来ないお問い合わせフォームのテストや、クライアントに確認して貰うために必要。テストサーバーはクライアント側が用意してくれることもありますが、用意してくれないこともあるので自分で用意しておくことをおすすめします。

Basic認証するためにはサーバーパネルにログインします(サーバーIDとサーバーパネルパスワードが必要)

≫ サーバーパネルにログイン

そしてこちらがサーバーパネルになります。

エックスサーバー:サーバーパネル

エックスサーバー:サーバーパネル

そして『ホームページ → アクセス制限』を開きます。

エックスサーバー:サーバーパネル(アクセス制限)

エックスサーバー:サーバーパネル(アクセス制限)

そしてこちらが表示されるので、Basic認証をかけたいドメイン名の『選択する』をクリックします。

エックスサーバー:サーバーパネル(ドメイン選択画面)

エックスサーバー:サーバーパネル(ドメイン選択画面)

そしてこちらで『現在のフォルダ』で『アクセス制限』を『ON』にして『設定する』をクリックします。

エックスサーバー:サーバーパネル(アクセス制限設定)

エックスサーバー:サーバーパネル(アクセス制限設定)

現在のフォルダについて

『現在のフォルダ』はWebサイト全体のアクセス制限になります。今回は初期ドメイン直下にファイルをアップロードしていて他にフォルダがないので大丈夫ですが、複数のサイトを公開する場合はサイトのフォルダごとに設定して下さい。

そしてこちらの画面になるので『戻る』をクリックします。

エックスサーバー:サーバーパネル(アクセス制限設定『戻る』クリック)

エックスサーバー:サーバーパネル(アクセス制限設定『戻る』クリック)

そして最初の画面に戻るので『ユーザー設定』をクリックします。

エックスサーバー:サーバーパネル(アクセス制限設定・ユーザー設定)

エックスサーバー:サーバーパネル(アクセス制限設定・ユーザー設定)

そして『ユーザーID』と『パスワード』を設定して『確認画面へ進む』をクリックします。

エックスサーバー:サーバーパネル(アクセス制限設定・ユーザーIDとパスワード設定)

エックスサーバー:サーバーパネル(アクセス制限設定・ユーザーIDとパスワード設定)

そして確認画面で『追加する』をクリックします。

エックスサーバー:サーバーパネル(アクセス制限設定・ユーザーIDとパスワード確認)

エックスサーバー:サーバーパネル(アクセス制限設定・ユーザーIDとパスワード確認)

そしてこちらの画面が表示されれば完了です。

エックスサーバー:サーバーパネル(アクセス制限設定完了)

エックスサーバー:サーバーパネル(アクセス制限設定完了)

ページにアクセスしてこちらが表示されればOKです。

Basic認証ダイアログ

Basic認証ダイアログ

 

複数のWebサイトを公開する方法

ポートフォリオは1つしか無いかも知れませんが、テストサーバーとして使用する時は複数のWebサイトをアップロードしたい場合があります(案件を複数同時進行している場合など)

その場合は、サイトごとにフォルダで分けてアップロードするだけでOKです。

1つとの違いは以下になります。

  • 1つだけ:ドメイン名の直下に『ファイル』をアップロード
  • 複数:ドメイン名の直下に『ファイルの入ったフォルダ』をアップロード

ファイルマネージャで見るとこのようになります。

エックスサーバー:ファイルマネージャ(複数サイトアップロード)

エックスサーバー:ファイルマネージャ(複数サイトアップロード)

URLはこのように変わります(初期ドメインが『junpei.xsrv.jp』の場合)

  • 1つのみ:https://junpei.xsrv.jp
  • 複数:https://junpei.xsrv.jp/portfolio/

上記『portfolio』の部分がフォルダ名になります。

 

複数のWebサイト公開時のBasic認証をかける方法

Basic認証はフォルダごとに行うので、もし全体(現在のフォルダ)がONになっていたらOFFにして、フォルダごとに設定して下さい。

エックスサーバー:サーバーパネル(アクセス制限設定)

エックスサーバー:サーバーパネル(アクセス制限設定)

 

エックスサーバーでWordPressサイトを公開する方法

ここまでは静的サイト(HTMLサイト)でしたが、WordPressで制作したポートフォリオサイトやテストサーバーでもWordPressを使うことは多いです。

しかしWordPressのファイルはたくさんあるので、静的サイトのフォルダと同じ場所にするとごちゃまぜになって分かりにくくなります。

例えばこちらは独自ドメインにインストールしたWordPressのファイルになります。

エックスサーバー:ファイルマネージャ(WordPressファイル)

エックスサーバー:ファイルマネージャ(WordPressファイル)

ここに静的サイトである『portfolio』フォルダを入れるとこのようになります。

エックスサーバー:ファイルマネージャ(WordPressファイルと静的サイトフォルダ)

エックスサーバー:ファイルマネージャ(WordPressファイルと静的サイトフォルダ)

分かる人には分かりますが、非常に見にくいことには変わりありません。

ちなみにドメインが『junpei.xsrv.jp』の場合は、以下のURLでページは見れます。

  • 静的サイト:https://junpei.xsrv.jp/portfolio
  • WordPress:https://junpei.xsrv.jp

ただやはり見にくいので、静的サイトのファイルをアップロードした初期ドメインの方でサブディレクトリを使ってWordPressをインストールしたいと思います。

サブディレクトリであればWordPressも複数インストール可能です(追加費用などは発生しません)

独自ドメインの方は使わないの?

独自ドメインの方はサーバーの契約時にWordPressをインストールしているかも知れませんが、こちらは1つしかないので今後ブログをやらないのであれば『WordPressのポートフォリオ専用』として使っても構いません。

ただしテストサーバーとしてWordPressを複数同時にインストールする機会は普通にあるので、やはり複数インストール出来るようにしておいた方がいいと思います。

独自ドメインの方でもサブディレクトリは使えるんじゃない?

独自ドメインの方でもサブディレクトリを作ることは出来ますが、テストサーバーなどは納品後に削除するので、もし独自ドメインの方でブログを運営していて間違ってブログのファイルを削除してしまったら・・・なんてこともあり得るので、作成と削除を繰り返すのは初期ドメインの方でまとめたいと思います。

 

サブディレクトリにWordPressをインストールする

前置きが長くなりましたが、本題に入っていきます。と言ってもすごい簡単にできます。

まずはサーバーパネルの『WordPress → WordPress簡単インストール』を開きます。

エックスサーバー:サーバーパネル(WordPress簡単インストール)

エックスサーバー:サーバーパネル(WordPress簡単インストール)

次にWordPressをインストールしたいドメインで『選択する』をクリックします。

エックスサーバー:サーバーパネル(WordPress簡単インストール・ドメイン選択画面)

エックスサーバー:サーバーパネル(WordPress簡単インストール・ドメイン選択画面)

今回はポートフォリオサイトやテスト環境の構築用なので、初期ドメインを選択します。

そして簡単インストールの設定画面になったら『WordPressインストール』タブを選択します。

エックスサーバー:サーバーパネル(WordPress簡単インストール設定画面)

エックスサーバー:サーバーパネル(WordPress簡単インストール設定画面)

入力項目は以下になります。

  • サイトURL:赤枠内にサブディレクトリのURLを入力
  • ブログ名:あとで変更可能
  • ユーザー名(WordPressログイン用):WordPressのプラグインを使えば変更可能
  • パスワード(WordPressログイン用):あとで変更可能
  • メールアドレス:任意のメールアドレス
  • キャッシュ自動削除:そのままでOK
  • データベース:そのままでOK
  • テーマ:お好みで選択

WordPressにログインするための『ユーザー名』と『パスワード』は後から変更可能ですが、WordPressにログイン出来ないと変更できないのでここで設定したものはメモしておきましょう。

そして重要なのが『サブディレクトリのURL』です。

ここに何も書かなければドメイン直下にWordPressのファイルが以下のように入ります。

エックスサーバー:ファイルマネージャ(WordPressファイル)

エックスサーバー:ファイルマネージャ(WordPressファイル)

しかし『portfolio』と入力すると『portfolio』というフォルダに上記WordPressのファイルが入ります。

エックスサーバー:ファイルマネージャ(サブディレクトリにWordPress)

エックスサーバー:ファイルマネージャ(サブディレクトリにWordPress)

ドメインが『junpei.xsrv.jp』の場合は『http://junpei.xsrv.jp/portfolio』でWordPressサイトが開けます。

そしてこの初期ドメインで静的サイト(HTMLサイト)も公開したい場合はファイルをそのまま入れるのではなく、複数公開するときと同じようにフォルダを作っていれましょう。

例えば『camera』というLPを公開する場合はこのようになります。

エックスサーバー:ファイルマネージャ(サブディレクトリにWordPressと静的サイト)

エックスサーバー:ファイルマネージャ(サブディレクトリにWordPressと静的サイト)

これで最初の方に書いたようなごちゃまぜ状態にはならず、静的サイトもWordPressサイトもいくつでも作れます。

入力が終わったら右下の『確認画面へ進む』をクリックしましょう。

そして確認画面が表示されるので、問題なければ右下の『インストールする』をクリックすれば完了です。

エックスサーバー:WordPress簡単インストール確認画面

エックスサーバー:WordPress簡単インストール確認画面

こちらがインストール完了後に表示される画面です。

エックスサーバー:WordPress簡単インストール完了画面

エックスサーバー:WordPress簡単インストール完了画面

WordPressのログイン情報はサーバーパネルの『WordPress → WordPress簡単インストール → インストール済みWordPress一覧』で確認できます。

エックスサーバー:サーバーパネル(WordPress簡単インストール:ログイン情報)

エックスサーバー:サーバーパネル(WordPress簡単インストール:ログイン情報)

 

SSL化について

先ほど解説したように初期ドメインでもSSL化は出来ますが、WordPressの方は先ほどのログイン情報にあるように『http://〜』でアクセス出来る状態です(『https://〜』でもアクセス可能)

これについては『Really Simple SSL』というプラグインを使えば『http://〜』でアクセスしても『https://〜』にリダイレクトされるように出来ます。

使い方については以下の記事を参照下さい(インストールして有効化後『SSLを有効化』をクリックするだけですが)

 

ローカル環境で開発したWordPressをアップロード

ポートフォリオでも実務でも、WordPressはローカル環境で開発すると思います。

そしてそれをサイトに公開するにはどうすればいいかというと『All-in-One WP Migration』というプラグインを使えば数分で出来ます。

ものすごく簡単に書くと、

  1. プラグインをインストールして有効化(ローカル環境とアップロード先の両方)
  2. ローカル環境のWordPressでデータをエクスポート(出力)
  3. アップロード先のWordPressでデータをインポート(入力)

とこれだけです。

詳しくは以下の記事を参照下さい。

 

Basic認証(ベーシック認証)をかける

これについては静的サイトの時と全く同じ方法になります。

 

FTP接続について

今回はファイルマネージャを使ってファイルをアップロードしましたが、実務ではクライアントからFTP情報を頂いてファイルをアップロードすることがあります。

そのときにはFTPソフトを使う必要があるので、FTPソフトも使えるようになっておきましょう。

FTPソフトにも色々種類がありますが、私が使っているのは『FileZilla』になります。

使い方は以下の記事を参照下さい。

 

ポートフォリオ・営業文の添削サービス

最後に制作会社向けの営業文・ポートフォリオの添削サービスをご紹介します。

恐らくほとんどの人は、

制作会社の営業ってどうすればいいの?

という状態だと思います。

そういう人にはこちらのサービスがおすすめです(画像クリックでアクセス👇)

サービス内容

  • 制作会社に評価されるポートフォリオの解説
  • 営業文の雛形公開、及び各点の解説
  • 営業時にやってはいけない手法とリストアップ方法
  • 制作会社へのインタビュー
  • 営業文・添付資料・ポートフォリオの添削(2回)
  • 評価されるチェックシートの雛形と作り方
  • 制作会社との面談での質疑応答の解説
  • 制作会社はポートフォリオのどこを見ているのか
  • 制作会社に出す見積書の雛形と解説
  • その他、役立つ書類を複数追加予定

私のように営業経験がない人は、どうやって営業をしていいのかさっぱり分からないと思います。

そして、

燃える犬

とにかく数を打つ!

と意気込む人もいてそれも間違いではありませんが、なるべく希望の制作会社と契約したいですよね?

そのためには営業方法を学び、営業文やポートフォリオの添削を受ければ契約に至る可能性を大幅に上げることが出来ます。

そしてこちらのサービスは売りっぱなしではなく、実際に営業をする会社のリサーチをした上で添削をしてくれます。

営業は無策で挑むと消耗戦になり、次第に営業先がなくなっていくということもあり得るので、このサービスを活用して制作会社営業の打率を上げておくのがおすすめです。

制作会社営業の打率アップに!

営業文完全攻略はこちら

2回の営業文添削付き!

 

まとめ

これでエックスサーバーでのポートフォリオサイトの公開についての解説は以上になります。

初めてだとよく分からないかも知れませんが、ブログを運営したり実務でアップロードや削除など繰り返していくうちに慣れていくと思います。

エックスサーバーは国内シェアNo.1の初心者にもおすすめのレンタルサーバーなので、まだ契約していない人は検討してみて下さい。

4/3 12時まで実質半額!

今すぐサーバーを契約する

契約特典でドメイン永久無料!

以上になります。

 

Web制作おすすめ教材と案件獲得サービス
当ブログではWeb制作学習におすすめの教材を厳選してご紹介しています。
こちらの記事を参考に教材を購入して成果を出している人もたくさんいるので、自分に必要な教材を探してみて下さい。
また、学習面だけでなく営業面である案件獲得サービスもご紹介しています。
スキルが身についても仕事がなければ意味がないので、営業に不安がある人はこちらの記事をぜひ参考にしてみて下さい。
この記事を参考にスキルと営業力を身につけて稼げるようになりましょう!

-Web制作
-