静的サイトジェネレータHugo

Hugoが爆速であること、HugoがGolangで作られていて読みながら勉強したいという理由で、JekyllからHugoに移行した。 基本的には、_postディレクトリにあるものを、Hugoでいうcontent/postディレクトリに配置すればよい。テーマを指定せずに、Hugoとしても何も出力されないのでそこは注意すること。

目的 Hugoにおける、categoryとtagの生成箇所を特定して、テーマ作成に役立てる。 用語確認 Taxonomy　分類 Term Taxonomyに含まれるキー Value　Termに割り当てられたコンテンツの1つ Taxonomy Templated Taxonomy Templates | Hugo taxonomiesを利用する場合、2つ方法がある。

この記事で書くこと Circle CIの設定 Circle CIからさくらVPS(CentOS 6.4)へのrsyncでハマったこと circle.ymlのRuby, Pythonの設定 実現したいこと GitHubのリポジトリに、git pushした後、以下の作業をCIで実現したい。

Hugo Data-Driven Contentを試してみる。 目的 サイドバーの人気記事をJavascriptを利用せずに、表示できるようにしたい。 脱サードパーティアプリ。

静的ジェネレータ「Hugo」のインストール方法を紹介します。 公式のチュートリアルは、こちらです。 Install Hugo

今、自分でブログ・サイトを構築するとしたら、どんな選択肢があるでしょうか。 さすがにHTMLを自分で手打ちするのは大変です。 なんらかのCMS（Content Management System：コンテンツ管理システム）を利用することになりますが、そのCMSにもさまざまな種類があり、どれを選んだらよいのでしょうか。 私自身、CMSとしては Lokka (Ruby), WordPress (PHP), Jekyll (Ruby), Octopress (Ruby)、 Middleman (Ruby)と利用してきました。 どのCMSも一長一短ですが、Ruby, PHPなどの動的スクリプトで構成されるCMSは共通してビルドの遅さを感じます。 そこで、ビルドが高速という噂の Hugo (Golang)に移行したところ、快適でシンプルなブログサイトを構築できましたので、今回はその Hugo の紹介をします。

公開　Deploy Hugoには、サイトを生成する仕組みはありますが公開する仕組みは持っていません。そのため、Hugoで生成した生成物（HTML+CSS）を何らかの方法で、Webサーバに持っていってあげなければいけません。 必要なのは、どこに公開するかと、どうやって公開するかです。

技術書の紹介をする際も、カエレバのようなリンクビルダーを利用してきましたが、重い腰を上げてHugoのshortcodesとData-driven Contentで対応しました。 使用方法 {{% amazon 477418392X %}}と記述することで、以下の結果を得ることができます。 みんなのGo言語【現場で使える実践テクニック】 出版社：技術評論社 著者:松木雅幸mattn藤原俊一郎中島大一牧 大輔鈴木健太稲葉貴洋発売日: 2016/09/09 AmazonKindle楽天市場Yahoo!ショッピング

現在（2017/3月）、Hugoで生成した静的サイトをホストするためにさくらVPSを利用しています。 さくらVPSは2年近く使ってきましたが、そろそろ更新時期した（1年まとめて契約しているため）。 自分が契約したタイプはデイスクがHDDのままSSDに変更できないタイプだったので、新規契約し直すか、Conoha VPSに切り替えるか、それともVPS自体を契約しないとするか迷っています。 良い機会であるため、静的サイトのホスティングをVPSではなくクラウドサービスを利用しようと検討しました。 目次 移行先検討 Netlifyとは カスタムドメインの設定方法 お名前.comでの設定 app.netlify.comでの設定 リダイレクト処理 NetlifyでHugoを使うときの注意点 _headers ビルドにNetlify以外のCIツールを利用する場合 参考 移行先検討 GitHub Pages Netlify 自分の中ではGitHub PagesかNetlifyの2択でした。 静的サイトのコンテンツはGitHubにコミットしているため、最初は、GitHub Pagesにしようとしていました。 しかし、現状HTTP/2に対応していないことからあまり気乗りしませんでした。 もともとVPSを利用していたときには、 Lets’s Encryptでブログの常時SSL化にチャレンジのように、常時SSLに対応したり、h2oをインストールしてなんとかHTTP/2に対応した経緯もあり、せっかくなら対応できると嬉しいです。 その点、Netlifyを試してみたら「これで決まり！」と思うぐらい良かったのでまずはNetlifyで運用してみます。 Netlify: All-in-one platform for automating modern web projects

完全に自己満足かもしれませんが、以下の理由で画像の最適化に取り組みました。 Google PageSpeed Insightsで毎回画像サイズが最適化されていないと毎回怒られる 画像ファイルのサイズが無駄に大きいため、iPhoneからアクセスした時に余計なパケットを消費するのが悔しい 画像の最適化を全て手動でやると挫折してしまうので、タスクランナーであるgulpで自動化を行いました。

Hugoでは、ちょっとしたHTMLタグを記事やテンプレートに差し込みたいと思った場合、Shortcodesという便利な機能が使えます。

Hugo | Hugo 0.27: Fast and Flexible Related Content! Hugo | Related Content いつのまにかHugo 0.29から関連コンテンツ表示機能が追加されています。これによって他のCMSではプラグインで簡単にできていたのに、Hugoではできないというポイントが解消されました。もはや、Hugo最強説！！。 さっそくこのブログにも試してみました。 目次

Hugo v0.28からPython Pygmentsに頼らず、Goの機能でシンタックスハイライトが可能になりました。 これにより、シンタックスハイライトを行なっているコンテンツがあったとしても、キャッシュなしで高速なビルドができるようになっています。 Hugo | Hugo 0.28: High-speed Syntax Highlighting!

概要 今まで、はてなダイアリー(d.hatena.ne.jp/meganii)の記事は移行せずにそのまま残していました。 しかし、Scrapboxのユーザー会に参加して過去コンテンツの重要性に気付き、今のブログに全て集約したいと考えました。 そこで、はてなブログを経由させて、独自ドメインのブログに記事を全て移行しました。 その結果、はてなダイアリーからはてなブログにブックマークを含めて簡単に移行できました。 その後の独自ドメインへの移行も、ページ価値を引き継いで、問題なく移行できました。

HugoのThemeプロジェクトをgit submoduleで扱う方法について調べました。

ミニマルCSSフレームワーク「 A Responsive CSS Grid for AMP | 1BX 」を試してみました。 目次 TL;DR AMP用のCSSフレームワークに求められること 1BXとは ハマった点 解決方法 参考 TL;DR Hugoで作成するようなブログにおいては 1BX で十分構成可能 サイズが小さくても、グリッドレイアウトを利用可能 2文字クラス名を多用しているため、HugoのSyntax Highlighting(Chroma)のクラス名と衝突するが、Inlineオプションを利用することで回避可能

このサイトもAMP対応したのだから、LighthouseやPageSpeed Insightsのスコアもきっと高いはずと計測してみたところ、全然スコアが出ていなかったので改善しました。その時のメモを残しておきます。 目次 TL;DR 計測 セルフホストしたAMP Pagesを最適化する 1. 最初のタグはmeta charest tagで始め、その後残りのmeta tagを記述する 2. AMP runtime v0.jsをpreloadする 3. Render-delaying extensionsが含まれているのであれば、preloadする 4. preconnectを利用して異なるドメインに対するコネクション確立を高速化する 5. AMP runtimeを読み込む 6. Render-delaying extensionsのscriptを指定する 6. 残りのAMP extensionsのscriptを指定する 7. amp-customを指定する 8. そのほかのheadタグで記述するものを指定する 9. AMP boilerplateを指定する 改善前と改善後 Before After まとめ 参考

「Hugoでもブログカードを利用したい」 そう考えているところに以下の記事がTwitterのTLで流れてきたので、試してみました。 Hugoでブログカードに対応する | Hugo 入門 / 解説 | nasust dev blog

このブログではローカルでAPIサーバ（Express）を動かし、HugoのShortcodesから利用しています（2020/03/13現在）。 HugoでAMP対応のブログカードを作る そのため、記事を書いてHugoのプレビューを利用する場合は、2つのターミナルで以下のコマンドを実行していましたが、ちょっとだけ面倒です。 API Server: npx ts-node src/app.ts Hugo Server: hugo server -D そこでnpm-run-allというライブラリを利用して、1つのターミナルで簡単にできるようにしました。

以前、 Optimize your hosted AMP pages - amp.dev を読みながらAMPの最適化を行いました。 AMPページの最適化〜ぼくのAMPサイトがこんなに遅い訳がない〜 今回は、さらに一歩進みAMP OptimizerによるAMPの最適化を試してみました。結果は、Web Core Vitalの1つであるLargest Content Full Paintを40%改善できました。 対応した内容と結果をまとめています。 目次 AMP Optimizerとは AMP SSR（サーバーサイドレンダリング）とは AMP Optimizerによる最適化（AMP SSR）の効果 対応内容 gulpによるAMP Optimizerの実行 GitHub Actionでの実行 WebPageTestによる測定結果 通常のAMP AMP Packer実行 AMP Optimizer実行 AMP Optimizer x Google Ad Manager まとめ 参考

HugoでCSSフレームワーク「Tailwind CSS」を利用し、AMP Validなページを生成する方法についてのメモです。 ポイント HugoでPostCSSの仕組みを利用して、TailwindでCSSを組み立てる Tailwind CSS v1.4からpergeCSSを内包し、設定方法が変わった 目次 ポイント head.html postcss.config.js tailwind.config.js 参考 まとめ

以前、ブログメンタリングを受講していたときの課題でもあった「アーカイブページ」を作った時のメモです。 ようやく、ブログ記事一覧の機能を実装できました。 /blog/archives/ 目次 実装方法 layouts/_default/archive.html content/blog/archives/index.md 参考ページ 合わせて読みたい

GitHub Actionsのスケジューラ実行で、Hugoなどのサイトを定期ビルドし、データを最新化する方法を調べたときのメモです。 目次 GitHub Actionsでスケジューラ実行 定期ビルド gh-pages.yml 参考

今までブログ記事コンテンツの「更新日時」はgitの履歴情報を元にしていました。 たとえば、Hugoの場合はenableGitInfo = trueとすると、Gitの履歴情報からMarkdownの最終更新日時を自動で取得してlastmodとして割り当てられていました。 しかし、GitHub ActionsでHugoのビルドを行う際に、全履歴を取得するのをやめたことで、Markdownのlastmodの項目を見るように変更しています。 今後はlastmodをメンテナンスする必要があるため、いちいち「更新日時」を手動更新するのではなく、gitのpre-commitフックを利用して更新日時を自動更新する方法を調べました。 目次 Git hooksとは pre-commit shell script Windowsの場合 まとめ 参考

AMP Service Workerを使うと、簡単にServiceWorkerを導入できる。 このブログでも利用しているが、1つうまく動かないモジュールがあった。 それは、Prefetch Linksの機能だ。 ドキュメントどおりに設定してもうまく動かなかったが、「amp-install-serviceworkerにdata-prefetch属性を付ける」というのがポイントだったので、メモとして残しておく。 目次 設定方法 参考 設定方法 amp-swの初期化時にlinkPrefetchOptionsを指定する importScripts('https://cdn.ampproject.org/sw/amp-sw.js'); AMP_SW.init({ linkPrefetchOptions: {} // config options here }) aタグにdata-rel="prefetch"属性を付ける <a href='/' data-rel='prefetch'> amp-install-serviceworkerにdata-prefetch属性を付ける <amp-install-serviceworker src="{{ .Site.BaseURL }}sw.js" data-iframe-src="{{ .Site.BaseURL }}install-sw.html" data-prefetch layout="nodisplay"> </amp-install-serviceworker> はじめは、ドキュメントに記載があるとおり次の2つを実施したが、prefetchは行われなかった。 amp-swの初期化時にlinkPrefetchOptionsを指定 amp-install-serviceworkerにdata-prefetch属性を付加 amp-install-serviceworker.jsの動きを見ていると、<amp-install-serviceworker>Elementにdata-prefetch属性を持つかどうかの判定がある。 data-prefetch属性の有無で、<head>タグに<link rel='prefetch'>が追加されるかどうかが変わることを確認した。 https://github.com/ampproject/amphtml/blob/0937333cb3f4d1b09bd41f86db565c2dcda7ed3a/extensions/amp-install-serviceworker/0.1/amp-install-serviceworker.js#L349

以前、 HugoでAMP対応のブログカードを作るでAPIサーバを利用したブログカードの作成方法を紹介した。このときは、getJSONを利用していた。 Hugo v0.91.0でresources.GetRemoteが実装され、getJSONやgetCSV以外にもresources.GetRemoteを利用できるようになった。 Release v0.91.0 · gohugoio/hugo resources.GetRemoteを利用したブログカードの作り方のメモ。 目次 resources.GetRemoteを利用したブログカードの作り方 markdownファイル 参考

Hugo v0.93.0からコードブロックに対してもRender Hooksを利用できるようになった。 Render Hooksを利用して、コードブロックにファイル名を表示する方法を調べたときのメモを以下に残しておく。 Release v0.93.0 · gohugoio/hugo 目次 Render Hooks for Code Blocksを利用してコードブロックにファイル名を表示する Markdown Render Hooks for Code Block 参考

事象 Partial Templateを関数代わりに使おうとしたときに、returnを複数記述するとエラーになった。 {{ if isset .Params "img" }} {{ return .Params.img }} {{ else }} {{ return "images/nopicture.png" | absURL }} {{ end }} ドキュメント Partial templates を確認すると、確かに1つのpartialファイルに1つのreturnだけが許されていると明記されていた。

XTwitterのサムネイルなど Open Graph protocolの画像をimages.Textで作成する。 英語だと自動でテキストを折り返してくれるが、日本語だと分かち書きされていないため折り返されない。 以下のTwitter Card Image Generatorは、指定したWidthで折り返し設定ができた。 Ladicle/tcardgen: Generate a TwitterCard(OGP) image for your Hugo posts.