WordPressを用いたポートフォリオサイトの作り方。

## 概要
私がポートフォリオサイトを開設するまでの手順をまとめました。
ポートフォリオに限らず、ブログやレンタルサーバーで何かしらやる予定の人は参考にしてみてください。

## レンタルサーバーの契約
![スクリーンショット 2020-05-25 11.24.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/429077/4050befb-6ac0-1a0d-bc6f-a2165f49c9c8.png)

まずはレンタルサーバーを契約します。下記のリンクから手続きを済ませましょう。
https://www.xserver.ne.jp/
![スクリーンショット 2020-05-24 12.28.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/429077/4b7b3cf6-ec39-b666-664d-380bf10d26f3.png)

必要な情報を入力フォームに入力。
![スクリーンショット 2020-05-24 12.34.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/429077/d29b1f1c-a88c-e588-4d16-a1d8d1c89669.png)
利用規約に同意して、「お申し込み内容の確認へ進む」をクリック
![スクリーンショット 2020-05-24 13.10.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/429077/44b6b3fb-e31a-f2e4-ff97-c8f7700ffbaf.png)
確認画面に遷移するので、認証を済ませましょう。
![スクリーンショット 2020-05-24 13.13.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/429077/a13d7b1a-0519-51eb-ea90-dc94de2867e0.png)

認証が完了したら、登録したメールアドレス宛に「【エックスサーバー】お申し込み受付のお知らせ」というメールが届きます。
サーバーアカウントの作成が完了次第、再度メールで連絡が来るので、それまで待ちます。(私は2時間ぐらいでサーバーアカウントの設定完了メールが届きました。

## ドメインの取得
サーバーを契約したらドメインを取得します。ドメインの取得方法はいろいろありますが、今回はエックスサーバーのキャンペーンドメインで取得します。(キャンペーンドメインで取得する場合はエックスサーバーの有料会員登録が必要となります。)
![スクリーンショット 2020-05-25 11.06.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/429077/ec936e02-0ba3-169f-f4c1-f437b7f3a420.png)
取得したいドメインを入力して検索ボタンを押下します。
![スクリーンショット 2020-05-25 11.21.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/429077/d0e2e133-3de3-83d2-4e15-9ccf9d7c6114.png)
確認画面に遷移するので申請ボタンをクリック。
![スクリーンショット 2020-05-25 11.24.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/429077/9a39383f-6019-1bb6-d2f0-4064abbdcba8.png)

これでドメインの取得は完了です！

## WordPressの設定
まずはエックスサーバーにログインしましょう。
サーバーアカウントの設定メールに、IDとパスワードが記載されていると思うのでそれを使ってログインします。
![スクリーンショット 2020-05-26 13.37.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/429077/4e4548c6-17ad-9215-89e7-4fd68e45f63c.png)
wordpress簡単インストールをクリック。
![スクリーンショット 2020-05-26 14.34.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/429077/4665eb3c-43cd-0b96-cb6f-4a293d6de22a.png)

wordpressをインストールするドメインを選択。
![スクリーンショット 2020-05-26 14.35.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/429077/27c4e562-9caa-0014-c44e-7de7c3ffc682.png)
遷移先のページで各フォームに入力してwordpressをインストールします。
![スクリーンショット 2020-05-26 14.37.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/429077/b940f745-7dfa-2a22-7ae3-0424d3ccd3f5.png)
これでインストール完了です！
![スクリーンショット 2020-05-26 14.46.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/429077/9cf0ac2b-2715-2dfd-efbe-90f545188962.png)

## SSL化
では、wordpressの管理画面URLで作業を行いましょう。
Xサーバーにwordpressをインストールした際に設定した、パスワードとメールアドレスを用いてログインします。
![スクリーンショット 2020-05-26 15.03.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/429077/81412283-8468-d189-f63c-953180b6bdbc.png)

ダッシュボード左側の「設定」→「一般」をクリックします。
![スクリーンショット 2020-05-26 15.04.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/429077/951e17f8-2c6a-167a-8263-4ddb28c92546.png)
URLをhttpsから始まるものに変更し、SSL化します。
![スクリーンショット 2020-05-26 15.08.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/429077/32b2b08c-6731-251f-218f-aae8b169d137.png)
こんな画面が表示されると思うので、もう一つ設定を行います。
![スクリーンショット 2020-05-26 15.14.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/429077/a0f63f32-9e2b-a25e-48f1-e4f4ba17f3fd.png)
Xサーバーのサーバーパネルにログインし、SSL設定を行いましょう。
![スクリーンショット 2020-05-26 19.22.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/429077/4ff4edf5-cdff-2b0a-702e-ecb8b9708f56.png)
SSL設定が終われば、反映待ちと表示されます。
私の場合は反映されるまで30分ぐらいかかったので気長に待ちましょう。
![スクリーンショット 2020-05-26 19.32.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/429077/08e05d7a-73ab-761b-702e-cd58b6e2f561.png)
続いてリダイレクトの設定です。「http://」から始まるURLからアクセスされても「https://」にリダイレクトさせます。
サーバーパネルを開いて「.htaccess編集」をクリックしてください。
![スクリーンショット 2020-05-26 20.57.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/429077/e7a8202a-45ac-8544-797d-ac22581f3c65.png)
「.htaccess」に以下の記述を追記します。

```
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
</IfModule>
```
![スクリーンショット 2020-05-26 21.17.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/429077/58184c0c-a850-19da-0088-ac6cec44904a.png)
ここまでできたら挙動を確認します。
以下のURLをアドレスバーに入力し、自分のポートフォリオサイトの雛形にアクセスしてみましょう。

```
http://ドメイン名/
```
http://ではなく、リダイレクトされてhttps://から始まるURLになっているはずです。
ここまで出来ればSSL化は完了です。

## パーマリンクの設定
ワードプレスのダッシュボードからパーマリンクの設定を行います。
![スクリーンショット 2020-05-26 21.36.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/429077/813d1354-1357-7690-d29c-558bbe21379b.png)
各ページのURLをどう表記するか、という設定です。
ブログなどでは何月何日の投稿、ということが分かるようにURLに日付を入れてもいいと思いますが、
今回はポートフォリオサイトの作成なので一番上の「基本」を選択します。
![スクリーンショット 2020-05-26 21.42.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/429077/6fe9c539-ae40-1693-0653-8349538307ca.png)

## とりあえず完成
デフォルトの状態で以下のような感じです。
ここから先は皆さんのデザインセンス次第となります。頑張ってお洒落なエンジニアを目指しましょう！
![スクリーンショット 2020-05-26 21.51.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/429077/24ad2d09-c8b1-fd5d-0702-e00bbcab4dc1.png)

今回の記事は以上となります。