弊社でもアドベントカレンダーが始まってました。

SUPER STUDIO Advent Calendar 2022 - Adventar

株式会社SUPER STUDIOのアドベントカレンダーです。

いっちょ参加しますかーと思ったときに、自分のブログとか持ってないことに気がついた。

なら、ブログ立ち上げを記事にすればいっかと思ったわけです。

Hugo

Hugoはgo lang製の静的サイトジェネレータ。みんな大好きMarkdownで記事を書くと静的なHTMLファイルを生成してくれる。

個人ブログならCMSのような編集管理機能はいらないし、静的HTMLなので表示はサクサクなのがよき。

静的サイトジェネレータは他にも選択肢はあるけど、Hugoは生成が早いのと、テーマが豊富なので使ってみることにしました。

構成

[ ローカル環境 ] → [ GitHub ] → [ Netlify ]

ローカル環境で記事を書いたらGitHubにプッシュし、あとは自動でNetlify側で静的HTMLを生成してホスティングしてもらいます。

詳しい説明とか構築方法は以下を参照。

Hugo + GitHub + Netlifyで静的ブログサイト構築（無料）

あとテーマはシンプルなので、hello friendにしました。

カスタマイズ

外部リンクは今どきっぽくブログカードにしたかったので、こちらを参考にショートコードを組み込みました。

Hugoでついに外部URLのブログカードを作れるようになった【自作ショートコード】 | Hugoブログテーマ「Salt」

Hugoでは外部サイトのデータを扱う場合、getJSONやgetCSVを使った方法しかありませんでしたが、ついにv0.91でGetRemoteが実装されました。 failed to fetch remote resource: Too Many Requests Release v0.91.0 · gohugoio/hugo Hugo 0.91.0 is mostly on the boring and technical side. See the list of changes below, but especially note the fix that allows passing falsy arguments to partials with the return keyword (5758c37 #... Hugo Pipes Introduction Hugo Pipes is Hugo's asset processing set of functions. GetRemoteの基本 基本の使い方はこんな感じで、html以外にも外部の画像、css、jsといったデータも取得できます。 {{

それから記事の要約が英単語基準なのですごく長くなるため、日本語単語基準に変えるために config.toml に下記を追加したり。

hasCJKLanguage = true # 日本語・中国語・韓国語の単語カウントを有効にする
summaryLength = 80

調子こいた

10数年ぶりに個人ブログ開設ということで、ついつい調子に乗って独自ドメインなんかも取得してしまった。

Twitterアカウントが謎の凍結を食らってから、アウトプットするモチベをなくしていたけど、せっかく作ったからには気が向いた時にアウトプットする癖をつけたい。

まずはラーメン食べ歩き記録かな。