おすすめサービス

ConoHa WINGでポートフォリオサイトを公開する方法を丁寧に解説【スクショ40枚】

ConoHa WINGでポートフォリオサイトを公開する方法を丁寧に解説【画像40枚】

こんにちは、現在フリーランスエンジニア4年目のしょーごです。

今回は「ConoHa WINGを使用してポートフォリオを公開する方法」を丁寧に解説していきます。

以前から「サイトの公開難しすぎ!」という悩みの声を頂いていました。

まさひろくん
まさひろくん
サーバーに公開するのに手間取りました
ようこちゃん
ようこちゃん
Basic認証ってどうやってかければいいの?
ゆうすけくん
ゆうすけくん
一つのサーバーに複数のサイトって公開できるんできるんですかね?方法が知りたいです!

しょーご

そんな方も大丈夫!今回の記事を読みつつ一緒に進めて貰えば、ポートフォリオサイトを複数公開するところまで行えます!

今回使用するサーバーはConoHa WING になります。

Web制作におすすめのレンタルサーバー/

しょーご

この記事を書いたのは
しょーご@samurabrass

このブログ「しょーごログ」の運営者。本業でエンジニアとしてサイト制作やシステム開発を数年行っており、ブログとYouTubeで情報発信を行っている。駆け出しエンジニアのコーディング課題添削も行う

ConoHa WING現在超セール中!

今回紹介する「ConoHa WING 」が現在超お得なセールを行っています。この機会を見逃さないで!

期間限定キャンペーン中!!/

Webサイトの公開に必要なもの

サーバー、ドメインを理解する

Webサイトの公開で必要になるものは大きく「3つ」です。

ConoHa WINGでポートフォリオサイトを公開する方法を丁寧に解説

一般的なサイトの公開の流れとしては以下のようになります。

  1. ローカル環境(VSCodeなど)で開発する
  2. サーバー・ドメインをそれぞれ契約する
  3. サーバーとドメインの紐付け作業を行う
  4. サーバーにコーディングしたファイルをアップロードする
  5. SSL化やBasic認証などの作業を行う
  6. 終了!

ありさちゃん
ありさちゃん
サーバーとドメインを紐付けるのとかとても難しそう…
まさひろくん
まさひろくん
サーバーにファイルをアップロード…めんどくさそう

しょーご

そう見えるよね笑
しかし、今回紹介するConoHa WING はサーバー&ドメインをまとめて取得できるので、とても簡単にサイトを公開できます!

Web制作者なら自分でサーバー・ドメイン周りを触っておくべき

この記事を見てくれてる方は大半がWeb制作業界に入りたい方だと思います。

コーディングの案件というのは実はコーディングで完結しないことが大変多いです。

  1. デザインを元にコーディング
  2. サーバーにアップロードし公開
  3. 必要に応じてドメイン・サーバー取得&紐付けも代行

なのに、実案件まえに経験する人が少ないため、高確率で事故が起こる場となっています。

なぜConoHa WINGなのか

サーバーと言ってもエックスサーバー など有力サーバーは他にもあります。ではなぜConoHa WING を私は推すのか。

理由は2つあります。

①ドメインが無料で2つ取得できる

通常サーバー契約で得られるドメインは初期ドメイン一つのみです。

しかし、ConoHa WING であれば「初期ドメイン」+「独自ドメイン」を最初から無料で取得することができます。

そして、この2つのドメインポートフォリオ公開に非常に効いてきます。

ConoHa WINGでポートフォリオサイトを公開する方法を丁寧に解説

今回は2つのドメインのうち、片方には「複数のHTMLサイト」もう一つには「WordPressサイト」をそれぞれ公開していきます。

ゆうすけくん
ゆうすけくん
一つのドメインに複数サイト公開できるの?

と思われるかと思いますが、具体的手法は後ほど解説します。とりあえず公開イメージはこんな感じです。

ConoHa WINGでポートフォリオサイトを公開する方法を丁寧に解説
しょーご

一つのドメインにWordPressサイトとHTMLサイトがあるとややこしくなるので、ドメインで分けたほうが分かりやすくなります。

②わかりやすい管理画面

サーバーの管理画面は最大手だろうが、どの会社もかなり使いにくいです

ただ、ConoHa WING の管理画面は群を抜いて使いやすかったです。管理画面が使いやすければ

  1. サーバー側の操作がしやすい
  2. クライアントにも優しい

ということで、お客さんのWebサイトを構築する際にも、お客さんが理解しやすいので重宝します。

しょーご

お客さんにサイトを納品するなら、お客さんが今後操作することになる状況にもなりえますからね。

もちろんブログも運営できる

ようこちゃん
ようこちゃん
ポートフォリオを公開するためだけにサーバーを契約するのはもったいない感じが
まさひろくん
まさひろくん
ポートフォリオだけでなく、将来的に自分のブログも運営したいです

しょーご

もちろん可能です!その手法も最後に解説します。

\Web制作におすすめのレンタルサーバー/

ConoHa WINGの契約方法

ConoHa WINGでポートフォリオサイトを公開する方法を丁寧に解説

まずはConoHa WINGトップページ より「今すぐお申し込み」をクリックします。

その後アカウント登録を行い、ログインします。

すると、以下のようなプラン選択の画面が出てくるので、画像のとおりに選択します。

料金タイプWINGパック
契約期間3ヶ月でも可能だが、年間契約が最もコスパが良い
プランベーシック
しょーご

予算ない人は若干割高になりますが、3ヶ月で契約してもいいと思います。その場合は更新を忘れないようにしましょう。

初期ドメイン自由でOK
WordPressかんたんセットアップ今回は利用しない(後からでも簡単にセットできる)
しょーご

WordPressかんたんセットアップを使用しないのは、WordPress開発を行う段階になってからセットアップでもなんら問題ないためです。

今からWordPressサイトを立ち上げたい方は以下の記事でかんたんセットアップの場合の操作を解説しています。

その後料金が問題なければ「次へ」をクリックします。

フォームに情報を入力していきます。

SMS/電話番号認証があります。

送られてきた認証コードを入力しましょう。

その後支払い情報を入力します。

申し込み内容に問題がなければ「お申し込み」ボタンをクリックします。

これにてサーバーの契約が完了します。

ConoHa WINGの設定

その後すぐに「無料独自ドメインを設定しますか?」というモーダルが出現します。

今回は「ドメイン新規取得」を押して「追加する」をクリック。

しょーご

今回はこの「無料独自ドメイン」をWordPress用にしていきます。

無料独自ドメインの取得

それではドメインを選んでいきます。

ドメイン名自由でOK(私はshogo-testにしました)
ドメイン末尾.siteや.tokyo、.websiteなど選択可能(私は.siteにしました)

選んだら「決定」を押します。

WordPressは「今は作成しない」にしておきます。

HTMLサイトを公開する

ここで管理画面で「切り替え」をクリックして、HTMLサイトを公開するドメインに切り替えておきます。

その後「ファイルマネージャー」を選択します。

すると、public_htmlというフォルダが表示されるかと思うので、クリックします。

その下に自分のドメイン毎にフォルダがまだ分かれているので、「HTMLサイトを公開する方のドメインをクリック」します。

初期状態だと「error」というフォルダしかないかと思います。

ここにドラッグアンドドロップで、コーディングファイル一式を入れてあげてください。

これは練習で、複数サイトを公開するときはディレクトリ構成がこれと変わるので、今は方法だけ学習してください。

今回はshogo-log.conohawing.comというドメインにファイルを入れたのでアクセスしてみると、Webサイトが表示されました!

今回はテスト用なのでこのドメインにアクセスしていただいても、執筆から時間が立っている場合は閉鎖している可能性があります。

これでサイトの公開方法はOKです。

ありさちゃん
ありさちゃん
え、これだけでサイトを公開できるんですか?

しょーご

可能なんです、そう、ConoHa WING ならね。

Basic認証をかける

Basic認証のかけ方を解説します。まずは「サイトセキュリティ」「ディレクトリアクセス制限」を選択してください。

Basic認証の「ユーザー名」「パスワード」を決めます。

その後、サイトにアクセスすると、Basic認証がかかっていれば以下のようなモーダルが出てくるはずです。

複数HTMLサイトを公開する手法

それではいよいよ以下のようにサイトを複数公開する手法を見ていきます。

といっても一瞬です。

ConoHa WINGでポートフォリオサイトを公開する方法を丁寧に解説

ここから本題です。

まずは公開したいサイト分フォルダを作成してください。もしくはコーディングファイルが一式入ったフォルダをアップロードしてもいいです。

このフォルダ名がドメイン末尾にそのままなります。

例えば「ishii-clinic」というのは、私のコーディング課題の【初級Ex】 XDデザインからのコーディング実践演習のコーディングファイル一式を入れるフォルダになります。

この状態で、shogo-log.conohawing.com/ishii-clinic/にアクセスすると、無事にサイトが公開できているのがわかります。

実際にここで表示させているのは別サイトになります。

Basic認証は各フォルダごとにかけていってください。

SSL化する

今回は「初期ドメイン」で公開したので、デフォルトでSSL化(https)になっています。

WordPressサイトの設定

続いてWordPressサイトの公開方法を確認していきましょう。

私の出している【上級】XDデザインからのコーディング実践演習【WordPress実案件レベル】のような、「WordPressサイト」を公開する場合はWordPressが必要ですが、

とても簡単に環境構築することができます。

まずはWordPressサイトを公開するドメインに切り替えておいてください。

その後「サイト設定」からWordPressを入れていきます。

新規インストール
バージョン基本的に新しいもので
wwwなしどちらでも構いませんが、簡略な方で
サイト名WordPressサイト名、後ほど変更可能
メールアドレスWordPressサイトに登録するアドレス
ユーザー名WordPress管理画面に入るユーザー名(重要!メモしておく
パスワードWordPress管理画面に入るパスワード(重要!メモしておく
データベースのパスワード基本使わないが、重要。これもメモっておく

「保存」をクリックすると、もうサイトにWordPressがインストールされ、サイト公開となります。

試しに「管理画面URL」をクリックしてみます。

すると、WordPress管理画面への認証画面が出てきます。

先程登録した「ユーザー名」「パスワード」を入力すると、WordPressの管理画面に入ることができます。

SSL化を行おう

初期ドメインでなく、「独自ドメイン」の場合はSSL化がされていません

「かんたんSSL化」という部分でSSL化できます。

サーバーを契約してから数時間しないと、SSL化は以下の画像のように失敗することがあります。時間を置きましょう。

一度設定すれな数分でSSL化が有効になります。

もう一度「サイトURL」「管理画面URL」を見てみると、httpsになっていたら完了です。

自作WordPressテーマをアップロードしてみよう

WordPressサイトをローカル環境で開発した後はサーバーにアップロードして公開しないといけません。

しかしこれはあるプラグインを使用すれば一瞬で行うことができます。

ConoHa WINGでポートフォリオサイトを公開する方法を丁寧に解説

ローカル環境での設定

まずはローカル環境でのWordPress管理画面「プラグイン」「新規追加」を押します。

ここで「ALL-in-One WP Migration」と検索し、インストールしてください。

その後左のツールバーより「エクスポート」を選択してください。

そして「ファイル」を選択すると、移行ファイルをダウンロードすることができます。

レンタルサーバー

続いてレンタルサーバーのWordPress管理画面を開いてください。

同じくALL-in-One WP Migration」プラグインをインストールし、インポートを押します。

そして出てきた画面に移行ファイルをドラッグアンドドロップします。

これで終了です。サイトが公開できました。

Basic認証をかけよう

ConoHa WING では恐ろしいほど簡単に、WordPressサイトにも簡単にBasic認証をかけることができます。

「ディレクトリアクセス制限」から同様にかけてあげるだけで終了します。

しょーご

WordPressサイトにBasic認証かけるのって、本来は結構めんどくさいのですよね…

本格的にConoHa WINGでサイト受託制作やブログをやる場合

外部独自ドメインと紐付ける

今回は「ポートフォリオを公開する手法」を主眼にお伝えしました。

しかし、もし

  • お客さんのサイトを公開する
  • 自分のブログを運営する

このような場合はドメインは「お名前.com 」などでドメインを契約したほうがいいかなと思います。

ドメインは別で取る理由
  • 今後サーバー側に何かが起こってもドメインは生き残る
  • 実案件では「それぞれ他社のドメインとサーバーの紐付け作業」も入ることがあるので、その練習になる

といった理由からです。このサイトのドメインも「お名前.com 」で取りました。

ブログならWordPressテーマが必要だが…

このブログは「JIN」というブログテーマを使用しているのですが、実は唯一「ConoHa WING 」でのみ、割引価格で購入することができます。

JIN 最安 お得

購入後そのままWordPress管理画面からテーマを適用することができるので、ドメインがあればとてもスピーディーにブログを展開することができます!

しょーご

最高のテーマなので、ブログを検討されている方はぜひ!!

実案件までに練習しておきたいこと

FTPを使用して操作する

今回はConoHa WING の優秀な「ファイルマネージャー」を使用してファイルの出し入れを行いましたが、他のサーバーではこんなに簡単にいかないことが多いです。

どのサーバーでも万能な方法は「fileziila」などのソフトでFTPを利用することなので、その方法を試してみるといいかなと思います。

Basic認証を手動でかけてみる

今回はConoHa WING の優秀な「ディレクトリアクセス制限」で手軽にBasic認証をかけましたが、状況によっては手動で認証を掛ける必要が出てきます。

方法だけでも押さえておくといいかなと思います。

ConoHa WINGはこれからWeb業界に入る人にピッタリ

私はこれまで仕事柄数多くのサーバーを触ってきました。

その中でも最も操作方法がわかりやすかったのが「ConoHa WING 」でした。

これから「Webサイトを初めて公開する」という人には一番おすすめできるサーバーになりますので、ぜひ使ってみてください!

\現在お得なキャンペーン中!/

\\\コーディング課題公開中///

HTML初心者からWordPress実案件レベルまでのコーディング演習課題noteで公開しています。

コーディング練習課題
  1. デザインカンプからのコーディング
  2. プロによる2回の表示確認特典
  3. ポートフォリオとして使用OK

初級編は初めてデザインからコーディングする方向け、中級編はJavaScriptやjQueryの練習、上級編WordPressの実案件を模擬体験できるレベル感にしています。

中級者の方には高難易度課題を詰め合わせた「即戦力セット」も出しています。

しょーご

自分が「これを実案件までに学習しておくと良いな」と感じたポイントを詰め込んだ教材になります!

基本的にまとめて購入していただくとかなりお得になります。

コーディングは書籍だけではなかなか実力がつかないので、ぜひ腕試しにご利用ください!!

\課題の購入はこちらから/

\課題の詳細はこちらから/

あなたに是非読んでほしい記事です!