Hugo on Grayrecord Technow Blog

tcardgenでBlogのOGP画像を生成する

Mon, 22 Dec 2025 11:22:16 +0900

BLOGのアーティクルにOGPイメージは必要と思えたので、Hugo の OGP 画像を自動生成できる「tcardgen」を試したを参考にしています。実際、yamlの設定などは全く同じですし。違うとすれば、Windows環境なのでスクリプトをCMDのバッチファイルにしているくらいですね。

使用しているスクリプトはcovergen.batいう名前で内容は以下の通りの簡単なものです。

tcardgen -f tcardgen\fonts\ -o static\images\ogp\ -t tcardgen\template.png %1

OGP画像の配置先とか、そんなくらいですね、違うのは。テンプレートの画像は適当に作ったものです。

Hugo PaperModにBlueskyへの共有を追加する

Sat, 05 Apr 2025 10:17:22 +0900

このBlogでは、現在、Hugo PaperModをテーマとして使用しています。現在、Hugo PaperModは結構いろいろなSNSに共有する機能がありますが、残念ながらBlueskyへの共有はついていません。しかし、対応自体は可能です。まず、共有はthemes/hugo-PaperMod/layouts/partials/share_icons.htmlに実体があります。この中を見ていきます。

以下のようなものが見えてきます。

    {{- if (or (cond ($custom) (in $ShareButtons "x") (true)) (cond ($custom) (in $ShareButtons "twitter") (true))) }}
    <li>
        <a target="_blank" rel="noopener noreferrer" aria-label="share {{ $title | plainify }} on x"
            href="https://x.com/intent/tweet/?text={{ $title }}&amp;url={{ $pageurl }}&amp;hashtags={{- $.Scratch.Get "tags" -}}">
            <svg version="1.1" viewBox="0 0 512 512" xml:space="preserve" height="30px" width="30px" fill="currentColor">
                <path
                    d="M512 62.554 L 512 449.446 C 512 483.97 483.97 512 449.446 512 L 62.554 512 C 28.03 512 0 483.97 0 449.446 L 0 62.554 C 0 28.03 28.029 0 62.554 0 L 449.446 0 C 483.971 0 512 28.03 512 62.554 Z M 269.951 190.75 L 182.567 75.216 L 56 75.216 L 207.216 272.95 L 63.9 436.783 L 125.266 436.783 L 235.9 310.383 L 332.567 436.783 L 456 436.783 L 298.367 228.367 L 432.367 75.216 L 371.033 75.216 Z M 127.633 110 L 164.101 110 L 383.481 400.065 L 349.5 400.065 Z" />
            </svg>
        </a>
    </li>
    {{- end }}

これは、Twitter(X)への共有機能ですが、この前でも後ろでもに以下のようなものを挿入します。ただし、themes以下を直に変更すると面倒なので、ベストプラクティス通り、layouts/partialsに複製して変更します。

HugoによるBLOGサイトの作成

Wed, 02 Apr 2025 00:00:00 +0900

もともとは、他のBLOGの記事をベースに書いていた記事があったのですが、参考サイトがなくなってしまったため、すべてを書く必要が生じました。そのため、前提条件を含めて記載します。なお、本記事はWindows環境下を前提にしています。

※ なお、この記事はまだ作成を進めているので、予告なく変更されます。

レポジトリ構成

この記事では次のレポジトリ構成を想定しています。

BLOG用メインレポジトリ
記事公開用レポジトリ

記事公開用レポジトリはサブモジュールとして、BLOG用メインレポジトリに組み込みます。したがって、全体のディレクトリ構成は以下のようになります。

記事公開用レポジトリはpublicに組み込みます。テーマ管理用レポジトリはthemeの配下に組み込みます。

使用したツール

名称
Visual Studio Code
cmd
scoop

必要なツールの取得

scoopのインストール

スタートからPowerShellを起動する

PowerShellの設定変更

Set-ExecutionPolicy RemoteSigned -scope CurrentUser

PowerShellからのScoopのインストール

iex (new-object net.webclient).downloadstring('https://get.scoop.sh')

gitのインストール

scoop install git

hugoのインストール

scoop install hugo-extended

テーマの準備

テーマは https://themes.gohugo.io/ から探されるといいと思います。テーマに対する小幅な変更はlayouts以下に同構造でファイルを複製して修正することになります。これにより、themes以下を直接修正しなくても良くなります。本アーティクルでは、hugo-PaperModの使用を前提として進めます。

BLOG用メインレポジトリの準備

を以下のコマンドで準備します。

hugo new site <my_site>

BLOG用のディレクトリが出来たら git init後、github等適当なところにpushします。テーマは適当にsubmodule addします。submodule addするポイントはthemes以下となります。

HugoによるBLOGの作成

Sun, 10 May 2020 00:00:00 +0900

はじめに

当Blogの作成に関する話を纏めます。

本Blogは基本的な作りだけをいえば、以下のような作りです。

項目	内容
コンテンツ管理	GitHub
コンテンツ配信	netlify
静的ファイル生成	Hugo
テーマ	hugo-bootstrap-premium

基本的な段取りはHUGOでブログ作成 → GitHub Pagesで公開する手順を参照しています。

とはいえ、変えているところもあります。テーマとして利用しているのは、Hugo Bootstrap Premiumですが、実際にはこれをフォークしたものを使用しています。理由はGoogle AdSenseなどを組み込むため、テーマを修正する必要があったためです。

また、参考にしたアーティクルはbashベースのdeploy scriptを使っていますが、こちらで使っているのは、ベースを当ブログでデプロイに利用しているスクリプトで公開しているバッチファイルです。

更に言うと、告知のためにRSS → IFTTT → Twitterというルートも用意しています。

使用したツール

名称
Visual Studio Code
cmd
scoop

必要なツールの取得

scoopのインストール

スタートからPowerShellを起動する

PowerShellの設定変更

Set-ExecutionPolicy RemoteSigned -scope CurrentUser

PowerShellからのScoopのインストール

iex (new-object net.webclient).downloadstring('https://get.scoop.sh')

gitのインストール

scoop install git

hugoのインストール

scoop install hugo-extended

環境の構築

本稿では出来た成果物はNetlifyで公開することを前提にしています、参考にしている記事ではgithub pagesを使っていますが、私はコンテンツ配信の柔軟性の確保を目的にNetlifyを使っています。

基本的には、最初にレポジトリを2つ用意します。

1: 全体管理用レポジトリ 2: コンテンツ配信用レポジトリ

コンテンツ配信用レポジトリは最終的に、全体管理用レポジトリにsubmoduleとして組み込みます。

あと、先も述べたようにHugo Bootstrap Premiumはフォークして使います。Google Adsenseを組み込むのには、テンプレートを編集せざるを得ないので、そのまま、submoduleで組み込むと更新をアップストリームに出さざるを得なくなり詰むので。

フォルダ構成としては

archetypes/　　 content/post/　　 data　　 layouts/　　 public　　 static　　 themes/hugo-bootstrap-premium　　

当ブログでデプロイに利用しているスクリプト

Sun, 19 Apr 2020 15:25:40 +0900

現在、本ブログでdeployに使っている、スクリプトは以下の通り。

echo "Deploying updates..."

hugo -t hugo-bootstrap-premium

cd public

git add .

git commit -m "rebuild"

git push origin master

cd ..

git add .

git commit -m "rebuild"

git push

curl -X POST https://maker.ifttt.com/trigger/deploy_weblog/with/key/XXXXXXXX

基本的にはhugoをビルドして、commitして、Webhookを叩いて、更新の告知を動かすというつくり。