ブログとwikiを組み合わせたようなmarkdownで作れてカスタマイズ性が高くて
DBとかメンテナンス要素が少ないサイトを作ってみたかった。
まずAWSの勉強もかねてサーバから立ててみることにする。
サイトを立ち上げるために必要な情報をあつめる。
最初にいうと結果は上手くスタートすることができませんでした。
これからサーバを１から立てようなんて考えている人はまず肝に銘じて欲しいです。
反省点
最初に反省点から。
「なんだよ。知ってるよ！常識だろ」という方はここで読むのをやめて問題ないですｗ
検索インデックス対応今の世の中googlebotにインデックスされていないサイトはこの世に存在しないサイトと同義です。
SEOを、アクセスをして欲しいサイトを立てるのであれば事前にティザー公開し、
サイトの存在、ドメイン、サイト内容をクローラにインデックス登録させておきましょう。
インターネットに後悔したサイトを作ったからといって、
すぐに検索で出てくるなんて思ったら大間違いです。
アフィリエイト広告も同様です。申請してから取得、表示まで1週間はかかります。
もろもろ準備して、実際に運用を始める1ヶ月前くらいから公開しておいたほうがいいと思いました。
サイトドメインサイトに独自ドメインを利用するなら信頼度を大切にしましょう。
ドメインは信頼が大事、広告がブロックされたり、クローラや検索から優先順位を低く判断されたりします。
お名前.comで年額数十円のものもあるので、ここは妥協せずにきちんとしましょう。
CMSあなたのやりたい事はなんですが？
そのCMSは目的を達成できますか？形だけ達成できて運用がやりづらくないですか？
エイヤっとやってみるのも大事ですが、無謀と勇敢が別物です。
これらを踏まえて下記の内容を参考にしていただければ失敗しないと思います。
実はもっと賢いやり方があったのであれば後学のためにも教えていただけると凄くうれしいです。
改めて既存のブログサービスやVPSは良くできていたんだな。。。と勉強にはなりました。
準備したもの
・インフラ
・WEBサーバ
・ドメイン
・SSL証明書
・CMS
インフラ環境
インフラ環境は勉強もかねてAWSを選定した。
他に安くて早くて上手いVPSがあるかも知れないけど、
幸いインフラ知識のみあるのでAWSで自前でやれば安くなるんじゃないかと浅い考え。
サーバはEC2でAmazonLinuxを立てる。
dockerも考えたけど単一サーバで色々要領よくやったほうが安そうだったのでEC2。
もちろん色々自分でやらなくてはいけないけど。
最初はそんなにアクセスこないだろうから
t2.micro 無料利用枠で立てる。
コンテンツもブログ機能+Wiki程度なので無料利用枠の30GB。
SSH用に
Elastic IPをWEBサーバ用に１つ取得して割り当てておく。
AWSのALBを利用すれば無料でSSL証明書を利用できるため
ALB は利用。
初期時はWEBサーバ1台だけど、将来増やす事態になるかもしれないし。
もちろんセキュリティグループはしっかり設定。
WEBサーバ
OSの初期設定はいい感じにしておく。
WEBのフロントエンドは
Apache 2.4。
CMS用に当たらしめのPHPをインストールしておく。
AmazonLinuxはRedhat等OSの6相当らしいので、
ius-repoから
php70を入れておく。
ドメイン
サイト用のドメインは無料のドメインを用意する。
DNSはAWSのR53を利用。
SSL証明書
AWSでALBを利用していれば無料のSSL証明書が利用できるのでそれを。
詳しくは下記サイトが参考になる。
http://dev.classmethod.jp/cloud/aws/mesoko-r53-cdn/http://dev.classmethod.jp/cloud/aws/acm-verifydomain-ses/freenomの場合whois情報は設定できないので、何とかしてメールを受信する必要がある。
※AWSの証明書の場合どちらにしろそれしかない。
SESを新たにサービスインして受信用の設定をする。
何度も同じことしたくないので、ワイルドカードで証明書を取得しておく。
ALBのドメインエイリアスやあれやこれやを設定して完了。
ここまででサーバに対してHTTPSでapacheのデフォルトページが表示されている状況。
がんばってここまで2日くらいかな。
CMS
さて、何のCMSを採用しようか。
WordPressが色々便利だけどDBつかったり、セキュリティ対応が中々めんどくさそう。
OctoverもよさそうだけどそこまでPHPの知識はない。
なので表題の要望を満たすために「Grav」というCMSを採用することにした。
Gravのインストールgravを入手してインストールウィザードを完了する。
https://getgrav.org/まずびっくりするのが初期だと最低限のプラグインのみで、
まるですぐ利用できるレベルになっていないということ。
ブログレイアウトのテンプレートは色々あるけどデフォルトのを利用する。
シンプルで基本機能は入っていてカスタマイズもしやすい。
初期設定管理画面にログイン後、自身ユーザーアカウントを押すと環境設定画面になります。
そこで
言語を
日本語に選択
UIが日本語になる。
設定・タイムゾーンを
UTC+9 Asia/Tokyo に変更
・日時フォーマットは見やすいように好みで変更
・HTTP Expires デフォルトは7日になっているけど長いので12時間くらいに変更
・HTTP Tragも有効化しておく
・Markdown Markdown extra有効化
・キャッシュ 無効化。最初だけ、更新が落ち着いてきたら有効にする
・キャッシュ 存続時間をデフォルトは7日になっているけど長いので12時間くらいに変更
・高度 Force SSL有効化。
サイト設定設定のサイトタブより。
・サイトタイトルを設定。ヘッダーに表示される
・Default language ja へ
・メタデータ。サイト情報を登録しておく。
管理画面URLの変更初期の管理画面URL
/admin は予測されやすく、攻撃されやすいため一意のURLへ変更する。
「プラグイン」-> 「Admin Panel」から
Administrator path の内容を変える。
変更後即時反映されてセッションが切れるため注意。
プラグインの追加デフォルトテーマで利用されているプラグインすら入っていないためインストール。
プラグインにチェックマークがついているものがテーマで利用しているものっぽい。
たぶんこの辺。。。。抜けもれているかも
・Archives
・Blogroll
・Feed
・Sitemap
・SocialButtons
・Taxonomy List不要そうなものはデフォルトでも入れてないです。
カスタマイズフォントや日本語用の設定をせっせとカスタマイズ。
・CSScssを修正したいときは下記に
custom.css を配置して記述することでデフォルトを上書きできる。
とりあえずフォントと
h4 タグは太字になるように変更。
tr,
tdは表の使い方によるけどデフォルトだと文字が大きくたくさんの列を書けないため小さくしている。
# user/themes/antimatter/css
html, body, button, input, select, textarea, .pure-g, .pure-g [class*="pure-u"] {
font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
}
h1, h2, h3, h4, h5, h6 {
font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
}
h4 {
font-weight: bold;
}
tr, td, th {
font-weight: bold;
font-size: 7px;
}
・テンプレートデフォルト言語あんまり意味ないきがしているが一応 デフォルト言語を設定しておく。
# user/themes/antimatter/antimatter.yaml
enabled: true
default_lang: ja
dropdown:
enabled: false
・日本語表示設定サイドバーやメニューの表示を日本語に修正。
# user/themes/antimatter/languages.yaml
en:
TRANSLATION_TEST: Antimatter!
BLOG:
ITEM:
CONTINUE_READING: 続きを読む
NEXT_POST: 次の記事
PREV_POST: 前の記事
SIDEBAR:
SIMPLE_SEARCH:
HEADLINE: 検索
RELATED_POSTS:
HEADLINE: 更新記事
RANDOM_ARTICLE:
HEADLINE: Random Article
FEELING_LUCKY: I'm Feeling Lucky!
SOME_TEXT_WIDGET:
HEADLINE: スポンサードリンク
POPULAR_TAGS:
HEADLINE: タグ
ARCHIVES:
HEADLINE: アーカイブ
SYNDICATE:
HEADLINE: Feed
FORM_DATA:
SUMMARY: "Here is the summary of what you wrote to us:"
ERROR: Error
※本来はTOPの
en:を
ja:で用意すればテンプレートの
default_lang: jaを見て換わりそうなのだがやり方がわからないので
en:を書き換えておく
・サイト内検索gravではsimplesearchというプラグインがあるがイケてないので乗り換え。
下記記事を参考にGoogle Serchを取得する。
http://seolaboratory.jp/other/2016062936916.phpgoogle serchをデフォルトのserchが配置される箇所に埋め込む。
テンプレートを直接編集。
# vim user/themes/antimatter/templates/partials/sidebar.html.twig
{% if config.plugins.simplesearch.enabled %}
<div class="sidebar-content">
<h4>{{ 'SIDEBAR.SIMPLE_SEARCH.HEADLINE'|t }}</h4>
{# Google search #}
～この辺にJavaScriptsを貼り付け～
{# {% include 'partials/simplesearch_searchbox.html.twig' %} #}
</div>
{% endif %}
広告GoogleAdsをテンプレートに埋め込む。
と思ったらGoogleAdsのタグとGravは相性が悪いらしく、テンプレートにタグを書いても、
記事にタグを書いても上手く動かない。
下記トピックを参考にすれば上手く表示できるらしい。
https://muut.com/i/getgrav/general:adsense-script-in-grav-cont要はタグをtwig形式でテンプレート化させてそれをmarkdown側から呼び出して処理させる方法らしい。
設定からtwigの読み込みを有効化する必要はある。
失敗に書いたけど恐らくドメインの制限で広告を確認できていないため未確認。
コメント機能プラグインであるコメント機能は微妙なので、DISQUSサービスを利用する。
下記サイトを参考にタグを設置する
https://yoshinorin.net/2016/11/04/setup-disqus-to-blog/ブログ記事に設置
# vim user/themes/antimatter/templates/item.html.twig
<div class="blog-content-item grid pure-g-r">
<div id="item" class="block pure-u-2-3 h-entry">
{% include 'partials/blog_item.html.twig' with {'blog':page.parent, 'truncate':false} %}
{# DISQUS COMMENT FORM #}
～～この辺にJavaScriptsを貼り付け～～
Wikiにも配置
# vim user/themes/antimatter/templates/default.html.twig
<div class="blog-content-item grid pure-g-r">
<div id="item" class="block pure-u-2-3 h-entry">
{% include 'partials/default_item.html.twig' with {'blog':page.parent, 'truncate':false} %}
{# DISQUS COMMENT FORM #}
～～この辺にJavaScriptsを貼り付け～～
ソーシャルボタンの配置インストールしたプラグインを有効化する。
# vim user/themes/antimatter/templates/partials/blog_item.html.twig
<div class="list-blog-padding">
{# socialbuttons plugin #}
{% include 'partials/socialbuttons.html.twig' with {'url' : page.url} %}
{% if page.header.continue_link is sameas(false) %}
デフォルトのソーシャルボタンはちょっと大きいので、CSSを調整
widthとかを調整しておく。
# vim user/plugins/socialbuttons/vendor/rrssb/css/rrssb.css
大体この辺の作業が完了するまでに3日くらい。Gravの中身把握にめちゃ時間かかった。
サイト公開
大体サイトの準備ができていい感じの見た目にもなったので公開する。
と
ここで気がつく。
botがこない。検索エンジンにindexが張られてないからアクセスも来ない。
そりゃそうだよね。
広告も取得したばっかりなので1週間後まで表示されない。。
知ってるよ。そうだよね。
Google Sercheへクロール申請しましょう。
下記を参考に、Fetch as GoogleからとりあえずTOPだけでもindsex登録&bot申請します。
https://support.google.com/webmasters/answer/6065812?hl=jaインデックスへの登録状況は検索バーに下記を入れて確認しましょ
site:あなたのサイトドメイン名インデックスに登録されないと当然サイト内検索も何もひっかかりません。
サイトマップの登録しましょう。
Google Serche Conoleでsaitemapを登録しておきます。
プラグイン入れていれ自動生成されているので、登録しておく。
SNSへの告知しましょう。
今の状態ではあなたのサイトは検索しても出てこないし、存在しないサイトです。
せめてもの抵抗でSNSでハッシュタグつけて更新するたびに飛ばしてアクセスを呼び込みましょう。
他にサイト持っているのであればリンク張るなりして助けましょう。
Google Analytics無料だし導入しましょう。テンプレートの適当なところに入れればいいと思います。
記事を書くとにかく書く。
サイト運用
公開後の作業
運用コストAWSの利用費用だけですね。
初期はアクセスなんてほとんど来ないので見積もりツールで見ると月額38$、4500円くらいかな？
他のクラウドサービス使ったほうが安そうｗ
SSL化ができるかはおいておいて。
画像サーバ記事で使う画像を配置してブログから参照できるような環境が欲しい。
GoogleフォトとかDropboxでもいいかもしれないけど。
AWSnの
S3を利用しようと思ったけど、
HTTPS化とかやりだすとめっちゃ金かかりそうなので。
ウイルススキャンソフトのインストールLinuxのアンチウイルスソフトはClamavがポピュラーだとおもうが、
知っていてつまらないのでSOPHOS AVを導入してみる。
https://www.sophos.com/ja-jp/products/free-tools/sophos-antivirus-for-linux.aspxアカウント登録的なものの入力を求められます。
・マニュアル
https://www.sophos.com/ja-jp/medialibrary/PDFs/documentation/savl_9_sgeng.pdf・設定マニュアル
https://www.sophos.com/ja-jp/medialibrary/pdfs/documentation/savl_9_cgeng.pdf問題はこれをどうやって通知するようにするか。。。SES？
最後に
細かいところはおいておいてざざっと１からサイトを立てるまでをやりました。
その結果検索にひっかからない、流入もない、広告もはれない、
月額5000円以上の運用費がかかるサイトが3日くらいで立ちましたとさｗｗ
SSL証明書はLet's Encryptを採用すればLBも必要ないし、もう少し安くできたかも。
ワイルドカードは魅力だけどAWSサービスに縛られる必要もなくなる。
数台～数十台のサーバやドメインを運用するのであればAWSでもいいかなと思いますが、
数台規模であればAWSはちょっと高くつくなという印象です。
何よりドメインは重要なんだと再認識。
サイトの信用度やSEOの優先度がそこですべて影響されてしまう。
R53は凄く便利。
準備したものが全て上手くかみ合わなかった形になってしまったが、、、
この反省と経験を生かして次に役立てよう。。。
木田 和廣 できるシリーズ編集部
インプレス
売り上げランキング: 2,883
