おすすめサービス

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

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

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

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

現在ConoHa WING が特大セール中なのと、期間限定かつ当サイトのリンク限定で500円引きクーポンがつくので、チャンスです!

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

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

しょーご

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

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

1月31日までは最大50%OFF
1,320円 → 660円〜になるキャンペーン開催中!!

しょーご

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

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

目次
  1. [緊急]ConoHa WINGが現在格安で利用できる!
  2. 【当サイト限定】500円オフクーポン配布中!
  3. Webサイトの公開に必要なもの
  4. Web制作者なら自分でサーバー・ドメイン周りを触っておくべき
  5. なぜConoHa WINGなのか
  6. ConoHa WINGの契約方法
  7. ConoHa WINGの設定
  8. HTMLサイトを公開する
  9. Basic認証をかける
  10. WordPressサイトの設定
  11. 自作WordPressテーマをアップロードしてみよう
  12. 本格的にConoHa WINGでサイト受託制作やブログをやる場合
  13. 実案件までに練習しておきたいこと
  14. とりあえずHTMLサイトを公開したい人向け流れまとめ
  15. さいごに ConoHa WINGはこれからWeb業界に入る人にピッタリ

[緊急]ConoHa WINGが現在格安で利用できる!

なんと!今回紹介する「ConoHa WING 」が最大50%OFFとお得なセール中です。

今このページを見ている人はラッキーです!通常時とは価格が大きく異なってくるので、このタイミングで活用しましょう!

しょーご

具体的なセットアップ方法はこのあと解説するので、一緒にWebサイトを公開するところまで行きましょう!

1月31日までは最大50%OFF
1,320円 → 660円〜になるキャンペーン開催中!!

【当サイト限定】500円オフクーポン配布中!

今回のセールとは別に、

ConoHa WING を提供しているGMO様より、当サイト限定で「500円オフクーポン」を発行していただきました!

こちらも期間限定です!!

始めに料金を支払う際に使えるので、実質「さらに500円引き」という事になります! シンプルにお得なので是非この機会にご利用ください!

しょーご

クーポン適用はこのサイト「shogo-log」から契約した場合限定なので、注意してくださいね!

\当サイト限定クーポンで申しこみ/

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 を私は推すのか。

理由は4つあります。

  1. 初期ドメイン以外にも、もう一つのドメインも永久無料!
  2. 初期費用無料!(3000円程度かかる会社が多いです)
  3. 月額料金が1年契約すると990円!(3年契約だと880円!)
    ※キャンペーン期間中はさらに割引
  4. わかりやすい管理画面
ConoHa WING公式

https://www.conoha.jp/wing/

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

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

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

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

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

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

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

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

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

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

②初期費用0+月額が最安クラス!なのに高機能

ConoHa WING はとにかく初期費用を抑えて利用を開始することができます。

しかし安くても、国内最高峰の機能を持っているので、

ずっとメインサーバーとして活用することが可能と、まさに神のコスパを誇っています。

LiteSpeed LSAPIというPHPの実行環境を持っており、これでPHPのスピードが爆速になっています。WordPressサイトを制作するなら抜群の相性です!

しょーご

駆け出しの頃は金銭的に余裕の無いことが多いですから、「安くて高機能」は助かりますね。

③わかりやすい管理画面

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

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

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

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

しょーご

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

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

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

しょーご

もちろん可能です!特にWordPressとの相性が抜群です!その構築手法も最後に解説します。

1月31日までは最大50%OFF
1,320円 → 660円〜になるキャンペーン開催中!!

ConoHa WING公式

https://www.conoha.jp/wing/

ConoHa WINGの契約方法

手順1:ConoHa WING公式サイトにアクセス

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

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

こちらのリンクからでも500円オフクーポンが最終料金に自動適用されます。

しょーご

簡単ですので、ぜひ一緒に手を動かして行きましょう。

手順2:ConoHa WINGにアカウント登録

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

手順3:プラン選択

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

WINGパックを選びます。

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

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

手順4:ドメイン及びWordPress簡単セットアップ

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

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

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

手順5:問題なければ「次へ」を選択

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

手順6:個人情報入力と認証

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

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

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

手順7: 支払い情報の入力と申込み

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

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

しょーご

当サイトからであれば、既に「500円引きクーポン適用済みの料金」になっています!

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

1月31日までは最大50%OFF
1,320円 → 660円〜になるキャンペーン開催中!!

ConoHa WING公式

https://www.conoha.jp/wing/

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 ならね。

1月31日までは最大50%OFF
1,320円 → 660円〜になるキャンペーン開催中!!

ConoHa WING公式

https://www.conoha.jp/wing/

Basic認証をかける

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

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

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

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

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

といっても一瞬です。

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

ここから本題です。

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

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

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

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

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

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

SSL化する

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

1月31日までは最大50%OFF
1,320円 → 660円〜になるキャンペーン開催中!!

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になっていたら完了です。

ConoHa WING公式

https://www.conoha.jp/wing/

自作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管理画面からテーマを適用することができるので、ドメインがあればとてもスピーディーにブログを展開することができます!

しょーご

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

ConoHa WING公式

https://www.conoha.jp/wing/

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

FTPを使用して操作する

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

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

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

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

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

とりあえずHTMLサイトを公開したい人向け流れまとめ

とにかく「自分でコーディングしたサイトを公開したい!」という場合、以下の流れで大丈夫です。

  1. ConoHa WING 公式サイトから登録
  2. 独自ドメイン取得
  3. ファイルマネージャーからファイル群をアップロード
  4. Basic認証をかける
  5. SSL化する
しょーご

私のコーディング課題を公開する場合は、この流れで大丈夫です。

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

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

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

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

しょーご

期間限定で、当サイトから申し込めば「500円オフクーポン」が自動適用されるので、この機会にぜひ!!

1月31日までは最大50%OFF
1,320円 → 660円〜になるキャンペーン開催中!!

ConoHa WING公式

https://www.conoha.jp/wing/

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

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

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

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

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

しょーご

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

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

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

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

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

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