Hugoブログのタグをカラフルにしてみました
GW中にブログの見た目をだいぶいじりました。 ブログ書こうにもなんとなくテンションがあがらないのを見た目を変えることで無理やりテンションを上げるという作戦です。 久しぶりだったこともありローカルサーバーを動かすところですら苦労したのですがそれはまた後日メモするとして、今日は新しい見た目でちょっとだけ頑張った、タグ表示の色付けの部分を紹介したいと思います。
GW中にブログの見た目をだいぶいじりました。 ブログ書こうにもなんとなくテンションがあがらないのを見た目を変えることで無理やりテンションを上げるという作戦です。 久しぶりだったこともありローカルサーバーを動かすところですら苦労したのですがそれはまた後日メモするとして、今日は新しい見た目でちょっとだけ頑張った、タグ表示の色付けの部分を紹介したいと思います。
脚注を使う方法を書いたものの、 https://blog.piyo.tech/posts/2018-10-31-hugo-footnote/ 脚注に飛んでまた戻るときのリンクのテキストが[return]となっていて嫌な感じだったので直す方法を調べました。 Markdownを処理するBlackfriday側のオプションなのかと思っていましたが、HugoではHugoのオプションとして …
脚注はHugoで使えないと勝手に思っていましたが、ちゃんと使えました。1 たまに本題からそれたことを補足で書きたくなるから、そういうときに使いたかったんでした。 Hugoの脚注の仕組み2 こういう文章を書くと、 あいうえお[^a] かきくけこ[^b] [^b]: か行だよ [^a]: あ行だよ 次のようにレンダリングされます。
このブログではソースコードのシンタックスハイライトにhighlight.jsを使っており、行番号の表示にはhighlightjs-line-numbers.jsを使用しています。 https://blog.piyo.tech/posts/2018-04-23-add-line-number/ あるとき、行番号の処理の結果として{1}のような不思議な文字列が紛れ込むことに気が付きました。 たとえば↓ …
普段はPCで書いているブログですが、たまにスマホでチェックしてて誤字に気づくことがあります。そんなときはそのままスマホで修正できるようにforestry.ioのCMS機能を使います。 https://blog.piyo.tech/posts/2018-04-10-forestry-cms/ これは便利で手軽で良いんですが、forestry側で修正すると公開日情報のタイムゾーンが変わってしまうという …
ブログに記事を追加するときには、↓なコマンドで生成します。 % hugo new posts/2018-06-19-hugo-archetypes.md するとこんな中身で生成されます。 --- title: "2018 06 19 Hugo Archetypes" date: 2018-06-19T08:41:23+09:00 draft: true --- ルートディレクトリの …
この土日、定期的に動かしているブログのビルドが失敗するようになりました。調べてみるとブログのリンクカードみたいなのを作るために自前のサーバーにOGPを取りに行く際、とあるリンク先のドメインが見つからずに500エラーで返って来ていることが原因でした。ドメインの有効期限が切れたか何かだと思われます。
HugoのPV順の記事リストを作ってみました。 Google Analyticsのpageview情報を利用していて、サイトビルド時にデータを取得するためのAPIはGo言語を使って自前で作りました。 https://blog.piyo.tech/posts/2018-05-22-analytics-api-via-echo/ まずはサイドバーにエリアを追加しました。
このブログ、ソースコードを載せることが多いです。載せたコードについて書く時、◯行目とかいいたくなったので行番号を表示したいなと思いました。 でも、Hugoってどうやってソースコード出してるんだろう?ということで調べてみると、元々はPygments、現在はGo実装のChromaというのを使っているようです。
Hugoのブログを更新するときには基本的にはローカルPCを使っています。僕の場合はNetlifyを絡めて、 記事更新 Gitへpush Netlifyでビルド Netlifyで最新バージョンが配信 という流れで配信まで行っています。