TECH

2020.03.13

npm-run-allでローカルAPI serverとHugo serverを同時に実行する

このブログではローカルでAPIサーバ（Express）を動かし、HugoのShortcodesから利用しています（2020/03/13現在）。 HugoでAMP対応のブログカードを作る - SIS Lab そのため、記事を書いてHugoのプレビューを利用する場合は、2つのターミナルで以下のコマンドを実行していましたが、ちょっとだけ面倒です。 API Server: npx ts-node …

TECH

2020.02.02

HugoでAMP対応のブログカードを作る

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

TECH

2019.12.03

Homebrewで過去バージョンのパッケージをインストールする方法

Homebrewで入れたHugoを、「brew upgrade hugo」でv0.60.1にアップグレードしたところ、まともにビルドできなくなってしまった。これでは困ると思い、前のバージョンをインストールしようと思ったがやり方が分からなかったので、調べてみました。

TECH

2019.10.11

AMPページの最適化〜ぼくのAMPサイトがこんなに遅い訳がない〜

このサイトもAMP対応したのだから、LighthouseやPageSpeed Insightsのスコアもきっと高いはずと計測してみたところ、全然スコアが出ていなかったので改善しました。その時のメモを残しておきます。 目次 TL;DR 計測 セルフホストしたAMP Pagesを最適化する 1. 最初のタグはmeta charest tagで始め、その後残りのmeta tagを記述する 2. …

TECH

2019.10.06

AMP向けのミニマルCSSフレームワーク「1BX」をHugoに導入した

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

TECH

2018.07.11

Hugoのテーマでsubmoduleを使う方法

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

TECH

2017.12.22

はてなダイアリーからはてなブログ経由で独自ドメインのブログに記事を移行しました

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

TECH

2017.10.14

HugoでのシンタックスハイライトにPython Pygmentsが不要となった

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

TECH

2017.10.07

HugoのRelated Contentを利用して関連記事を表示する

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

TECH

2017.08.31

Hugo Shortcodesの作り方

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

TECH

2017.04.09

gulpで画像の最適化

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

TECH

2017.03.19

Hugoで生成した静的サイトのホスト先をさくらVPSからNetlifyに変更する

現在(2017/3月)、Hugoで生成した静的サイトをホストするためにさくらVPSを利用しています。さくらVPSは２年近く使ってきましたが、そろそろ更新時期した(1年まとめて契約しているため)。自分が契約したタイプはデイスクがHDDのままSSDに変更できないタイプだったので、新規契約し直すか、Conoha VPSに切り替えるか、それともVPS自体を契約しないとするか迷っています。 良い機会であるた …