{ "componentChunkName": "component---src-templates-blog-post-jsx", "path": "/post/migrate-wp-to-middleman-and-netlify/", "result": {"data":{"site":{"siteMetadata":{"title":"WEB EGG","author":"Leko - CTO at Yuimedi"}},"markdownRemark":{"id":"2885469b-c98e-585f-91ff-72d39c0c8927","excerpt":"こんにちは。 「サイトのデザインが変わった」と感じていただいた方がもし居たらありがとうございます。 2012年からずっとさくらVPS + Wordpressで運用していたブログをMiddleman + Netlifyに置き換えたので、経緯や方法について残しておきます。 背景 そもそもなぜさくら+Wordpress…","html":"

こんにちは。
\n「サイトのデザインが変わった」と感じていただいた方がもし居たらありがとうございます。

\n

2012年からずっとさくらVPS + Wordpressで運用していたブログをMiddleman + Netlifyに置き換えたので、経緯や方法について残しておきます。

\n\n

背景

\n

そもそもなぜさくら+Wordpressだったのか

\n

もう5年前のことなので記憶はあやふやですが。
\n当時の私はサーバサイド（PHPもシェルもWebサーバも含め）の理解が弱く、練習のために自前でサーバ立ててWP入れて運用を始めたんだと思います。

\n

ただ、かれこれ５年記事を書いていて思うのが、

\n\n

などの背景があり、思い切って静的サイトに移し替えようと思いました

\n

リニューアルで取り入れたいこと

\n\n

が主でした。
\n他にもAMPやらPWAやsw-precacheなど、フロントで試してみたい事は色々ありましたが、最低限上記は必須としました。

\n

ちなみにこのブログのソースはこちらから確認できます。
\nLeko/WEB-EGG

\n

想定するメリット

\n\n

想定するデメリットと対処法法

\n

ブログ自体を作成するコスト

\n

もともと使い慣れているMiddlemanを使用すれば大した手間もハマりもなく行けるであろうと予想
\nほかにもJekyllやGatsbyなどの静的サイトジェネレータも調べてみましたが、結局慣れてるMiddlemanにしました

\n

記事を作成するコスト

\n

素のMarkdownを使い慣れたテキストエディタで書けるので全く問題なし。
\nメタ情報もfrontmatterに突っ込めばいいだけなので問題なし。ただ、タグのサジェストがないとタグ名が表記揺れしそうで若干怖い

\n

予約投稿（cron相当）が失われる？

\n

Netlifyには特定のURLからビルドをトリガーしたり、APIが提供されていたりするので、
\nそれをHeroku schedulerやTravisのcronで叩けば回避できる

\n

Travisは最小で1回/1dしかビルドできない、Heroku schedulerなら1回/1hでビルドできるので、予約投稿に十分な細かさを持っていると判断

\n

サイト内検索を実装するコスト

\n

記事データをJSON化して、lunr.jsかElasticlunr.jsを使って自前で実装するか、
\nReact nativeやMiddlemanの公式サイトでも使われるAlgoliaやDocSearchなど、回避手段は色々ありそうなので、然程コストかけずに対応できそう。

\n

今まで使っていたWordpressのプラグイン相当の機能の実現

\n

取捨選択した上でMiddlemanのプラグインで代替手段を探した。
\nクリティカルなのはクリティカルなのは静的なシンタックスハイライトでしたが、それもプラグイン見つけてうまく馴染んだので問題なかった

\n

Gatsby vs Jekyll vs Middleman

\n

静的サイトジェネレータの選定のメモを残しておきます

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
#MiddlemanJekyllGatsby
言語RubyRubyNode
慣れ○△×
ツールとしての好み○△×
カスタマイズ性○○△
プラグインの豊富さ○○△
情報量△○×
\n

個人的にはこんな感じでした。
\nGatsbyというReactのSSRを利用した静的サイトジェネレータ、コンセプトやコードはかなり面白くて最初はこれを採用しようと思ったのですが、

\n\n

などの問題があり、使い慣れているMiddlemanを採用しました。
\nただ、MiddlemanもRailsの変化からかv4から大きく仕様やコードの構造が変わっており、数年前に使ったことあるだけの知識では結局どハマりしました。

\n

その辺の過程はまた別の記事に書き留めていきます。

\n

Heroku vs Github pages vs S3 vs Netlify

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
#Heroku+nginxGithub pagesAWS S3+CloudFront+Route53+ACMNetlify
HTTPS✔︎✔︎✔
HTTP/2✔✔✔
料金$7/月0従量制0
慣れ○△××
設定の簡単・確実さ○○×○
Webサーバの設定の柔軟さ△×○○
情報量△○○×
\n

という感じで、結果Netlifyに挑戦することにしました。　　

\n

AWSのACMの署名がメールでしか行えず、権威DNSをRoute53に移譲すればSESで受信するという選択肢があるそうなのですが、
\nサブドメインだけ移譲するパターンでうまく受信ができず、諦めました。

\n

Google Cloud Storageも頭によぎったが、結論としてS3を選外にしたので割愛します

\n

設定がAWS慣れてない私には難しく、かつACM（のドメイン署名）が突破できないので諦めました…。
\n権威DNSをRoute53に移行しないとSESでメール受信すらできないので、署名不可能

\n

WPで書いた記事を全てエクスポートする

\n

Jekyll Exporterというプラグインを利用し、全ての記事をFrontmatter付きMarkdownに変換しました。
\n新旧さまざまな書き方が混在しており、それらの統一もしたことなかったので、もちろんエクスポートしたままでうまく行くわけもなく、正規表現でゴリゴリと一括置換かけていきました。

\n

Bootstrap4を入れる

\n

Sassを使い、必要なパーツだけを部分的に@importして行くようにしました。
\nブログリニューアル時点で使ったのは、これらのファイルです。

\n
@import \"./variables\"; // ここでBootstrapの変数を拡張する\n\n@import \"bootstrap-grid\";              // 全部入りより最小限入ったもの\n@import \"bootstrap/variables\";         // Bootstrap内で使用する設定値の読み込み。上書きしたければここに変数が書かれている\n@import \"bootstrap/mixins\";            // Bootstrap内で使用するMixinの読み込み\n@import \"bootstrap/custom\";            // なんか要る\n@import \"bootstrap/utilities/flex\";    // FlexBox系のユーティリティを使用するなら必要\n@import \"bootstrap/utilities/spacing\"; // 余白系のユーティリティを使用するなら必要\n@import \"bootstrap/buttons\";           // ボタン\n@import \"bootstrap/forms\";             // フォーム。navbarで使用\n@import \"bootstrap/nav\";               // navbarのために必要\n@import \"bootstrap/navbar\";            // ページ上部に使用\n@import \"bootstrap/breadcrumb\";        // パンくず。メインコンテンツの手前に配置\n@import \"bootstrap/input-group\";       // inputの隣にアイコン置いたりするなら必要
\n

今まで使っていたWordpressのプラグイン相当の機能の実現

\n

Google XML Sitemap

\n

Aupajo/middleman-search_engine_sitemapを使えば良さそう。問題なし

\n

WP Social Bookmarking Light

\n

それぞれHTMLパーツ持って来ればいいだけなので特に問題なし

\n

Comet Cache

\n

静的ファイルなのでクエリ時間はもともと削減されている。
\n静的ファイルについてはNetlifyがよしなに配信してくれるので、あまり気にしなくても基本いい感じにキャッシュが効いてくれる

\n

Crayon Syntax Highlighter

\n

RubyのRougeを使って、HTML作成時にハイライト済みのHTMLにして描画時のパフォーマンスを上げる作戦
\nむしろ上位互換なので問題なし

\n

あとがき

\n

雑記的な感じになっておりますが、最低限公開できるだけのリニューアルは終わったかなと思います。
\nまだまだ治したいところ、追加したい機能、最適化したいアセットなどがモリモリですが、焦らずしっくりと進めていきます。

\n

もしこのブログ（記事の内容も含めて）に何か問題があれば、リポジトリのIssueを立てていただければと思います。
\nまた、書こうとしている記事のネタもIssueで管理しているので、暇つぶしがてらチラッと眺めてみていただけると幸いです。

\n

これからもWeb EGGをよろしくおねがいいたします。

","timeToRead":12,"frontmatter":{"title":"Wordpressで運用していたブログをMiddleman+Netlifyに変更した","tags":["Wordpress","AWS","Middleman","Netlify"],"date":"July 04, 2017","featuredImage":{"childImageSharp":{"fluid":{"tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='120'%20viewBox='0%200%20400%20120'%20preserveAspectRatio='none'%3e%3cpath%20d='M4%2014c2%204%204%205%205%202v-2l1%202c1%203%203%202%205-2l1-3v3c0%204%200%204%204%204%203%200%204-2%201-2-2%200-2%200-1-1%203%200%203-2%200-2-1-1-1-1%201-1%204%200%202-2-3-2-4%200-5%200-5%202l-1%203v-3c-1-3-4-3-4%200l-1%202-1-2-1-2c-2%200-2%201-1%204M3%2074v34h296V40H3v34m77-14l2%201%201%201-1%201c-1%200-2%201-2%203s0%202%206%202c4%200%206%200%206-2h2l1%201c-1%201%202%202%204%201l1-5v-4h-9v4l-1%204-1-4v-4h-5l-4%201m230%2018c0%204%200%205%202%206h4l1-1-1-1v-3c0-4%200-4%203-3%204%200%205%201%203%202l-1%204-2%202v1c1%200%202%201%201%202l1%202%201%201c-1%201%200%201%201%201l2%201h-6c-4%200-5%200-4%201s1%201-1%201c-1%200-2%200-1-1l-1-1-2%203c0%202%200%202%2012%202h13l-1-5a2627%202627%200%20010-12c1-3-1-5-5-5l-2-1-9-1h-8v5'%20fill='%23d3d3d3'%20fill-rule='evenodd'/%3e%3c/svg%3e","aspectRatio":3.34,"src":"/static/92b84a323834c47bf34bd56285ad0f95/8eab8/featured-image.png","srcSet":"/static/92b84a323834c47bf34bd56285ad0f95/1ec58/featured-image.png 334w,\n/static/92b84a323834c47bf34bd56285ad0f95/ccb4a/featured-image.png 668w,\n/static/92b84a323834c47bf34bd56285ad0f95/8eab8/featured-image.png 1336w,\n/static/92b84a323834c47bf34bd56285ad0f95/85e22/featured-image.png 2004w,\n/static/92b84a323834c47bf34bd56285ad0f95/2fba6/featured-image.png 2138w","srcWebp":"/static/92b84a323834c47bf34bd56285ad0f95/f7e47/featured-image.webp","srcSetWebp":"/static/92b84a323834c47bf34bd56285ad0f95/cd98f/featured-image.webp 334w,\n/static/92b84a323834c47bf34bd56285ad0f95/7535d/featured-image.webp 668w,\n/static/92b84a323834c47bf34bd56285ad0f95/f7e47/featured-image.webp 1336w,\n/static/92b84a323834c47bf34bd56285ad0f95/f6b67/featured-image.webp 2004w,\n/static/92b84a323834c47bf34bd56285ad0f95/ebf08/featured-image.webp 2138w","sizes":"(max-width: 1336px) 100vw, 1336px"}}}}}},"pageContext":{"slug":"/migrate-wp-to-middleman-and-netlify/","previous":{"fields":{"slug":"/es2017-arrow-func-syntax/"},"frontmatter":{"title":"条件付きな構文が多い昨今のNode.jsのアロー関数の構文をまとめてみた","tags":["JavaScript","Nodejs"]}},"next":{"fields":{"slug":"/automate-build-netlify-with-heroku/"},"frontmatter":{"title":"NetlifyとHerokuで予約投稿機能を実現する","tags":["Netlify","Heroku"]}}}}, "staticQueryHashes": ["2585454260","2954598359"]}