ちょっとサイトを立ち上げるまで ~ 言葉にならない言葉

ブログと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を入れておく。

ドメイン

サイト用のドメインは無料のドメインを用意する。

freenom
http://www.freenom.com/ja/index.html
マイナーな国のドメインを無料で取得できる。

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不要そうなものはデフォルトでも入れてないです。

カスタマイズフォントや日本語用の設定をせっせとカスタマイズ。

・CSS
cssを修正したいときは下記に 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.php
google 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は凄く便利。

準備したものが全て上手くかみ合わなかった形になってしまったが、、、

この反省と経験を生かして次に役立てよう。。。

できる逆引き Googleアナリティクス Web解析の現場で使える実践ワザ240 ユニバーサルアナリティクス&Googleタグマネージャ対応

posted with amazlet at 17.07.24

木田和廣できるシリーズ編集部
インプレス
売り上げランキング: 2,883

Amazon.co.jpで詳細を見る

Share: Facebook Twitter Google+

言葉にならない言葉

2017年7月27日木曜日