Blog

Hugo + Algolia + Instantsearch.jsで、静的サイトに全文検索を導入するまでの一部始終をまとめてみました。 完成版 メニューバー右側のテキストボックスに検索キーワードを入力して、Enterキーを押します。 検索したキーワードにヒットした記事が表示されます。 最低限の実装です。テーマに合わせた検索結果の表示...

当ブログは、Netlify + Hugoで構築してます。GitHubへMarkdownで記述したコンテンツをコミットすると、Netlifyにより自動ビルドが走り、記事が公開されます。しばらくは、このフローで問題ありませんでしたが、基本的に横着な自分なので、ある理由によりブログ更新が滞るようになりました。...

Google Search Consoleに追加された新たな指標値 Google Search Consoleに新たな指標が追加されました。すべて、ウェブに関する主な指標レポートに記載の通りです。必ずしも早急な対処が必要なものではありません。ただし、これらの指標に対応することで、必然的にUI/UXの向上が期待できます。 LCP (Largest Contentful Paint) FID (Fist Input Delay) CLS (Cumulative Layout Shift) LCP (Largest Contentful...

静的サイトの悩みの種、サイト内検索をNetlify Functions＋Hugoで実装してみました。ポイントは、以下の通りです。 クライアントであるブラウザにとって負荷の低い実装方法とする 記事の更新の都度、インデックス等の更新にかかる運用が発生しないようにする（自動的に行う） Hugoの機能、ある程度の月...

HugoのMarkdownで数式組版ライブラリであるKaTeXをサポートするで、Hugoに\(KaTeX\)を組み込みました。\(KaTeX\)は、MathJaxより高速にレンダリングできる、ブラウザで動作する数式組版ライブラリです。 今回は、Netlify CMSのプレビューで、リアルタイムで\(Ka...

Hugoで、\(KaTeX\)というブラウザで数式を表現するためのライブラリをサポートする方法です。Hugo 0.70.0（Extended）で正常に表示されることを確認していますが、今後のバージョンアップ等により、以下の方法がサポートされなくなる可能性がありますので、ご注意ください。特に、Markd...

Netlify上でのデプロイ結果を、Discordへ通知する方法をご紹介します。Slack連携とほぼやり方は同一ですが、GitHub同様に1点のみ注意点があります。 Discordのウェブフックを準備 チャンネルの編集画面から、ウェブフックを追加します。ウェブフック作成時に生成されるURLをコピーしてお...

Slackであれば、AppディレクトリからGitHubアプリをインストールすれば、GitHubと簡単に連携できます。Discordでも同様の連携ができないかどうか試してみたところ、一癖ありましたが連携可能でした。以下で使用している画像は、Mac版のDiscordアプリ（0.0.256）のスクリーンシ...

Hugo | Netlify CMS | Open-Source Content Management Systemに沿って構築した、Netlify CMSのテンプレートを、Page Bundles | Hugoに対応させる方法です。 最終的なディレクトリ構成は以下の通りです。Page Bundlesに無関係な項目は割愛、一部名称の変更を行っています。 . ├── archetypes ├── assets ├── config.yml ├── content │ ├── posts │ │ └── 2020 │...

Hugoを使用している場合、hugo serverを実行している状態で、ブラウザから以下のURLへアクセスします。Hugoのみならず、他のNetlify CMSがサポートする静的サイトジェネレータでも同様です。 http://127.0.0.1:1313/admin/ Hugo | Netlify CMS | Open-Source Content Management Systemに沿って、Netlify CMSの構築を終えた状態の場合、ログイン...

弊ブログは、Netlify + Hugoで運営しています。テーマのソースコードや、記事本文（Markdown）は、GitHubで管理しています。NetlifyとGitHubのリポジトリを連携させることで、masterブランチにコミットされると、自動的にNetlifyにデプロイされます。 逆に言えば、mas...

Hugoは静的サイトジェネレーターですが、テンプレート（Go Template）を使用することで、比較的自由にカスタマイズ可能です。このブログも以前はWordPressを使用していましたが、現在はHugoを使用しています。 WordPressからHugoへ移行する場合、色々考慮点はあると思いますが、頭を...

静的サイトにおけるサイト内全文検索の実装例をご紹介します。個人ブログにおける趣味の範囲内です。また、個人ブログのため、料金を抑える方針で検討します。 WordPressなどのCMSは標準で検索機能を有しています。しかし、静的サイトではビルド時にすべてのページが生成されます。そのため、WordPress...

Go 言語製の静的サイトジェネレータ Hugo で Netlify に構築したホストで、独自ドメインメールによる安価な送受信環境を整備する方法をご紹介します。 ドメインは「お名前.com」等のレジストラですでに取得済み、DNS サービスは「Netlify DNS」を使用することを前提とします。ただし、「Netlify DNS」は記事執筆...

以前、Netlify Functions をローカル環境でエミュレートする方法、Netlify にデプロイする方法をご紹介しました。今回は、ローカル環境で開発した Netlify Fucntions をコンテナ技術の理解を深めるために Docker で実行してみます。前回作成したアプリケーションをもとに話を進めますので、まだの方はそちらを一読されてから読み進めることを...

これまでGo言語の静的サイトジェネレータであるHugoを使用してNetlifyにホスティングする方法をご紹介してきました。今回は、FaaS（Function as a Service）であるNetlify Functionsをご紹介します。また、改めてご紹介しますが、HugoとNetlify Functions...

Hugo のオリジナルテーマ作成を勝手に応援する企画、記念すべき第 1 弾はテンプレート構文の基本となる「template」「partial」「block」「define」の違いについてです。以下のバージョンで確認しています。 Hugo Static Site Generator v0.53/extended darwin/amd64 BuildDate: unknown Hugo のテンプレート構文 Hugo にはさまざまなテンプレート構文が用意されています...

Hugo には、記事執筆時点において、WordPress のような便利なプラグインはありません。しかし、Shortcode やテンプレートの構文を工夫することで、WordPress と同等のプラグイン機能を実現できます。 Hugo Static Site Generator v0.52/extended darwin/amd64 BuildDate: unknown たとえば、WordPress にはアイキャッチ画像という概念があります。Hugo...

先生、これは控えめに言って、革命です。 本記事は、今回ご紹介するMarkdownエディターを使用して執筆しています。 弊サイトのブログ記事執筆は、基本的にMarsEdit一択でした。CMSはWordPressですが、複数人で編集しているわけでもないため、ダッシュボードの投稿画面は無効化しています（緊急時...

Netlify CMS（Hugo）で Markdown で記述可能な無料ブログを構築する（構築編）で、Netlify 上に静的サイトを構築する方法をご紹介しました。今回は、Hugo（Go 言語の静的サイトジェネレーター）のスターターキットで構築したテーマをカスタマイズして、GitHub 上のソースコードの修正、Netlify による自動デ...