SSL化に合わせて、ブログをフルリニューアル&サーバ移転しました!

こんにちわ、ねづ(nzakr)です。

いつもお読みいただき、ありがとうございます!
SNSでURLを「参考になった」とのコメントと合わせてシェアされている瞬間をみると、すごくテンションがあがります。
また、直接「ブログ読んでます!」と言ってもらえたりすると、めっちゃ嬉しいんですよ。なので、ぜひお気軽に「読んでます!」って言ってください←

さて、表題の通り、ブログをフルリニューアルしました。

本来はSSL導入(https化)だけすればいいんですが、
今までやりたいなーと思っていたデザインの改善、技術的な負債もろもろを含めて、「一回全部リニューアルしてしまおう!」ということに。

なんだかんだで2週間くらいかかって、先日無事にリニューアルが完了。

というわけで、
今回のリニューアルでやったことをざっとまとめてみました。

【スポンサーリンク】

サーバ移転

さくらVPS

まずはサーバ移転。
これまでは、さくらVPSの1G(HDD100GB)で運用してましたが、
今回はアップグレードして、同じさくらVPSの2Gプランに変更しました。

VPSというのは、Virtual Private Serverの略称で、ようは専用サーバのように自由に設定できるサーバのことをいいます。
ブロガーの方だとあまり使っている方は少ないような気がしますが、サーバを自分の好きなように設定できるので、VPSを使っています。その分知識を求められますが…。

今までは
CentOS6.7, Apache2.2, Mysql5.1, PHP5.5
といういわゆるLAMP環境という標準的なやつです。

移転後は
CentOS7.3、Nginx1.10、PHP7、MariaDB
という環境に移行。LNMPっていうのかな。最近のサーバ環境っぽくなった。
CentOS7がさくらVPSで標準インストールできるようになったし、WordpressもPHP7対応だったので、特に問題なく稼働しています。
CentOS7は6系と標準コマンドが違うし、iptablesの設定も違うので戸惑ったけど、なんとか無事に導入できました。

newrelic上での計測ですが、0.3秒前後で表示できるようになりました。

SSL化

さくらSSL

今回の一番の目的です。
グーグル先生から「httpsできちんと暗号化しているサイトを上位表示するアルゴリズムに変更するよ」というお知らせがあったので、重い腰をあげてようやく対応。

SSL証明書は、サーバと同じ会社のさくらのSSLで購入しました。
ブランドはラピッドSSLで、2年契約で2,700円(税抜)
申し込みから発行まで2日程度で完了しました。

導入自体は事例も多いので戸惑うことはなかったですが、keyを保存し忘れて、まさかの再発行することになりました…。ちなみに、再発行は無料で対応してくれました。

静的ファイルをgzip圧縮

静的ファイルをgzip圧縮させました。
旅行記などをよく書いているので、記事単体はどうしても写真が多くなり、読み込みが遅くなってしまいます。
nginxに移行したし、これを機にgzipの設定をしてみました。

デザインの変更

デザイン

続いて、デザインの変更。
前のデザインはコードを書きながら考えて作ったので、かなり適当でした。
いい加減飽きるし、コードも汚いし…というわけでスクラッチで作り直しました。

デザインは話題のミニマルデザイン風にしました。
あまり色を使いすぎず、余白を残しつつ、という感じで…っていう気持ちでやりましたけど、デザインはあまり得意じゃないので、雰囲気だけです。
フォントも流行りの游ゴシック体に。流れに乗っかるの大事。
個人的なアレだけど、ミニマルデザインって日本語フォントに合わない気がする。

CSSはFLOCSSで設計

CSSもFLOCSSで設計してみました。
BEMとかSMACSSとかあるけど、なんか「最近はFLOCSSがイケてるらしい」と聞いたので、採用してみました。

ようはBEMとSMACSSのいいところを組み合わせた設計思想ですね。
途中からオレオレルールになってしまったけど、まあ自分しか触らないし無問題。

CSS設計っていろいろあるけど、自分が使いやすいのを使えば良い気がする。

gulpでassetsファイルをコンパイル

gulp

最近では使うのが当たり前になってきましたねー。
cssとjsのを文法チェックやコンパイル、画像ファイルの圧縮、結合などなど、こういったツールがないともはや開発が辛くなっちゃいました。
ホントはWebpackを使いたかったけど、cssのコンパイルがどうしても上手くできず、面倒になって、慣れているgulpを使いました。

cssを一元化

CSSファイルを一元化したかったので、gulpで結合しました。
もともと別で読み込んでいたのはfont-awesomeだけでしたが、

<link rel="stylesheet" href="〜">

というタグを統一してリクエスト数を減らしたいなーと思ったので、ライブラリもまとめてコンパイルしてました。

WordPressプラグインで読み込まれる部分は仕方ない…。
CSS、JS等が読み込まれるプラグインは極力使わないようにしてます。

jsをES6(ES2015)で書く

js(javascript)もES6で書きました。
Babelify + Browserifyでコンパイルしています。

cssの一元化同様、

<script src="jquery.js"></script>

という記述を減らしたいので、npmでimportするためにES6にしています。
jsをたくさん書くようなつくりではないので、ほぼ目的はこれだけ。

テーマをgitで管理して自動デプロイ化

bitbucket

テーマファイルはgitで管理しています。

以前はテーマファイルをFTPでアップロードしていましたが、デグレったりすると面倒だし、さすがにこのご時世FTPは使いたくないということで、Git管理+自動デプロイの仕組みを導入。

githubだとプライベートリポジトリが有料なので、bitbucketを使っています。
bitbucketのgithookで、masterブランチにpushすると自動で更新されるようにしています。この設定には、bitbucket-ryncというライブラリを使いました。

まとめ

リニューアルに合わせて、やったことをまとめてみました。
サーバ環境からブログのデザインまで、ほぼ全部作り直してますねw
そりゃ時間もかかるわけだ…。

サーバ環境を整えたので、表示速度も改善されたのは大きいですね。
普通のレンタルサーバーだとここまでできないと思うので、VPS様々です。

記事も読みやすくなっているはず…。見た目については、適宜調整していきます。
来月から忙しくなるので、今月中に無事リニューアル完了できてよかった。

これからもNEZU.logをよろしくお願いします!
でわでわ。

VPSサーバならさくらVPSがオススメ!

レンタルサーバーとしてブロガーにはエックスサーバーが人気!

ブログ運営についてはこの本がオススメ!

この記事を書いた人
ねづ
『NEZU.log』運営管理者。Webエンジニアの傍ら、趣味でこのブログを運営。シェアハウス在住。2015年は海外情報(主にアジア圏)と効率のよい生活の情報発信がテーマ。
この記事が面白かったらいいねしよう!
記事のタイトルとURLをコピーするコピーしました!
こちらの記事もどうぞ
こちらの記事もどうぞ

コメントを残す

コメント※必須
名前※必須
メールアドレス※必須(非公開)

このブログを書いている人

運営者 : ねづ

主にWebの企画、開発の仕事をしています。
海外が好きで、仕事、旅行問わずよく行きます。
フィリピン(セブ)で10週間留学後、現在はカナダ(バンクーバー)に滞在。留学、海外生活や旅行記をこのブログで書いています。

詳しいプロフィールはこちら

LINE@作成しました!お気軽にどうぞ!
友達登録は下記QRコードを読み取ってください
LINE@ QRコード

カテゴリ一覧
キーワードで記事を探す
下記から更新情報を受け取れます!