【#2:Amazon Lightsail】AmazonLightsail＋WordPressでサイトを立ち上げてみた（最小構成で完了）

#はじめに

前章に引き続き、WordPressによるブログサイト構築を進めていきます。



前章はこちら：
> https://qiita.com/sasdos_engee/items/1bb2d9e8fbb204cfb980



#目次
　1.インスタンスを覗いてみる
　2.WordPressの管理画面にログイン
　3.WordPress色々設定してみる
　4.一般ユーザ画面を見てみる
　5.カテゴリ分け＋テスト投稿
　6.カテゴリをページ要素として出したい！！！！！
　7.終わりに


#1.インスタンスを覗いてみる
 
AWSの管理コンソールから、SSH接続。
<img width="400" alt="スクリーンショット 2020-07-17 22.10.41.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/675004/6250c51b-12e7-a2f1-255c-c7314fcfde68.png">



インスタンスに入ると、以下のような感じ
<img width="400" alt="スクリーンショット 2020-07-17 22.08.56.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/675004/8690ad7a-dc6a-a0da-c046-b82bf02ef55e.png">


最安プランだと、Ubuntuなのは誤りないようですね。

はて、「Bitnami」とは何ぞや。
以下あたりで調べてみました。
>公式： https://bitnami.com/
>「BitNami」とは：　https://www.internetacademy.jp/it/programming/php/wordpress-customized-bitnami.html
>marketechlabo：　 https://www.marketechlabo.com/bitnami-multi-packages/

WordPressみたいなCMSツール　＋　各種ミドルウェア（MySql等のようなWordPress＋αで必要なツール）をパッケージで提供してくれるソフトウェア！！といった感じです。
調べてみた感じ、AWSやGoogle、Azureで使われているようですし、　
EC2やLightsailのように　「WordPressも一緒に構築してしまいたい」って時に利用されてるんですね。

それぞれのミドルウェアを自力でインストールした時と、構成が異なるようなので
１インスタンスで色々実現する場合は知識が必要そうです。

今回はLightsailの１インスタンスで、WordPress＋αを構築したいだけなので、十分です！
大規模なプロジェクトに使えるかは別として、　個人の学習やローカル学習ではもってこいです。
（色々設定器にしながら、１つ１つインストールする時代は無くなってきてるんだなぁ。と実感。）

---
...と脱線しましたが、無事インスタンス内には入れました。

>http://XXX.XXX.XXX.XXX/bitnami/index.html　

bitnami上でのWordPressの情報が記載されてるので読んでおきましょう。
<img width="400" alt="スクリーンショット 2020-07-17 22.58.08.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/675004/a82a2871-2739-e325-2cba-2bec3e13322c.png">




CLIで以下を叩いて、WordPressの管理Passを取得しておきましょう。
以下ファイルは、bitnamiユーザ直下に置いてありました。
（管理画面Pathに気づいてから、このデフォルトpassの在りか気づかなかった。。。）
<img width="600" alt="スクリーンショット 2020-07-17 22.53.00.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/675004/e66bc5f6-c2cb-24ae-3f77-f6470e1c4770.png">


```
cat ./bitnami_credentials
```


WordPressのデフォルトユーザー／パスまで、取得できたのでWordPressを触っていきましょう。

#2.WordPressの管理画面にログイン
「１」で取得した、アイパスで以下からログインしてみましょう。

>http://XXX.XXX.XXX.XXX/wp-login.php

<img width="400" alt="スクリーンショット 2020-07-17 23.05.52.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/675004/d55c8be5-0e12-9808-e03d-af67c0e8003c.png">


これで入れましたね！（仕組みと、手順を振り返ってみると、相当に楽ですねorz）

ということで、細かい設定はさておき　最小限ブログの機能を果たすところまで、
WordPressをイジイジしていきましょう。


#3.WordPress色々設定してみる

WordPressに関しては、たくさんの参考サイトがあるので、
分かりやすいサイトを元に、最小限の設定を進めていく。

> bazubu.com： https://bazubu.com/category/wordpress/wordpress-basic-settings

######1.日本語化
UIは日本語にさせてください。笑　　Intellijくらいしか、英語UIに慣れてません。
「グロナビ > Settings >　SiteLanguage」　で設定変更できます。

<img width="400" alt="スクリーンショット 2020-07-17 23.20.14.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/675004/6ac454c1-27d9-f5a5-4a94-404518d9748a.png">

######2.設定　「グロナビ > 設定」
　・サイトのタイトル
　・キャッチフレーズ
　・タイムゾーン
の設定はしておきましょう。

特に、サイトタイトルや、キャッチフレーズはSEO対策の１つに効いてくると思うが、
そこは別のタイミングで学習していくことにする。　（一旦仮置き）

######3.投稿設定　「グロナビ > 投稿設定」　
参考サイトみてみると、あまり設定はしなくてよさそう。

唯一更新情報サービスの設定は、SEO効いてきそうだなと見えたけど、
解説内容見る限り、確かに集客できるコンテンツを作ってしまえば、さほど関係ない部分だなと...。
少しでも、自サイトへの導線を伸ばしたり、　被リンク数増やしたい場合は設定してもOKて感じかなと。

ということで、今回はスキップ。

######4.表示設定　「グロナビ > 表示設定」
ここも一旦問題なさそう。

<img width="400" alt="スクリーンショット 2020-07-17 23.39.48.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/675004/b2bc3cc8-1e78-2e52-b405-dea3222120c0.png">


ただ、一番下の「検索エンジンでの表示」については、一旦チェックをつけておく。
あとでページ更新すれば、自ずとgoogle側でクロールしてくれると思うが、
なんか気分的にきちんと作り終えてインデックスして欲しいw


######5.ディスカッション設定　「グロナビ > ディスカッション設定」
基本的には、自サイト ⇄ 他サイトの更新通知設定や、　コメント等の設定のよう。
好みの設定に一旦設定。


######6.パーマリンク設定　「グロナビ > パーマリンク設定」
ここはいわゆる、各ページのURL設計ページのよう。

SEO少しかじった程度で、大手サイト飲食系・美容系サイトのURL設計等を解析した経験がありますが、
コンテンツの属性を意識したURL設計等、色々効果が出てくる部分でもありそうなので、熟考したほうがよさそう。
ここは、SEO学習の際に、切り出して取り上げてやろうと思う。（WordPressに限らず）

ある程度初期設定としては、これくらいでいいかなと。
カスタマー側の画面を見てみましょう。

#4.一般ユーザ画面を見てみる
はい！ (ドメインも設定してないので、IP直刺しですがw）
>http://176.34.37.122/
<img width="400" alt="スクリーンショット 2020-07-17 23.53.42.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/675004/4bad0405-ca6a-17eb-027c-7eb825fa2873.png">

デフォルトテンプレートが、とりあえず表示できましたね。
なんか私の思うイメージとは異なるので、一旦良さげな無料テンプレート探してきましょうw
以下の無料テンプレートを一旦拝借...!!　
（無料でここまでSEO対策組んであるとは。。。。意外と大手Webサイトよりも、ドメインの点数等除いて考えると、よっぽど強いのでは...？）

>https://thk.kanzae.net/wp/dl/

「グロナビ >　外観 >　テーマを追加 > テーマのアップロード」　で上記サイトのテンプレをUP。
（サーバへのFTPでも可能です）

...ごにょごにょして有効化したら.....
！！！

<img width="400" alt="スクリーンショット 2020-07-18 0.05.47.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/675004/7f534aeb-d461-57b4-867c-dad94b00f7a2.png">

しっかりしたテンプレートだなぁorz
カスタマイズしたら、色のあるページになりそうだ！（デザインの能力値ゼロですが。笑）

#5.カテゴリ分け＋テスト投稿
まだまだ、SEO対策、ドメイン設定、デザインいじるとこは多々ありそうですが、
学習OUTPUTのワークスペースとしてはあと一歩。

カテゴリ分け、テスト投稿ができれば一旦OK。
ということで、あと一息。

######1.カテゴリ分け（テスト投稿）
これは、投稿時にカテゴリ分けができるようなので、
テスト投稿と一緒に試行する。

「グロナビ > 投稿 >　新規カテゴリを追加」　で、カテゴリの定義ができそう。
親カテゴリ等も設定できるようなので、希望通りのイメージ。

<img width="400" alt="スクリーンショット 2020-07-18 0.16.03.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/675004/b1009d36-40db-2103-24f0-93722c4a3487.png">

次は、投稿。
いやぁ...canonical属性とかも、ぜーんぶコーティングしなくてできるんだ....。
今まで知らなかったことを知れてよかった。　（大半の人は知ってたのかな）
と共に、普段こういうページをテンプレでなく、デザイン作ってくれてるVD,WDさんには感謝だ。

<img width="400" alt="スクリーンショット 2020-07-18 0.21.24.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/675004/75c17106-11da-a72b-b058-ecf25c8f8234.png">

投稿ボタンで...

<img width="400" alt="スクリーンショット 2020-07-18 0.24.56.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/675004/00992c69-13f2-0c9f-e903-b3062767d700.png">

お！　カテゴライズができてる！！
グロナビか右側のバー部分に、カテゴリの一覧載せたい。。。。。

あと一踏ん張り。

#6.カテゴリをページ要素として出したい！！！！！
一応パンくずリストもあるし、以下のようにカテゴリを意識したURLでページ生成もできてる。
>http://176.34.37.122/category/test/

あとは....!この...カテゴリごとページを...。

ということで、カテゴリを頑張って表示できるようにしましょう。

とにかくWordPress色々触りまくってみたら、汎用的に色々なことができすぎる。。。
正直、リッチな画面だったり、js使った複雑な構成や、SPA構成のサイトじゃない場合は、
WordPressで事足りすぎるな...と実感しました。

色々触ってみて、以下２つでやりたいことが実現できそう。

######1.大きいカテゴリをグロナビのメニューにする　：　「グロナビ > 外観 > メニュー」
ここで、メニューを定義できます。
この　「メニュー」という要素は、グロナビにも適用できるし、フッタ部分のリンクにも適用できるしと、
感覚的にページ構成をいじれる作りになっているので、触りやすい。

今回は、例として各代表的なカテゴリを、ページ上部のグロナビ部に設定する。

<img width="400" alt="スクリーンショット 2020-07-18 1.02.20.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/675004/818e2575-bf50-e686-dc2c-05b946718436.png">

上図のように事前に親子階層を意識したカテゴリを作っておいて、
画面右側にカテゴリ要素を配置していく...と...はい。笑
簡単すぎて、笑けてきますね。　
解説サイト見らずとも、感覚的に使えちゃう辺り、UIも直感的でWordPressが好きになってきましたw

<img width="400" alt="スクリーンショット 2020-07-18 1.07.50.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/675004/877406e3-a368-6e78-1f00-9a31eb3bb24e.png">


######2.サイドバーにもカテゴリ階層を表示してみる　「グロナビ > 外観 > メニュー」
下図にあるような左のウィジェット要素を、適用したい右側の部品にドラッグ&ドロップすると、
要素が追加できちゃいます。

<img width="400" alt="スクリーンショット 2020-07-18 1.07.33.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/675004/d5c139ec-d77b-a7d4-c23e-e93363267470.png">

ということで、やりたいことは最小構成で満たしたい部分は完了！

以下、ドメインなくて、かっこ悪いですが我がサイトのリンクを...!
>http://176.34.37.122/


#7.終わりに
これで、カテゴリ管理ができて、カテゴリ別に記事を投稿できるような
最小構成のブログサイトが完成しました！
まだまだ、対応できる箇所も、ブラッシュアップする箇所もありますが、
ここをベースにtwitterや、qiitaと連携しながら学習・OUTPUTを行えるようになりましたorz

WordPress初見 +　Lightsail初見　＋　Qiitaによる記事投稿初　の状況で、
記事を書いたりする時間込みでも7時間程度で構築できたかと思います。

慣れてくると、正直30分もあれば、ここまでは構築できるなと感じていますので、
低コスト払ってでも、自サイトを気軽に作ってみたいなって方は試してみるの　どうでしょうか！

次回からは、今回作成したサイトをベースに、qiitaと連携して
各技術分野や、マネジメントの学習を発信していこうと思います。