格安VPS + WordPress + Simply Static + GitHub Pagesで高速 & セキュアなブログを作る
このブログはタイトル通り、
- 海外の格安VPS (年額12ドル)上に
- WordPressを構築
- Simply Staticプラグインで静的ページを生成し
- GitHub Pagesで公開
という構成を取っています。
この構成のメリットとデメリット
メリット
- 安価(VPSとドメインで合計年間2,500円、月額200円程度)
- WordPressの豊富なテーマを使える
- 静的ページなのでWordPressのセキュリティ問題に悩まされない
- GitHub PagesはHTTPSに標準対応
- 独自ドメインもOK
- レスポンスが高速
- トラフィックも100GB/月までOK
- さらにトラフィック量の増大した場合にも、GitHub PagesからAmazon S3などに変えれば対応可能
特にWordPressの脆弱性を気にしなくて良いのは運用する上で非常に気楽です。
デメリット
反対に、デメリットを上げると下記の様な点になります。
- 構成要素が多いので、知識がより多く必要
- 記事の更新が反映されるまでに、
Simply Staticで静的ページの生成 → GitHub Pagesにpushを行う必要がある - コメント機能ほか、動的な機能は使えない
要求される知識が多いとは言っても、
一般的なLinuxサーバ、Apache、MySQL、PHP、Git、SSHが使えれば大丈夫です。
知らなくてもネット上に情報がたくさんあります。
構築手順
VPSを借りる
まずはVPSを借ります。
ユーザからの直接のアクセスはないので、スペックが低くてもOKです。
メモリが512MB程度あれば大丈夫でしょう。
AlphraRacksの場合、画面右上の「Special Deals」から安いプランを選びましょう。
私が選んだのは「New Website Special – Los Angeles OVZ 768MB」というものですが、
ちょうどいいプランが常にあるとは限りませんのでご注意を。
その後、購入手続きを進めてください。私はPayPal支払いを選択しています。
あとは仮想マシン(VM)のIPアドレスをメモしておきます。
サーバにWordPressをインストールする
次は借りたVPSにSSHなどで接続して、WordPressをインストールしていきます。
OSに合わせてApache、MySQL、PHPをインストールしていってください。
Ubuntuの場合、下記ページが参考になります。
WWWサーバはApacheよりもnginxのほうが高速ですが、
今回の構成では高速でなくともよいので、構築がラクなApacheをおすすめします。
VPSのIPアドレスにアクセスして、WordPressが表示されればOKです。
WordPressにSimply Staticプラグインをインストールする
WordPressの管理画面からログインして、Simply Staticプラグインをインストールします。
画面左側の「プラグイン」から「新規追加」として、検索欄に「Simply Static」と入力すれば出てきます。
インストールが完了すると、管理画面左側に「Simply Static」という項目が増えていますので、
そこから「設定」に進みます。
「リンク先URL」は公開するブログのURLを入力します。
「配送方法」は「ローカルディレクトリ」にして、その保存先を「/var/www/html_static」などとします。
(WordPressがインストールされている/var/www/html以外の場所であればOKです)
GitHubのリポジトリを作成する
GitHubはソースコードの共有リポジトリを提供するサービスですが、
静的なHTMLをホスティングしてウェブサイトにすることも可能です(GitHub Pages)。
GitHubにログインし(未作成の場合は作成してください)、
右上の「Create Repository」から新たにリポジトリを作成します。
作成後、そのリポジトリのSettingsタブに移動して、GitHub Pagesの設定を行います。
「Custom domain」のところに、自分のドメインを入力してください。
「Enforce HTTPS」は最初はチェックを入れず、最後にチェックを入れたほうがいいかもしれません。
(チェックを入れない場合はHTTPとHTTPSの両方でサイトが表示されますが、
チェックを入れるとHTTPでのアクセスはHTTPSにリダイレクトされます)
独自ドメインを取得する
独自ドメインを使う場合はレジストラでドメインを取得します。
私の場合は、最初に取得する場合はお名前.com
やムームードメイン
でキャンペーン価格を狙い、
その後Google Domainsに移管して一括管理しています。
独自ドメインのネームサーバの設定
独自ドメインでのアクセスを、GitHub Pagesのサーバに向けるためにネームサーバの設定をします。
英語ですが公式の情報は下記になりますので、何かあったらここをまず確認してください。
「www.」なしのドメインでアクセスする場合
「www.」ありのドメインでアクセスする場合
独自ドメインのレジストラでは、ネームサーバのホスティングサービスもしているところがほとんどですので、
その操作方法に従って設定します。
私はネームサーバをCloudFlareにして使っていますので、下記のような設定になりました。
ちなみに、なぜCloudFlareのDNSを使っているかというと、
CloudFlareのCDNを使った場合とGitHub Pagesのサーバから配信する場合のどちらが高速なのか検証するためです。
結果として、直接GitHub Pagesのサーバから配信したほうが速かったので、CDN機能はOFFにしています。
GitHubのSSH公開鍵をVPSサーバに設定
GitHubの自分のアカウントの「Setting」ページから、「SSH and GPG Keys」に進み、
「New SSH key」ボタンから、自分のSSH公開鍵を登録してください。
鍵の生成やGitHubへの登録手順は、下記ページを参考にしてください。
~/.ssh/configの中身が以下のようになっていることを確認します。
Host github github.com HostName github.com IdentityFile ~/.ssh/id_rsa_github (←自分の秘密鍵) User git PreferredAuthentications publickey
出力先ディレクトリにリポジトリをコピー
GitHubのリポジトリページに戻り、まずはリポジトリのURLをコピーします。
次に、SSHでVPSに入り、Simply Staticの出力先ディレクトリに移動します。
(上記の設定例では「cd /var/www/html_static」とします)
CNAMEというファイルがあるだけのリポジトリをローカルにコピーします。
git clone [email protected]:330k/blog-330k-biz.git
もしgitがインストールされていなければ、追加でインストールします(Ubuntuなら「apt install git」)。
Simply Staticで生成したファイルをGitHubリポジトリにPushする
以上で準備はできましたので、いよいよSimply Staticを使ってWordPressを静的なHTMLに変換します。
管理画面の「Simply Static」から「生成」とすすみ、「静的ファイルを生成する」をクリックすると、
WordPressページがHTMLファイルに変換されます。
VPSにSSHで接続し、GitHubのリポジトリにpushします。
cd /var/www/html_static/ git add -A git commit -m '最初のコミット' git push -u origin master
うまく行ったら、ブラウザから独自ドメインでアクセスしてみて、
WordPressの画面がきちんと表示されることを確認してください。
GitHub Pagesではpush後に反映されるまでに数分時間がかかりますので、
うまく表示されない場合はしばらく待ってみてください。
cronに登録して定期的に実行する
さて、WordPressの管理画面で記事を書き、
Simply Staticの画面から静的ファイルを生成し、
完了後に毎回SSHで接続してコマンドを打ってpushするのは面倒です。
そこで、cronでGitHubへのpushを自動的に実行するようにします。
以下の内容のシェルスクリプトを作成し、/var/www/auto_push.shとして保存します。
#!/bin/bash
cd /var/www/html_static
git add -A
message="Commit "`date '+%Y%m%d %H%M%S'`
git commit -m "${message}"
git push -u origin master
次に、「crontab -e」としてcronの設定ファイル編集画面に下記を追加します。
0 * * * * /bin/bash /var/www/auto_push.sh
これで毎時0分にGitHubにpushするようになりました。
記事を書いたらSimply Staticで静的ファイルを生成しなければならないのは変わりませんが、
ブラウザだけで完結するようになり、大きく省力化します。
バックエンドサーバのインデックス防止
VPSサーバの方をGoogleにインデックスされないように、
WordPressをインストールしたディレクトリには以下の内容のrobots.txtを作成しましょう。
User-agent: * Disallow: *
なお、robots.txtだけだとインデックスに登録されてしまう場合があります。
そのような場合は、.htaccessファイルでIPアドレス制限を行ってしまいましょう。
order deny,allow deny from all allow from (自分が使うIPアドレス)
その他注意
また、余力があればVPSサーバのWordPressもHTTPS化しましょう。
一般ユーザにアクセスされることがないとはいえ、
HTTP通信ではログイン時にパスワードを盗まれる可能性があります。
Let’s Encryptを使えば無料で証明書を作ることができます。
まとめ
構築するために知識や手順が多く必要ですが、
格安VPS、WordPress、Simply Staticプラグイン、GitHub Pagesの組み合わせで
安い・高速・セキュアなWordPressブログを作ることができます。
自宅以外ではブログを書かない、というのであれば
VPSを使わずPCにWordPress環境を作ることで、
費用を独自ドメインのみに抑えることも可能です。
