プログラミング学習がある程度進んでくると、ポートフォリオサイトを複数作る人はたくさんいらっしゃいます。その際、ドメインとポートフォリオの関係性に悩む人は少なくないです。
ポートフォリオサイトを掲載するドメインって複数取らないといけないのかな?
ブログも作成したいのだけど、どのようにサイト設計した方がいいんだろう?ポートフォリオも掲載することを考えると難しい…。
この記事では、1つのドメインで、“複数のポートフォリオサイト”と“ブログ(WordPress)”を設置する方法をお伝えします。図解を用いて解説するので、たどっていくだけで簡単に設置できますよ。
この記事では、サーバーを管理するため、データが削除されてしまう可能性があります。必ずデータのバックアップを取りながら作業しましょう。
また、この記事の内容によって、不利益を被っても、いかなる場合においても私は責任をおいかねますので、ご自身の責任のもと、ご実行ください。
本記事は下記の記事を参考にしています。
▶︎下層ディレクトリのWordPressフォルダに、トップのURLを指定 |静岡県浜松市を拠点にホームページ制作を行うアドレック事業部
この記事について
この記事が目指す状態
この記事で目指す状態は下記の通りです。
・1つのドメイン内に「複数のポートフォリオサイト」と「ブログ(WordPress)」が設置されている。
・ドメイン直下にはブログが設置されている。
弊ブログのドメインがこの記事の完成状態なので、具体例として、お伝えします。ポートフォリオは営業時に僕が使用してたものです。いま見ると修正点に溢れてますね…。(portfolioのスペルが間違ってるのはスルーしてください笑)
●ブログ部分
https://kaki-lab.org/
●ポートフォリオ部分
・https://kaki-lab.org/portofolio/secool-intermediate/
・https://kaki-lab.org/portofolio/your-coding/
この記事は下記の図解の通りに、ディレクトリを作成したり、 ファイルをいじったりします。そして、1つのドメイン内に複数のポートフォリオサイトとブログを設置された状態を構築します。
このように、ドメインの下層である「サブディレクトリ」にポートフォリオサイトを設置していくのが、この記事で解説する方法です。
一方、サブドメインを取得して、そこにポートフォリオサイトを設置していく方法もあります。もしご興味があれば、調べてみてください。
この記事の前提条件
この記事は、下記3つが前提条件です。
- ドメインを購入している
- サーバーを契約している
- FTPツールの設定が完了している
もしこの条件を満たしていない場合には、下記の記事をご覧ください。こちらも図解を用いて、わかりやすく解説しています。そして、条件を満たしたのちに、本記事をご覧ください。
では、本題に入っていきましょう。
フルスクラッチのポートフォリオサイトを複数アップロード
フルスクラッチとはWordPressなどのCMSは用いず、HTMLやCSS、jQueryなどを用いて、コーディングしたプログラミングデータのことをいいます。
まずは下の図の“青部分”に取り掛かります。
フルスクラッチPF設置①:ポートフォリオサイトをまとめる
後々に作業しやすいように、デスクトップなどに、「portfolio」というフォルダを作成し、下のようにポートフォリオサイトをまとめましょう。
フルスクラッチPF設置②:ローカル側(左側)をポートフォリオサイト一覧にしつつ、サーバー側(右側)で、対象のドメインをクリック
フルスクラッチPF設置③:「public_html」をクリック
フルスクラッチPF設置④:サーバー側(右側)で右クリックを押して「portfolio」というフォルダを作成→クリック
フルスクラッチPF設置⑤:「portfolio」の下層にポートフォリオサイトをすべてアップロードする
フルスクラッチPF設置⑥:こんな状態になってるか確認する
フルスクラッチPF設置⑦:ちなみに、「site-1」の中身はこんな感じ
フルスクラッチPF設置⑧:ブラウザにそれぞれのURLを入力して、アップロードできていることを確認
WordPressのポートフォリオサイトもアップロード
次に“緑部分”に取り掛かります。WordPressのポートフォリオサイトがある方のみが対象です。もし、ポートフォリオサイトにWordPressがない場合には、やらなくてOKです!
WordPressPF設置⑨:対象ドメインを選択し、「設定する」をクリック→「WordPress簡単インストール」をクリック
WordPress設置⑩:下記の赤枠部分に「portfolio/site-4」と入力し、その他の部分も入力していく※site-4の部分は任意です
WordPress設置11:インストールしていく
WordPress設置12:インストール完了です。
確認画面URL・ユーザー名・パスワードは控えておきましょう。
WordPress設置13:ブラウザにURLを入力して、WordPressがインストールされたことを確認する
あとは、FTPツールを用いて、ポートフォリオサイトとして作成したWordPressテーマをアップロードすれば完了です。
次は、ドメインにWordPressでブログを設置し、なおかつ、トップページをドメイン直下に持ってきたい人に向けて、その方法を解説していきます。
トップページをブログにする
2段階で進めていきます。
- 第二階層にWordPressを簡単インストール
- 表示を最上階層に移す
第二階層にWordPressを簡単インストール
ブログ設置①:先ほどと同じように「WordPress簡単インストール」に進みます
ブログ設置②:第二階層にWordPressをインストールする
※ディレクトリ名はなんでもOKです。
ブログ設置③:確認したらインストール開始
ブログ設置④:インストールできたか確認する
※この時点では、ドメインの最上位階層ではなく、第二階層にWordPressのトップページがある
表示を最上階層に移す
表示変更①:管理画面URLをクリックし、ログイン画面へ→ログインする
表示変更②:「設定」をクリック→サイトアドレスの「wp」を削除→保存
表示変更③:FTPツールで再接続する
※WordPressをインストールしたため
表示変更④:該当するドメインをクリック
表示変更⑤:「public_html」をクリック
表示変更⑥:「wp」をクリック
表示変更⑦:下図のように「htaccess」を最上階層に移動させ、「index.php」はダウンロードする
※移動後、この階層(第二階層)から「htacssess」は削除しますが、「index.php」は削除しないでください。
表示変更⑧:上記の操作でサーバー側(右側)の第二階層は下図のようになっていればOKです
表示変更⑨:ダウンロードした「index.php」を開き、下図のように「/wp」を挿入します
表示変更⑩:下図のようになればOKです。
表示変更11:上記の操作で修正した「index.php」をサーバーへアップロードします。上書き保存してしまってOKです。
表示変更12:ブラウザで確認すると、最上位階層でWordPressが表示させることを確認できます。
お疲れ様でした。
終わりに
この記事の図解の通りに進めると下記の状態に設定することができます。
・1つのドメイン内に「ブログ」と「複数のポートフォリオサイト」が設置されている。
・ドメイン直下にはブログが設置されている。
ポートフォリオとブログを一つのドメインで一元管理すると、楽ですので、ぜひやってみてくださいね。
最後までお読みいただき、ありがとうございました。