Wordpressを辞めてから一年以上が経過しましたが、かなり快適なブログ環境が手に入ったと満足しているところです。サーバー維持費が掛からず、収益化がかなり容易なものになりました。
現在は「Hexo」を利用してブログを構築しています。Hexoはnode.jsの静的サイトジェネレーターです。静的サイトジェネレーターは様々なものが存在していて、Jekyll、Hugo、Middleman、Octopress、Gatsbyも有名です。
Hexoのお陰で快適にブログが書けるようになり、ブログが手軽なものになりました。しかし、Hexoだけに限らず静的サイトジェネレータは、プラグインが充実していないことが大きな欠点です。
そこで、ワードプレスからhexoへ移行して1年で多くのプラグインや代替案を考えてきました。
| 無かった機能 | 代替案や作成したプラグイン |
|---|---|
| AMP HTML対応 | hexo-generator-ampの作成。AMPの生成と妥当性の検証自動化が可能に。 |
| 関連記事・人気記事 | hexo-related-popular-postsの作成。wordpressのrelated-postsとpopular-posts系プラグインのような機能を一つにしている。 |
| コメント欄 | 当ブログでは未対応。設置するならdisqusを使おうと思う。Disqusとはブログのコメント機能を拡張するシステム |
| 問い合わせフォーム | 当ブログでは未対応。SNSへ連絡を求める方針で十分かなと妥協。対応するならAWS Lambdaで対応する案が良さそう |
| 画像の比較 | hexo-tag-twentytwentyの作成 |
| インスタグラムの埋め込み | hexo-tag-instagramの作成。instagramの投稿をURLやIDだけで埋め込みできる。 |
| ツイッターの埋め込み | hexo-tag-twitterの作成。twitterの投稿をURLやIDだけで埋め込みできる。 |
| flickr画像の埋め込み | hexo-tag-flickrの利用と改良。flickrの画像をIDだけで埋め込みが可能になる。 |
今回はその中の一つであるhexo-generator-ampに、大幅なアップデートを加えたのでご紹介したいと思います。
hexo-generator-ampは記事ページ(./index.html)とは別にAMP HTML(./amp/index.html)を自動で作成してくれるプラグインです。生成されるAMP HTMLはGoogle AMP Projectの仕様に沿った形式で出力されます。
AMPページと通常のHTMLページ
当サイトでは、以下のようにAMP HTMLを用意しています。実例として参考にご覧ください。
- 通常のウェブページ : markdownの記法まとめ
- AMP HTML版のウェブページ : markdownの記法まとめ(AMP HTML)
AMP HTMLが自動検証できる
今回のアップデートでは、AMP HTMLの有効性を自動で検証する機能(オート・バリデーション・チェック)を追加しました。AMP HTMLを生成した直後にAMP HTMLの記述が正しいのかをプラグインが自動で確認し、問題があればコンソールで知らせてくれるというものです。手間の掛からないAMP HTML導入と品質維持に活用ください。
一般的な投稿記事であれば、プラグインがAMP HTMLの仕様に沿ったデータを作成してくれますが、万が一AMP HTMLの記述に問題が見つかったときには次のようなエラーメッセージを表示します。
通常の方法ですと、ChromeやAMP Validator、エクステンションを使って、以下のように1頁ずつ確認していくことになります。また、gulpをお使いの方はgulp-amphtml-validatorタスクを走らせて一括チェックするという事もできます。
しかしプラグインの場合は、全てのAMP HTMLページが一括自動で検証されていくのが特徴です。機会がありましたらhexo-generator-ampをお使いください^^
完全にポジショントークとなってしまいますが、これからの時代は、ブログを立ち上げる際にWordpress(ワードプレス)を敢えて使うのは、もはや時代遅れであり、愚かな選択と言われてしまうところまで来てると思います。もしこれからブログを立ち上げる方は、是非とも新たしい手法に目を向けて頂きたいと思います。それでは快適なブログライフを^^