きっかけ#
lolipopの契約10年ぐらい経つんやけど、
mysqlの新しいバージョンへ自動移行やってくれん。
wordpressで作ってるページの動きが重いし、次の契約更新やめよかなって考えた。
なんでか知らんけど、google searchコンソールでインデックス未登録になってまうページも増えてきた。
こうなる理由が全然わからん。めっちゃ苦手分野。
投稿で作ったメモは240ぐらいはあるはずやけど、400以上ってそんなにページあるんか。
数えたら238やった。
wordpress本体やらプラグインやら、毎月２回ぐらい、多い時は３回ほど更新せなアカンのがうざい。
維持コスト下げてシンプルにならんのか。
ssgってのがあるらしい#
urlに使ってるドメイン名の手続き面倒なのと安さもあるから、やっぱレンタルサーバとwordpressの組み合わせをやめられへんってなったけど、ssgってのがあるらしいやん。
ssgは、Static Site Generation（静的サイト生成）の略で、ウェブサイトのコンテンツをビルドしてHTMLファイルとして生成してくれるんやて。
ローカルPCでビルドしたらhtml作るんやったら、macの中で書いてるメモを移行して表示の練習とテストができるっちゅうことか。
公開するときはビルドした結果をpublicフォルダからレンタルサーバにアップロードしたらええらしい。
wordpressとmysqlから脱却できるんかもしれんな。
代表格っぽいhugoでssgやってみたろやんけ。
ここまで2025年5月末。6月に基本構造を準備、7月にページを手動移行、8月に調整していったん引っ越し完了した。
マニュアルサイト#
日本語解説がある。ダークテーマの取り扱いもあって見やすい。読ませてもらいまっさ。
Hugo 入門 · Go & Hugo ドキュメント v5.3
めっちゃ動き速いみたいやから、仮想化したmacの中で作ってく。
brewで一発インストール。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
nari@gvis-mac ~ % brew install hugo ⭐️インストールしてみまひょ
== > Downloading https://formulae.brew.sh/api/formula.jws.json
== > Downloading https://formulae.brew.sh/api/cask.jws.json
== > Downloading https://ghcr.io/v2/homebrew/core/hugo/manifests/0.147.8
############################################################################################# 100.0%
== > Fetching hugo
== > Downloading https://ghcr.io/v2/homebrew/core/hugo/blobs/sha256:aa376ddf3fea3e7435ff9c685ec63a270
############################################################################################# 100.0%
== > Pouring hugo--0.147.8.arm64_sequoia.bottle.tar.gz
🍺 /opt/homebrew/Cellar/hugo/0.147.8: 53 files, 70.4MB
== > Running ` brew cleanup hugo` ...
Disable this behaviour by setting HOMEBREW_NO_INSTALL_CLEANUP.
Hide these hints with HOMEBREW_NO_ENV_HINTS ( see ` man brew` ) .
== > Caveats
zsh completions have been installed to:
/opt/homebrew/share/zsh/site-functions
nari@gvis-mac ~ %
nari@gvis-mac gavann-it % hugo version
hugo v0.147.8+extended+withdeploy darwin/arm64 BuildDate= 2025-06-07T12:59:52Z VendorInfo= brew ⭐️拡張エディションっぽい
nari@gvis-mac gavann-it %
ベースどうするか#
テーマはいろいろあるみたいやけど、英語でドキュメント読まなアカンのかなぁ。
ベースにするテーマをどれ使うか考えて候補は２つ。どっちがええやろか。
GitHub - prxshetty/hugo-noir: Hugo Noir is a clean, minimalistic theme for Hugo with a focus on …
GitHub - adityatelange/hugo-PaperMod: A fast, clean, responsive Hugo theme.
ダークモードあるし、検索もできるっぽいし、hugo-PaperModってのが自分にはしっくりきて良さそうなので、そこから進めてく。
FAQs · adityatelange/hugo-PaperMod Wiki · GitHub
このFAQ見たら、画像のセンタリング指定とかメニューの作り方、投稿をトップページにピン留めする方法が書いてあるやん。
初期ビルド#
githubに入れといて使う人もいるみたいやけど、自分は自前のgitlabで1年程度の履歴管理が使えたらそれでええ。
git前提なのはありがたい。元々、wordpressで維持してる内容はマークダウンで書いてて、gitlab保管して差分とか管理してる。
wordpressの編集エディタどうしても馴染めへんけど、vscodeでマークダウン書いたものを貼り付けて作ってたから、編集エディタはほぼ使ったことない。
hugoのページはマークダウンしたものをhtmlへ自動変換してくれる。
マークダウン置き場のためにgit initして、一回目のページ表示確認まで行ったら、vscodeからステージしてcommitしてgit graphが表示できるようになる。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
nari@gvis-mac naridoc % hugo new site gavann-it ⭐️適当に作ってみる
Congratulations! Your new Hugo site was created in /Users/nari/Documents/personal/Download/naridoc/gavann-it.
Just a few more steps...
1. Change the current directory to /Users/nari/Documents/personal/Download/naridoc/gavann-it.
2. Create or install a theme:
- Create a new theme with the command "hugo new theme <THEMENAME>"
- Or, install a theme from https://themes.gohugo.io/
3. Edit hugo.toml, setting the "theme" property to the theme name.
4. Create new content with the command "hugo new content <SECTIONNAME>/<FILENAME>.<FORMAT>".
5. Start the embedded web server with the command "hugo server --buildDrafts".
See documentation at https://gohugo.io/.
nari@gvis-mac naridoc % cd gavann-it
nari@gvis-mac gavann-it % git init ⭐️gitリポジトリの初期化ね
hint: Using 'master' as the name for the initial branch. This default branch name
hint: is subject to change. To configure the initial branch name to use in all
hint: of your new repositories, which will suppress this warning, call:
hint:
hint: git config --global init.defaultBranch <name>
hint:
hint: Names commonly chosen instead of 'master' are 'main', 'trunk' and
hint: 'development'. The just-created branch can be renamed via this command:
hint:
hint: git branch -m <name>
Initialized empty Git repository in /Users/nari/Documents/personal/Download/naridoc/gavann-it/.git/
nari@gvis-mac gavann-it %
* anankeの場合 ⭐️最初こっち使いかけたけど、表示があんまり好きになれんかったからすぐやめた
git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke
echo "theme = 'ananke'" >> hugo.toml
* papermodの場合 ⭐️こっち使う
$ git submodule add --depth=1 https://github.com/adityatelange/hugo-PaperMod.git themes/PaperMod
$ echo "theme = 'PaperMod'" >> hugo.toml
readme.mdとconfig/contentフォルダを維持して、config/_default/hugo.yamlにテーマを書いたらwebサーバ稼働させる。
いったんwebサーバ稼働をctrl+cで停止したらgitのbranch作成しといて、ページ表示させてみたら普通に見える。
しばらく使い込んでhugoのバージョンはこんなふうに見えてる。
1
2
3
nari@gvis-mac gavann-it % hugo version
hugo v0.150.0+extended+withdeploy darwin/arm64 BuildDate=2025-09-08T13:01:12Z VendorInfo=brew
nari@gvis-mac gavann-it %
マークダウンで書いたらpublicフォルダにhtml変換してくれるんやけど、起動しといたら変更箇所を見つけてくれてリアルタイムで更新してくれる。
ただし、タグとかカテゴリは反映されんみたいやから、必要な時に起動しなおすためにエイリアス書いといた。
1
2
hg= 'cd /Users/nari/Documents/personal/Download/naridoc/gavann-it;rm -fR ./public/*;hugo server --environment staging -D --bind=0.0.0.0 --disableFastRender --baseURL=http://gvis-mac.intra.gavann-it.com:1313/'
hgh= 'cd /Users/nari/Documents/personal/Download/naridoc/gavann-it;rm -fR ./public/*;hugo server --environment production --bind=0.0.0.0 --disableLiveReload --baseURL=https://gavann-it.com/ --appendPort=false'
エイリアスは、ローカルのmacの中で検証環境として起動させるのがhgで、lolipopで使うための本番環境として起動させるのがhghって定義。
cssが毎回長〜い名前で生成されてファイルが残るから、hugoを起動するときは毎回publicのフォルダの中潰してる。
public/assets/css/
1
stylesheet.12c2ae8fcb6e59c28661912c6a5a58441f8be4713c9eec69dcaf3cdf1d968898.css
publicフォルダに展開させるときの指示を--environmentで切り替えさせて、本番の場合は--appendPort=falseってつけとかんと、生成するURLとかサイトマップに:1313ってついてきてまう。
検証環境やとlivereload.jsってのが有効になってて、おかげでページの更新があったらブラウザに反映してくれる。
ただし、本番環境やとそんなん必要ないので--disableLiveReloadって書いとかんと、livereload.jsをロードしようとしてまうみたい。
リアルタイムってのがスゴイなと思うんやけど、ブログカードで指定したページが存在せんかったり、「ロボットちゃうやろな」の仕組みが入ってるページ(stackoverflowのページやったかな)やとhtml作る時にエラーになってまうことがある。
この「存在せん」ってのがなかなかで早朝とか深夜やと、たまにページのメンテで一瞬だけ落ちてるサイトとかがあったらエラーになる・・・。
一瞬で戻ってくれるから問題にはならし、リンク切れとか拾ってくれて便利なんやけどね。
目標機能#
wordpressでやってることを少しずつ実現してく。
wordpressにcocoonってテーマがあるように、hugoにも
テーマ
があるらしい。
生成AIに聞いてみたらHugo NoirとかHugo PaperModでダークモードとかカルーセルも使えるらしい。
sitemapとダークモードとスマホビュー#
テーマ利用でそのまま実現できそう。
起動オプションに--bind=0.0.0.0ってつけたら、wifi経由でiphoneからmacで動くhugoのページ見える。
のっぺりしたページやな。
sitemap.xmlは勝手に作ってくれるみたい。ファイルはあったから、サイトをクロースさせる場面になったら内容確認。
hugoの設定変更#
目標メモ作って１つずつ実現させてった。
データの移行終わってからもあっちこっちいじったから、けっこうデカなったな。
本番・検証に環境分けて実装#
configフォルダにhugo.yamlを、_default,production,stagingごとに作成。
起動オプションで指定する。
yamlファイルの内容は共通するものと、本番・検証環境個別のものを書けばいい。
必要なことだけをそれぞれに書いたらええっていう仕組みにしてくれて、めっちゃわかりやすい。
本番・検証って分けたせいか、スマホからページがうまいこと見えへんことに気づいた。
hugo.yamlにbaseURL: http://gvis-mac.intra.gavann-it.com:1313/とか宅内DNSでできる名前解決のホスト名を書いといてもhugoがpublicに展開してくれたhtmlの中にあるurlがlocalhost:1313になってしもてた。
おいおい、これやとスマホで動作確認できんやないか。
しゃあないから起動オプションにbaseURL書いたら指定できてiphoneでも見えるようになった。
hugo server (中略) --baseURL http://gvis-mac.intra.gavann-it.com:1313/
hugo.yamlにそれぞれ書いてるんやけど、なんで言うこときいてくれんのやろ。
papermodオプション指定#
papermodの設定ファイルhugo.yamlにparamsを書いて、
いろいろ書けるで
とある。
コードに行番号入れる時の設定で、ハイライトのことも
このへん
に書いてある。
本番と検証環境で共通の定義はこんな感じ。チョイチョイ見直すことにしよか。
config/_default/hugo.yaml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
languageCode : ja
timeZone : "Asia/Tokyo"
title : ギャバンITサービス
theme : ["PaperMod" ]
minify :
# htmlの圧縮
disableXML : true
minifyOutput : true
# Hugoが自動生成するrotots.txtを無効化する
enableRobotsTXT : false
# タグやカテゴリを扱う
taxonomies :
tag : "tags"
category : "categories"
params :
author : "GavannITサービス"
title : "ギャバンITサービス"
description : "お菓子の家が作れるシステムエンジニアのメモ"
# ヘッダのラベル指定
label :
text : "GVIS" ⭐️メニューの左にアイコン表示
icon : /apple-touch-icon.png
iconHeight : 35
# ダークモード指定 ⭐️autoにしとこ
# defaultTheme: light
# defaultTheme: dark
defaultTheme : auto # to switch between dark or light according to browser theme
# ページトップの目次を有効化して常時展開
ShowToc : true ⭐️途中から読みたいときにないと困る
TocOpen : true ⭐️いっつも展開しといてくれ
# パンくずリストの有効化
ShowBreadCrumbs : false
# コードのコピーボタン有効化
ShowCodeCopyButtons : true ⭐️けっこう使う
# 投稿で前後ページへのリンク表示 ⭐️投稿でページの最後にnext/prevのボタンつけてもらう
ShowPostNavLinks : true
# '日付フォーマット'
DateFormat : '2006.01.02' ⭐️日付書式入れとく
# 数式を表現できるようにする(その１) ⭐️ほぼ使ってへんけど入れとく
math : true
# ScrollToTop buttonを無効化(ページネートのボタンに重なってまうから表示させん)
disableScrollToTop : disable
markup :
highlight :
linenos : true ⭐️コードに行番号つけてくれる
# 数式を表現できるようにする(その２) https://gohugo.io/configuration/markup/#passthrough
asciidocExt :
attributes : {}
backend : html5
extensions : []
failureLevel : fatal
noHeaderOrFooter : true
preserveTOC : false
safeMode : unsafe
sectionNumbers : false
trace : false
verbose : false
workingFolderCurrent : false
# 数式を表現できるようにする(その３) https://gohugo.io/content-management/mathematics/
goldmark :
extensions :
passthrough :
delimiters :
block :
- - \[
- \]
- - $$
- $$
inline :
- - \(
- \)
enable : true
# <br>とかhtmlを書く許可 https://discourse.gohugo.io/t/ignorelogs-warning-goldmark-raw-html/52469
renderer :
unsafe : true
# 表(テーブル)のデザインを変えるための設定 https://gohugo.io/render-hooks/tables/
parser :
attribute :
block : true
ignoreLogs : 'warning-goldmark-raw-html'
pagination : ⭐️ページネーション単位を５にしとく
disableAliases : false
pagerSize : 5
path : page
別タブでのオープンの指定#
ヘッダの置き場とファイル名が決まっているので指定して作成。
1
2
3
4
5
6
7
8
9
./layouts
├── _default
│ └── _markup
│ ├── render-link.html ⭐️別タブで開く指定
│ └── render-table.html
├── partials
│ └── extend_head.html
└── shortcodes
└── blogcard.html
別タブで開く指定render-link.htmlはこんな内容。
layouts/_default/_markup/render-link.html
1
2
3
4
5
6
7
8
<a href = "{{ .Destination | safeURL }}"
{{ with . Title }} title = "{{ . }}" {{ end }}
{{ if strings . HasPrefix . Destination " http " }}
target = "_blank" rel = "noopener" ⭐ ️これでページ内のリンク開いた時に別窓で開く
{{ end }}
>
{{ .Text | safeHTML }}
</a >
AI先生に聞くとnoopenerがあるとリスク軽減してくれるんやて。
1
2
`rel="noopener"`属性は、target="_blank"で開かれた新しいタブから元のページのwindow.opernerへのアクセスを制限します。
これにより、リンク先のページが元のページを操作するのを防ぎ、セキュリティリスクを軽減します。
render-tableの指定#
縦線ないデザイン読みにくいからテーブルのデザイン変えたい。
1
2
3
4
5
6
7
8
9
./layouts
├── _default
│ └── _markup
│ ├── render-link.html
│ └── render-table.html ⭐️テーブルのデザイン変更するための指定
├── partials
│ └── extend_head.html
└── shortcodes
└── blogcard.html
表の変更のヒントを書いてる方がおられた。作者さんありがとう。
HugoでTableとかコードとか数式をいい感じに表示しよう | タクテク２
なるほど、クラス指定をつけてcssと連動させたらええのね。
マニュアルサイトにあるコードをそのままパクってきて、コードつけた。
layouts/_markup/render-table.html
1
2
3
4
5
6
7
<table class = "gvis-table" ⭐ ️クラス指定した
{{ - range $ k , $ v : = .Attributes }}
{{ - if $ v }}
{{ - printf " % s = %q" $ k $ v | safeHTMLAttr }}
{{ - end }}
{{ - end }} >
:(中略)
デザインを適当にググって、cssにクラス指定した名前で書き足しとく。
assets/css/extended/theme-vars-override.css
1
2
3
4
5
6
7
8
9
10
11
12
/* 表(テーブル) */
.gvis-table {
table-layout : auto ;
width : 100 % ;
max-width : 100 % ;
border-collapse : collapse ;
}
.gvis-table th :first-child {
border-radius : 5 px 0 0 0 ;
}
:( 中略 )
縦線入るようになった。
固定ヘッダの指定#
ヘッダの置き場とファイル名が決まっているので指定して作成。
1
2
3
4
5
6
7
8
9
./layouts
├── _default
│ └── _markup
│ ├── render-link.html
│ └── render-table.html
├── partials
│ └── extend_head.html ⭐️固定ヘッダの指定
└── shortcodes
└── blogcard.html
固定ヘッダの指定extend_head.htmlはこんな内容。
最初は画像置くこと考えてたけど、シンプルにタイトルとサブタイトルにしとこ。
1
2
3
4
5
6
7
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ギャバンITサービス</title>
<font size="5"><center>ギャバンITサービス</center></font><h5><center>お菓子の家が作れるシステムエンジニアです</center></h5>
</head>
更新日付の表示#
生成AIに聞いてみた。
hugo papermod show update date
なるほど、更新日付をフロントマターに書けばええのね。他にpost_meta.htmlを作ればええってことか。
1
2
3
To show the update date for a post in a Hugo PaperMod theme,
the lastmod frontmatter variable needs to be utilized
and the theme's post_meta.html partial needs to be modified.
他にも検索すると、gitの更新日付と絡めてる人がいるんやけど、自分は１つずつメモ作るから手で書きたい。
メモ投稿にそれぞれ入ってるフロントマターに書く。
1
2
3
4
5
+++
title = 'hugo-PaperModでssg使う-さらばwordpress'
date = '2025-07-20T00:00:00+09:00'
lastmod = '2025-07-27T00:00:00+09:00' ⭐️書いとく
:(中略)
このへんにファイル置く。
1
2
3
4
5
6
7
8
9
10
./layouts
├── _default
│ └── _markup
│ ├── render-link.html
│ └── render-table.html
├── partials
│ └── extend_head.html
│ └── post_meta.html ⭐️更新日付出力させるおまじない
└── shortcodes
└── blogcard.html
生成AIの提案内容を丸パクリ。セパレータに⭐️使うようにしとこ。
layouts/partials/post_meta.html
1
2
3
4
5
6
7
8
{{ $date := .Date.Format "2006.01.02" }}
{{ $lastmod := .Lastmod.Format "2006.01.02" }}
<time datetime = "{{ .Date.Format " 2006-01-02T15:04:05Z07:00 " }}" >{{ $date }}</time >
{{ if ne $date $lastmod }}
<span class = "meta-separator" > ⭐️</span >
<time datetime = "{{ .Lastmod.Format " 2006-01-02T15:04:05Z07:00 " }}" >Updated: {{ $lastmod }}</time >
{{ end }}
一覧に表示できとる。
本文にも表示できとる。
blogカード表示させる#
wordpressはblogカードを自動で作ってくれてたのを使ってたけど、hugoでは作り込みいるらしい。
1
2
3
4
5
6
7
8
9
./layouts
├── _default
│ └── _markup
│ ├── render-link.html
│ └── render-table.html
├── partials
│ └── extend_head.html
└── shortcodes
└── blogcard.html ⭐️ショートコードでblogカード指定
リンク切れしてたらわかりやすいのと、対象のURLで使ってる電子証明が有効期限切れしてたらエラーになってくれる(例えばdjangoの古いバージョンのドキュメントが入ったサイトは期限切れてた)。
便利で見た目も好きやからhugo-papermodになっても使いたいけど、ショートコードってのを用意する必要があるのな。
blogカードを使うためのblogcard.htmlはちょっと長い。djangoのテンプレートみたいにhtmlと処理を混ぜて書いてくみたい。
今は移行が目的やから、あんまり深掘りせず表示できるだけを目指す。
解説されてる方がおられた。作者さんありがとう。
Hugoでブログカードを作成する（resources.GetRemote利用） - SIS Lab
最初は丸パクリさせてもらおうとしてたんやけど、エラー出てきた。
v0.141.0からResource.Errがなくなって、try使う仕様に変わったらしい。
1
2
can’t evaluate field Err in type resource.Resource: Resource.Err was removed in Hugo v0.141.0
and replaced with a new try keyword, see https://gohugo.io/functions/go-template/try/
回避されてる方がおられた。作者さんありがとう。参考にさせてもらいました。
Resource.Errを使わなくなってresources.GetRemoteした結果を.Errって参照せんようになってた。
Hugo v0.141.0以降でブログカードを利用する - シノノメドキ
shinonono.net
favicon.icoの取得はエラーになってまうページあるみたいやったし、なくてもええかなって思ってカットしたのと、新タブでページ開くようにhtml生成箇所を変えさせてもらった。
layouts/shortcodes/blogcard.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
{{- $url := (.Get 0) -}}
{{- $target_url := urls.Parse $url -}}
{{- $title := "" -}}
{{- $favicon_url := "" -}}
{{- $content := "" -}}
<!-- リモートリソースを取得 -->
{{- $resource := false -}}
{{- with resources.GetRemote $url -}} ⭐️$resource.Errを参照せんようにこの後の処理を書いておられる
{{- $resource = . -}}
<!-- このスコープ内では$resourceは正常に取得できたリソース -->
{{- $content = $resource.Content -}}
<!-- headを取得 -->
{{- $head := index (findRE "<head [^ >]*?>(.|\n)*?</head >" $content) 0 -}}
<!-- headからタイトルを取得 -->
{{- $title = index (findRE "<title. *? >(.|\n)*?</title >" $head) 0 -}}
{{- if $title -}}
{{- $title = replaceRE "< /?title>" "" $title -}}
{{- end -}}
<!-- headからfaviconを取得 -->
{{- $linktag := index (findRE "<link [^< >]*rel=[\"']?icon[\"']?.*?>" $head) 0 -}}
{{- if not $linktag -}}
{{- $linktag = index (findRE "<link [^< >]*?rel=[\"']?shortcut icon[\"']?.*?>" $head) 0 -}}
{{- end -}}
{{- if $linktag -}}
{{- $href := index (findRE "href=[\"']?[^ >]*[\"']?" $linktag) 0 -}}
{{- $href = replace $href "href=" "" | replaceRE "[\"']" "" -}}
{{- if eq (strings.Substr $href 0 1) "/" -}}
{{- $favicon_url = print $target_url.Scheme "://" $target_url.Hostname $href -}}
{{- else if gt (len (findRE "^http[s]?://" $href)) 0 -}}
{{- $favicon_url = $href -}}
{{- end -}}
{{- end -}}
<!-- /favicon.icoを取得 --> ⭐️このへんカット
{{- else -}}
{{- $title = (print $url "にアクセスできませんでした") -}}
{{- end -}}
<!-- HTMLを生成 -->
<a href = "{{- $url -}}" target = "_blank" rel = "noopener" > ⭐️targetとrelの指定書いて新規タブで開く
<div class = "box" >
<div class = "link-card" >
<div class = "link-card-title" >
{{- $title | htmlUnescape | truncate 100 -}}
</div >
<div class = "link-card-hostname" >
{{ if $favicon_url }}
<div class = "link-card-hostname-img" >
<img alt = "icon" src = "{{- $favicon_url -}}" >
</div >
{{ end }}
<span >
{{- $target_url.Hostname -}}
</span >
</div >
</div >
</div >
</a >
html作るところに<div class="box">ってあるから、css使う。
定義を用意する。ググってあっちこっち見たから、なんでこのファイルをここに作ったのかはわけわかめ。
1
2
3
4
/assets/
└── css
└── extended
└── theme-vars-override.css ⭐️作った
cssあんまり得意やないんやけど、いったんこう書き足しとく。
assets/css/extended/theme-vars-override.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
.link-card {
display : flex ;
flex-direction : column ;
padding : 1.5 em ;
margin-top : 1 em ;
margin-bottom : 1 em ;
/* 以下はお好みで */
border :solid 2 px rgb(4 , 56 , 242 );
border-radius :5 px ;
}
/* マウスホバー時の挙動 */
.link-card :hover {
opacity : 0.6 ;
transition : 0.1 s ;
}
.link-card-title {
font-weight : bold ;
margin-bottom : 0.8 em ;
white-space : nowrap ;
overflow : hidden ;
text-overflow : ellipsis ;
}
.link-card-hostname {
display : flex ;
align-items : center ;
height : 1.5 em ;
white-space : nowrap ;
overflow : hidden ;
text-overflow : ellipsis ;
}
.link-card-hostname-img {
height : 100 % ;
display : flex ;
align-items : center ;
}
.link-card-hostname-img img {
max-height : 100 % ;
width : auto ;
margin-right : 1 em ;
}
.link-card-hostname span {
font-size : 0.9 em ;
}
.box {
background-color : var (-- border- color );
padding : 1 em ;
}
ここまで書いて、このページのblogカードはhtml表示されるようになった。
ただし、どうしてもうまく表示されんページがある。
存在しないページは、hugo起動したときにエラーになるしリンク切れがわかる。
メンテ中で落ちてたり、入り口で人の利用じゃない(クロールとか)ことを確認してるページは、hugo起動してるときにエラーが返ってくる。
error calling GetRemote: failed to fetch remote resource from
'https://stackoverflow.com/questions/77684480/problem-with-django-class-based-logoutview-in-django-5-0': Forbidden
error calling GetRemote: Get "https://wis.pocketcard.co.jp/netservice/login": read: network is down
見出しの見せ方変える#
さっきtheme-vars-override.cssって作ったから他にもいじれるんとちゃうか。
本文の文字サイズよりも、見出しの文字サイズが小さくなることがある。
色つけたらちょっとは読みやすくなるやろか。
cssいじったついでに、見出しに色つけてみるか。
見出しのデザインなんて自分では絶対できん。
デザインを公開されてる方がおられた。作者さんありがとう。
CSSのコピペだけ！おしゃれな見出しのデザイン例まとめ68選
デザインを公開しておられれて、cssに入れたら即反映されてまう。
vscodeで編集してると色指定の箇所で色が選べて修正できるけど、さっきのblogカードの縁の色にそろえとこ。
1
2
3
4
5
6
7
8
9
10
11
12
13
h2 {
border-bottom : solid 3px #cce4ff;
position : relative;
}
h2:after {
position : absolute;
content : " " ;
display : block;
border-bottom : solid 3px rgb(4, 56, 242); ⭐️色そろえとこ
bottom : -3px;
width : 20 %;
}
使いたい色になったし、これでええ。
画像の見せ方変える#
画像はハードコピーもあるし、生成AIに手伝ってもらったもんもある。
macとかwindowsとか、wikiにあった透過画像もあるんやけど、awsの透過画像をダークモードにしたとき、オレンジの箇所の上にある「aws」って文字が黒いから見えん。
なんか手はないんかって考えて、カーテンの下から漏れる外の明るさを見て、うっすら影つけたらええんとちゃうかって考えた。
そしたら、透過画像にも影つけてる解説をしてる人がいた。
作者さんありがとう。
【CSS】box-shadowで要素や画像に影をつけよう！使い方を解説 │ TechMania
cssにこう書いたらええらしい。画像の枠にもついてくれるんかな。
1
2
3
img {
filter :drop-shadow(2 px 2 px 2 px #cce4ff );
}
やってみたらできた。ロゴの「aws」見える。
こんなんwebデザイナでないと知らんちゅーねん。
検索とメニュー表示をつける#
メニュー階層は本番と検証環境で別ファイルに定義したい。
最初はconfig.ymlにメニューのことだけ書いてたけど、最初の本番反映のときにhugo.yamlにまとめた。
絵文字使えるんかなってやってみたらPCでもスマホでも同じように表示できてる。
本番用の定義はこんな感じ。
config/production/hugo.yaml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
baseURL : 'https://gavann-it.com/'
copyright : 'ギャバンITサービス 2014 - 2025'
menu :
main :
- identifier : okashi
name : 🍰おかし
url : posts/98_okashi/
weight : 10
- identifier : tags
name : 🏷️得意
url : /tags/
weight : 20
- identifier : memo
name : 📝メモ
url : /posts/
weight : 30
- identifier : 検索
name : 🔍
url : /search/
weight : 40
- identifier : categories
name : ✨
url : /categories/
weight : 50
- identifier : aboutme
name : 😃
url : /about/
weight : 98
outputs :
home :
- HTML
- RSS
- JSON # necessary for search
検証環境用はbaseURLと、最後のidentifier: gavann-itってある箇所の定義が少し違うようにして⭐️印でローカル検証画面開いてることを意識できるようにした。
config/stating/hugo.yaml
1
2
3
4
5
6
7
baseURL : 'http://gvis-mac.intra.gavann-it.com:1313/'
copyright : '⭐️ギャバンITサービス 2014 - 2025'
:(中略)
- identifier : gavann-it
name : ⭐️lcl-stg
url : http://gvis-mac.intra.gavann-it.com:1313/
宅内LANでのURL一覧から検索させる#
URL一覧があり、ここに検索機能がついてる。あ、もう「お問い合わせ」いらんから、ついでに外す。
wordpress使ってるときは、こんな感じで検索機能使ってた。
1
2
3
4
<form class = "search-box input-box" method = "get" action = "https://gavann-it.com/" >
<input type = "text" placeholder = "gavann-it.comを検索" name = "s" class = "search-edit" aria-label = "input" value = "" >
<button type = "submit" class = "search-submit" aria-label = "button" ><span class = "fa fa-search" aria-hidden = "true" ></span ></button >
</form >
これを、前から気になってたgoogleカスタム検索エンジン使ったものに変えてみる。
やり方を説明されてる方がおられた。作者さんありがとう。
Google カスタム検索エンジンでHugoのサイト内検索を行う | my opinion is my own
まずはgoogleの
カスタム検索エンジン
で登録やってみる。
登録したら検索エンジンIDが確定するから、formの中に書いとく。
1
2
3
4
5
6
7
8
<form action = "https://cse.google.com/cse" target = "_blank" >
<div class = "search-box input-box" method = "get" >
<input type = "hidden" name = "cx" value = "962e4f3684e7e46a4" /> ⭐️登録した検索エンジンID
<input type = "hidden" name = "ie" value = "UTF-8" />
<input type = "search" name = "q" placeholder = "検索" size = "15" autocomplete = "off" />
<input type = "submit" value = "Googleカスタム検索" />
</div >
</form >
「おかし」って検索してみる。
探してくれてるやん。ちゃんと別タブで開いてくれてる。
検索結果はダークモードにならんのかなぁ。
デザインにshinyとかespressoとかあったけどダークモードっぽいのは見つけられず・・・。
背景色とか検索結果の文字とか手動でいじっといた。
タグで取り扱い業務のマップみたいなの作れるんとちゃうか#
一般的にタグっていうと、SNSのハッシュタグとか、クラウドの中やとVMやファイアウォール定義にタグ名つけてたり、HTMLタグってのもあって、ITの世界で「タグ」ってよー出てくる。
hugoのメニューにもタグあるんやけど、タグには投稿の件数がついてる。
これを使うと、自分が書いた投稿のばらつき具合が見えて、数が多いほどたくさん書いてる。
つまり、重点的に技術を深掘りしてったものほど多いから、得意分野みたいなことになる。
hugoでのタグは「得意」って表示にして、「自分はお客様に何が提供できるやろか」をいつも考えられる材料にしとく。
ついでに、検索用のマークダウンをcontentsフォルダの直下にsearch.mdとして置いとくだけで検索ができる。
content/search.md
1
2
3
4
5
6
7
8
---
title: "検索" # in any language you want
layout: "search" # necessary for search
# url: "/archive"
# description: "Description for Search"
summary: "search"
placeholder: "テキスト"
---
トップページにメニューが表示できるようになった。
検索は日本語でも大丈夫みたいで、候補がスイスイ表示される。この感触ええねぇ。
iphoneで見ても検索できる。
投稿ページを１０ページとか一気に追加してたら、たまにカクカク動くことあったけど、hugoを一回止めてまた起動したらちゃんと動いた。
以前に扱った技術のメモを探す時に、タグと検索機能があればそのときの感触が思い出しやすくなる。
カテゴリつける#
ホンマは、wordpressの分類でツリー表示できてたのを作れたらええなって思ってたんやけど、見つけられんかった。階層構造は無理なんかな。
使い方を解説されている方がおられた。作者さんありがとう。
Hugoでタグやカテゴリーはどう扱うの？ | Old Sunset Days
作り方見たらtaxonomiesの定義が必要って書いてあったけど、カテゴリを記事の中に書いてみた。
例えばこんな感じ。
1
2
categories = [ "AI" ]
tags = [ "gemini", "docker","jupyter" ]
ページ見え方変わるんかなってやってみたら、いきなりカテゴリ見えるやん。
タグも見えてた。タグ名の右上にある数字が投稿数やから、何を頑張って書いたかがわかる。まだ３割しか移行終わってへんときの数字やけどな。
念のためhugo.yamlにも書き足した。
1
2
3
4
# タグやカテゴリを扱う
taxonomies :
tag : "tags"
category : "categories"
パンくずリスト表示させる#
webページの上の方にはパンくずリストの表示があって、hugoのテーマであるpapermodはパラメータでオンにしといたら勝手に作ってくれる。
これが最初の頃うまく表示できずにいたんやけど、wordpressとお別れしてページをアップロードした後にgoogle searchコンソールの指摘で気づいた。
何のこと言うてんのか最初全然分からへんかった。
よぉ見たらld+jsonの形式でパンくずリスト作る箇所でnameってある箇所がちゃんと入ってへん箇所があった。
1
2
3
4
:(中略)
"position":1,"name":"Posts","item":"https://gavann-it.com/posts/"
"position":2,"name":"","item":"https://gavann-it.com/posts/02_linux-unix/" ⭐️nameの要素が入らず「""」ってなっとる
:(中略)
マークダウンから自動生成してくれる箇所やのにどないしたらええねんって最初思ったし、
同じようなことで困ってる人いた
けど、hugoのフォルダ構成にある_index.mdをちゃんと用意してたらこの問題起きへん。
最初の頃このファイルに何て書いといたらええのかわからんかった。
こういう感じでカテゴリのフォルダに全部書いとかなアカン。
カテゴリ１３個あるしタイトル変えながら、それぞれに設置して解決。
_index.mdは大事にせなアカンな。
publicフォルダをgitの追跡対象から外す#
contentにあるページの記述を書き換えると、自動的にpublicのフォルダにある内容が更新される。
ブラウザでページをリロードすると更新されてるのがわかるけど、gitも追跡してまう。
ということで、ルートフォルダに.gitignoreを置いてこう書いとく。
1
2
3
._*
.DS_Store
public/*
そのままgit addしてついでに他のも足しとく。
1
2
3
4
5
6
7
8
9
nari@gvis-mac gavann-it % vi .gitignore
nari@gvis-mac gavann-it % git add .gitignore
nari@gvis-mac gavann-it % git commit -m "Add .gitignore"
[20250618-papermod-ready 40e1507] Add .gitignore
29 files changed, 2678 insertions(+), 54 deletions(-)
create mode 100644 .gitignore
create mode 100755 content/posts/11_ai/gemini-docker-jupyter/index.md
:(中略)
nari@gvis-mac gavann-it %
youtubeの埋め込み#
ここで教えてもらった。作者さんありがとう。
HugoでYoutube埋め込み | Old Sunset Days
うまいこと入る
やん。
数式の表示#
数式を表現するのってどうやるんやろ。
wordpressのときよりややこしそうやな。
解説されてる方がおられた。作者さんありがとう。
Hugoで数式(Mathjax)を書く時の注意事項 #MathJax - Qiita
数式表現のためのマークダウンをどう扱うかについてのリファレンスマニュアルがある。
ここのstep1〜4があるのをやってみた。
まずはhugo.yamlに書き足す。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
params:
# 数式を表現できるようにする(その１)
math: true ⭐️書き足した
markup: ⭐️丸パクリで書き足した
# 数式を表現できるようにする(その２) https://gohugo.io/configuration/markup/#passthrough
asciidocExt:
attributes: {}
backend: html5
extensions: []
failureLevel: fatal
noHeaderOrFooter: true
preserveTOC: false
safeMode: unsafe
sectionNumbers: false
trace: false
verbose: false
workingFolderCurrent: false
# 数式を表現できるようにする(その３) https://gohugo.io/content-management/mathematics/
goldmark:
extensions:
passthrough:
delimiters:
block:
- - \[
- \]
- - $$
- $$
inline:
- - \(
- \)
enable: true
次に```layouts/_parials/math.htmlをそのままパクって作る。mathjaxってのを使うんやな。
layouts/partials/math.html
1
2
3
4
5
6
7
8
9
10
11
12
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js"></script>
<script>
MathJax = {
tex: {
displayMath: [['\\[', '\\]'], ['$$', '$$']], // block
inlineMath: [['\\(', '\\)']] // inline
},
loader:{
load: ['ui/safe']
},
};
</script>
さらにlayouts/baseof.htmlってのを作るんやけど、説明の箇所は省略して書いてあるから、
適当にサンプル
拾ってきて書き足した。
layouts/baseof.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html lang="{{ or site.Language.LanguageCode }}" dir="{{ or site.Language.LanguageDirection `ltr` }}">
<head>
{{ partial "head.html" . }}
{{ if .Param "math" }} ⭐️書き足した
{{ partialCached "math.html" . }} ⭐️書き足した
{{ end }} ⭐️書き足した
</head>
<body>
<header>
{{ partial "header.html" . }}
</header>
<main>
{{ block "main" . }}{{ end }}
</main>
<footer>
{{ partial "footer.html" . }}
</footer>
</body>
</html>
さて数式書いてみる。
改行するためのバックスラッシュは６つ必要って書いてあったけど、４つで行けるのはなんでなんやろう。
1
2
3
4
\begin{pmatrix}
a & b \\\\
c & d
\end{pmatrix}
vscodeやと、この書き方を「```math」で囲まな数式表現してくれへん。
今回はwordpress捨ててhugo-papermodに引っ越すから、引っ越し先でちゃんと表示できることを選ぶ。
hugo-papermodでページ表示するとこうなる。
\begin{pmatrix}
a & b \\
c & d
\end{pmatrix}
行けるやん。
ページネーション#
投稿したメモたちをリスト表示するときにページネーションがついてほしい。
マニュアルページに書いてある内容だけじゃ、よーわからん。
hugo 0.146.0からページネーション関連が変更されてるそうな。ということはググって古めの記事見て参考にしたらアカン。
ググったけど、そもそもどのあたりにPaginatorのこと書いたらええんかわからん。
ここにも何か書いてあって、{{ template "_internal/pagination.html" . }}を入れるらしい。え、こんだけ？
ページ付け · Go & Hugo ドキュメント v5.3
カテゴリとかタグとかのページ表示したとき、フッタのすぐ上に表示させたい。
papermodのテーマにあるthemes/PaperMod/layouts/_default/list.htmlをコピーしてきて、96行目あたりにさっきの記述をつけてみた。
list.htmlをコピーして持ってくると、ページを生成してくれるときにこっちを優先的に使ってくれる。
小っこいけど、リストの先頭・最後・途中ページ・両隣のページ番号がちゃんと出るやん。
色々書かなアカンのかなと思ったけど、一行だけ書いて入った。
CSSで定義変えたらもうちょっと大きいボタンで表示できるやろか。css書いておられる方がいた。作者さんのを参考にさせてもらいました。
2025/03/07 ChatGPTに丸投げしてHugoにページ送りを実装する / 今日のアニメ｜日記藻中
色合いとか丸み具合とか変えてみて、おお、ええ感じで入ったな。
ページネーションつけたら、一覧の両端にあるPrevとNextってあるボタンがいらん。
ちょっと改造しとこ。
{{ template "_internal/pagination.html" . }} ⭐️さっき書き足したとこ
{{- if gt $paginator.TotalPages 1 }}
:(中略)
<footer class="page-footer">
<nav class="pagination">
{{- if $paginator.HasPrev }} ⭐️このif文の中の記述を消した
{{- end }}
{{- if $paginator.HasNext }} ⭐️このif文の中の記述を消した
{{- end }}
</nav>
</footer>
:(中略)
一覧にあるNextとPrevが消せた。
それぞれの投稿のは残ってくれてる。
<nav class="patination">ってブロック箇所を丸ごと消すとページネーションも消えてまう。
コード表示でファイル名つける#
マークダウンでソースコードとか入れる時は、バッククオート３文字を書いた行で挟んでた。
頭に書くバッククオート３文字に続いてpythonとか、bash ってつけたら、その言語の予約語とかに色がついてくれる。
このコードの先頭にファイル名がつけられるらしい。作者さんありがとう。参考にさせてもらいました。
コードブロックにファイル名を埋め込む方法 - 日本語 - HUGO
hugoではあるけど、papermodでもいけるんかな。
ショートコード用意しておいて、バッククオート３文字やなく、ショートコード呼び出す。
:(中略)
検証環境(staging)でやってみたら表示できた。左が本番(production)で右がローカルPCの検証環境。
なんやねん、ファイル名とコードの間に隙間できとるやないか。
またcssいじらなアカンやん。ブラウザで目視しながらページのソース見ていじってみた。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
/* タイトル付きコードの利用のため */
.xCodeBlock_title {
display : inline-block ;
font-size : smaller ;
border-radius : 0.9 em 0.9 em 0 0 ; ⭐️ちょっと変えた
padding : 0 0.5 em ;
background : rgb(104 , 132 , 235 ); ⭐️ここだけ指定してcolor指定外した(ダークモードにしたときの見ためのため)
}
.xCodeBlock_code {
margin-top : -20 px ; ⭐️「-2」ってあったのを１０倍にして隙間減らしたけど、これでええんか？
}
.xCodeBlock_code pre {
white-space : pre-wrap ;
}
いったん、これでええ。
記述の中のmargin-topは最終的に「-27」にしたらコードのボックスにピッタリくっついた。
googleのクロール対象から外す#
外に出てスマホで見るときとか作業用の端末使う時、自分のサイトを見たいときがあってこのページを作ってる。
シェルスクリプトやバッチ処理のひな形やったり、コマンドラインやsqlの細かい使い方やったり。
そのため、google先生にページをある程度覚えてもらってたり、google search consoleでページの構成のアドバイスもらったりしてるんやけど、ふと気づいた。
投稿のカテゴリとかタグとか、間接的なページまで覚えてくれてる。
投稿メモは覚えて欲しいけど、カテゴリとタグのページは検索対象にせんでもええんとちゃう？
noindex を使用してコンテンツをインデックスから除外する | Google 検索セントラル | Documentation | Google for Developers
ずっと昔に同じようなことしたことあるけど、nofollowってのも書いたような気がするけど、何やったかなぁ。
説明してくれてる方がおられた。作者さんありがとう。
noindexとnofollowの使い方SEO効果を上げるポイントを徹底解説 | WEB集客ラボ byGMO（GMO TECH）
ファイル分割しなくてもできるような気がしたから、１ファイルの修正で済むようにしてみる。
カテゴリとタグのページのメタデータを設定することを目指す。
<meta name="robots" content="noindex, nofollow">
「google検索のインデックスから除外してちょ」がnoindexで、「ページ内のリンクをクロールせんとって」がnofollow。
これをページ生成してくれるときのpapermodのテーマにあるhtmlファイルをコピーしてきて、メタデータを作ってる箇所に書き足す。
layouts/partials/head.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<meta charset = "utf-8" >
<meta http-equiv = "X-UA-Compatible" content = "IE=edge" >
<meta name = "viewport" content = "width=device-width, initial-scale=1, shrink-to-fit=no" >
{{- if or (eq .Kind "section") (eq .Section "tags") }} <!-- タグをnoindexにする --> ⭐️足した
<meta name = "robots" content = "noindex, nofollow" > ⭐️足した
{{- else if or (eq .Kind "section") (eq .Section "categories") }} <!-- カテゴリをnoindexにする --> ⭐️足した
<meta name = "robots" content = "noindex, nofollow" > ⭐️足した
{{- else }} ⭐️足した
{{- if hugo.IsProduction | or (eq site.Params.env "production") | and (ne .Params.robotsNoIndex true) }}
<meta name = "robots" content = "index, follow" >
{{- else }}
<meta name = "robots" content = "noindex, nofollow" >
{{- end }}
{{- end }}
{{- /* Title */}}
:(中略)
orがうまいこと書けんかったから、同じような行２個つけた。いつか書き直せたらええな。
ページのタイプとかを判断してクロール除外の実装を解説されてる方がおられた。作者さんありがとう。
[Hugo] Docsy テーマのタグ一覧ページを Noindex にする方法 | Fand.jp Blog
あとはサイトマップが自動作成されてるはずやから、これも作成対象から外すようにしとこか。
除外設定の書いておられる方がおられた。作者さんありがとう。
Hugoでrobots.txtとsitemap.xmlを作る | Old Sunset Days
なるほど、そう書くんやな。
layouts/sitemap.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
<urlset xmlns = "http://www.sitemaps.org/schemas/sitemap/0.9" >
{{ range .Data.Pages }}
{{ if (in .Permalink "/categories/") | or (in .Permalink "/tags/") }} ⭐️ほぼそのまま
{{ else }}
<url >
<loc >{{ .Permalink }}</loc >{{ if not .Lastmod.IsZero }}
<lastmod >{{ safeHTML ( .Lastmod.Format "2006-01-02T15:04:05-07:00" ) }}</lastmod >{{ end }}{{ with .Sitemap.ChangeFreq }}
<changefreq >{{ . }}</changefreq >{{ end }}{{ if ge .Sitemap.Priority 0.0 }}
<priority >{{ .Sitemap.Priority }}</priority >{{ end }}
</url >
{{ end }}
{{ end }}
</urlset >
google検索のインデックスからは除外してくれるはずなんやけど、クロールは数日かかるからしばらくしてからURL検査で確認してみる。
カルーセルやめとこ#
回転寿司みたいにお菓子の家が流れるのええなぁって、wordpressではカルーセル入れてたけどhugoではcss使わんと入らん。
Slider/Carousel | Hugo Codex
今は移行が目的やからやめとこ。
データの手動移行#
wordpressのページをhugo用に変換してくれる仕組みとかたぶんあるんやろけど、そもそも元の文章はマークダウンで書いてる。
数はあるけど、３つの理由で手動移行することにした。
自分の文章には誤字脱字も多いから、ちょっとは校正しときたい
ヘッダをつけたりblogカードの箇所書き換えたり、リンクの見せ方とか変えたい
古い文章の中にリンク切れてるのがあるはずやから、違うリンクに変えるか削除するかしたい
画像どうするか#
wordpressに投稿する前の元画像は今まで１箇所に置いてたから、どれがどれかわからん。
./wordpressのためのローカルフォルダ
├── 投稿
│ └── linux
│ └── ubuntu.md ⭐️カテゴリごとのフォルダでマークダウン書いてwordpressの投稿画面でペーストしてた
│ └── windows
│ └── teraterm.md ⭐️カテゴリごとのフォルダでマークダウン書いてwordpressの投稿画面でペーストしてた
│ :
│ (中略)
└── pict
└── hogehoge.jpg ⭐️大量の画像
└── mogemoge.jpg
:
(中略)
フォルダ構成を、投稿単位にして置き場を分散させて更新しやすくする。
./hugo-papermodのためのローカルフォルダ
├── content/posts
│ ├── linux
│ │ ├── ubuntu ⭐️投稿名のフォルダ作る
│ │ │ └── index.md ⭐️元のマークダウンファイルにfront matterつける
│ │ │ └── hogehoge.jpg ⭐️マークダウンファイルが参照してる画像を置く
│ │ │ └── mogemoge.jpg
│ │ └── linux.jpg ⭐️カテゴリ単位の画像置いとく
│ └── header.jpg ⭐️ヘッダの画像置いとく
│ :
│ (中略)
└── pict
└── hogehoge.jpg ⭐️必要ならwebp変換前の画像残す
:
(中略)
wordpressのページは、画像をアップロードしたらサイズとか最適化するプラグイン使ってた。
面倒やけど、wordpressページからダウンロードすることで、サイズとか最適化されたものを投稿単位のフォルダに保管してそれを参照するように変えてく。
例えばwordpress分でこういうマークダウンを書いてたら、
画像を手動でhugo-papermodのためのローカルフォルダにダウンロード保管しておいてURLのベースネームだけに変更する。
リンク先を含むものあるし、古い順に書いてく。
2020年頃はマークダウンで書く練習しながらやってみてたから、ヘンな書き方も残ってたな。
間違いの履歴として置いときたい。
見え方とか試しながら書いて、投稿それぞれ入れてったら結構な重労働やった。
引っ越し#
念のため、lolipopのデータベースと、ftpで置いてるデータはバックアップした。
具体的にはmysqlのエクスポート結果と、ftpで置いてるデータをダウンロードしてtar.gzで保管。
本番用のhtmlをpublicフォルダに展開させておいてから、そのままlolipopのftpフォルダに置く。
アップロード終わったら、ftp先に元あったデータを一気に削除。
たまに見るgoogle search consoleにサイトマップ送り直しとく。
ちょっと勇気いるけどlolipopにあるデータベースを潰す。さらば、mysql。
もうwordpressとは縁が切れてるから、気にせず先に進む。
削除終わっても、データ量が減るだけで料金変わらんけどな。
mysqlの管理画面へログインができなくなってるから、ちゃんと削除できてるってことで。
ここでちょっと休憩。続きはまた明日。
PCからもスマホからもhugo-papermodのページはちゃんと見えるようになったな。
今見てるサイトがその成果。
これから色々改善せんとね。
改善できた点#
引っ越しは完了した。毎日２〜３時間、１ヶ月ぐらいかけて手動で引っ越ししたけど、苦労して書いたメモもあるしヘタクソな内容も多かったな。
インデックス登録対象はhugoを起動したときに表示される460ページ。
1
2
3
4
5
6
7
8
9
│ EN
─────────┼───
Pages │ 460 ⭐️これな
Paginator pages │ 171
Non-page files │ 1414
Static files │ 2
Processed images │ 0
Aliases │ 106
Cleaned │ 0
書いたメモは２３８個やけど、カテゴリとタグのページとかで倍くらいの数になるんやろか。
インデックス登録結果見たら、緑のグラフの箇所。
グレーの箇所も気になるな。wordpressのときの登録が残ってるみたいやから削除依頼しといた。
「一時的に削除されました」って書いてあるけど、ページは削除したし次にクロールしてくれたら完全抹消してくれるはず。ホンマかな？
ページの表示速度上がった気がするのと、データ量が減った#
ブラウザで表示するとき、スピード上がった気がする。
特にスマホからメモ探したい時に、読みたい内容を探しやすくもなった。
自分のために作ってるんやから、改善できた項目の筆頭になって当たり前やけどな。
元々マークダウンで書いてた内容をwordpressに貼り付けずに済むようになった#
これはデカい。書いたイメージほぼそのまま表示できる。直感的でええなと思う。
投稿のプレビューをvscodeの中でやってたけど、wordpressとは違った。
hugo-papermodでは書いた内容を保存するとほぼリアルタイムでpublicフォルダに反映されるから、更新内容そのままの画面を確認できる。
書いてるときは、別ディスプレイで表示させながら見え方を確認するから、vscodeのマークダウンプレビュー画面でちまちま見んでもええ。
コードの行番号がちゃんと表示できるようになった#
なんでかしらんけど、コードの行番号が９９までしかwordpressは表示できんかった。
たまに長いシェルスクリプトとか、大きなツリー結果を入れてるのがちゃんと表示できるようになったで。
バッククオート３文字の箇所いっぱい残ってるけど、ファイル名を書けるようにショートコード足した。
改悪した点#
ええことばっかりやない。うまいこといかんもんもある。ただし、それを補う努力をすることで力がついてくのも楽しい。
ブログカードはショートコード使う#
wordpressのエディタなんか今まで一回も使ってへん。
マークダウンのテキストを貼り付けてただけ。
ホンマの最初だけやってみようとしたけど、操作性イマイチですんなり理解できんかった。
使い方探さなアカン仕組みは使わん。
ただ１つ便利やなって思ってたのは、外部リンクが勝手にブログカードになってくれてたこと。
これはhugoに変えてからは意識して書く必要があって、ページの入り口で「ロボットちゃうやろな」みたいな仕組みが動いてるページのリンクはブログカードうまくできず、hugoで「ページ読めんで」って感じのエラーが出てまう。
自分のメモとして活用してるページやし、リンクさえわかればええから普通の埋め込みリンクにしといた。
ショートコードでblogカード表示できるようにはしたけど、utf8やないページへのリンクは文字化けする。
phpにあるコード変換の処理がgo言語にもあるとは思うんやけど、hugoのショートコードの中でどないして呼び出すんやろ。
まぁ、いつかeucのページは滅びる気がしてるから今すぐは何もせん。
css使う要素苦手、ページレイアウトとか色合いとかすぐに変更しにくい#
メニューをアニメーションさせてみたいんやけど、勉強したらできるようになるやろか。
cssの意味はわからんではないけど、なんでそう書くのかがなかなか頭に入らん・・・。
細かいけど、htmlでいう「テーブル」の見え方イマイチ気に入らん。
マトリクスで縦線が見えんのはいつか修正したいなぁ。 マトリクスで縦線見えるようにした。
css苦手やけど、テーブル要素だけやなくて見出しの見せ方変えたり、フォント指定入れたり、ページネーションの見せ方も勉強させてもらった。
webpってなんやろ#
wordpressにアップロードしてた画像はプラグインのおかげで勝手に圧縮保管してくれてたけど、hugo使うと自分でやらなアカン。
webp
ってファイル名の最後についてるから、そっから勉強してくか。画像も苦手。
AI先生とかに聞くと、macやったらプレビューアプリで変換できそうなこと書いてあったんやけど、書き出しフォーマットでwebp見つけられんかった。
Sequoiaやったらアカンのかな。
コマンドラインでもできるらしくて、brewでインストールして使ったらええ。
インストールはbrew install webpってやっとくと使える。最新版維持もできそうやし、コマンドラインでファイル一覧渡したら一括変換できそやな。
一括変換解説してる方がおられた。作者さんありがとう。
Macコマンドで簡単！PNG＆JPGをWebPに一括変換 | Cruw
cruw.co.jp
たぶんこのへん使えばええか。
1
ls -d $(find -E `pwd` -iregex ".*\.(jpg|jpeg|png)" -type f) | xargs -L 1 -I {} cwebp {} -o {}.webp
まずは１つずつ指定してみると縮み具合が大きい。半分どころか４分の１ぐらいまで縮む。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
nari@gvis-mac googlesearch % cwebp -version
1.5.0
libsharpyuv: 0.4.1
nari@gvis-mac googlesearch % cwebp ./gvisShot\ 2025-06-29\ 5.59.16.jpg -o ./gvisShot\ 2025-06-29\ 5.59.16.jpg.webp ⭐️縮んで！
Saving file './gvisShot 2025-06-29 5.59.16.jpg.webp'
:( 中略)
block count: intra4: 768 ( 22.84%)
intra16: 2594 ( 77.16%)
skipped: 2088 ( 62.11%)
bytes used: header: 296 ( 1.1%)
mode-partition: 4363 ( 16.3%)
Residuals bytes |segment 1|segment 2|segment 3|segment 4| total
macroblocks: | 1%| 9%| 18%| 73%| 3362
quantizer: | 36 | 34 | 29 | 23 |
filter level: | 11 | 63 | 12 | 10 |
:( 中略)
nari@gvis-mac googlesearch % ls -lh
total 632
-rw-r--r--@ 1 nari staff 112K 6 29 06:00 gvisShot 2025-06-29 5.59.16.jpg
-rw-r--r-- 1 nari staff 26K 7 20 17:07 gvisShot 2025-06-29 5.59.16.jpg.webp ⭐️そない縮むんや
-rw-r--r--@ 1 nari staff 132K 6 29 06:01 gvisShot 2025-06-29 6.00.28.jpg
-rw-r--r-- 1 nari staff 37K 7 20 17:08 gvisShot 2025-06-29 6.00.28.jpg.webp ⭐️そない縮むんや
nari@gvis-mac googlesearch %
メモの中の画像が多いこともあるから、エイリアスにこう登録しとくとカレントディレクトリのjpgとかを全部webpに変換してくれる。
1
2
3
nari@gvis-mac ~ % alias | grep hgw
hgw= 'rm -f *.webp ; ls -d $(find -E `pwd` -iregex ".*\.(jpg|jpeg|png)" -type f) | xargs -L 1 -I {} cwebp {} -o {}.webp'
nari@gvis-mac ~ %
投稿フォルダで一括変換すると、できるやん！
1
2
3
4
5
6
7
8
9
10
11
12
13
nari@gvis-mac AWSで多重要素認証( MFA) % hgw ⭐️一括で縮め！
Saving file '/Users/nari/Documents/personal/Download/naridoc/gavann-it/content/posts/04_cloud/AWSで多重要素認証(MFA)/aws-mfa01.jpg.webp'
File: /Users/nari/Documents/personal/Download/naridoc/gavann-it/content/posts/04_cloud/AWSで多重要素認証( MFA) /aws-mfa01.jpg
:( 中略)
nari@gvis-mac AWSで多重要素認証( MFA) % ls -l
total 1104
-rw-r--r--@ 1 nari staff 26626 8 10 06:02 aws-mfa01.jpg
-rw-r--r-- 1 nari staff 5540 8 10 06:48 aws-mfa01.jpg.webp ⭐️縮んどる！
:( 中略)
-rw-r--r--@ 1 nari staff 26432 8 10 06:17 aws-mfa10.jpg
-rw-r--r-- 1 nari staff 6818 8 10 06:48 aws-mfa10.jpg.webp ⭐️縮んどる！
-rwxr-xr-x@ 1 nari staff 3257 8 10 06:40 index.md
nari@gvis-mac AWSで多重要素認証( MFA) %
１０個とか２０個とか一括で縮ませても１秒かからんぐらいで終わる感じですな。
webpはmacosのプレビューアプリでは編集できんから、元のjpgを投稿ごとに残して置いとく。
blogcardでうまく情報取れへんサイトがある#
こういう感じで文字化ける・・・。
RDXȤ Removable Disk Exchange systemRDXå
rdx-rd.jp
商用サイトみたいなのとか、銀行サイトとかjavaが裏で動いてるサイトは化けるんかな。utf8やなくてeucとかsjisやと化ける。
Linux VXeobNAbvXgA(xfs dump restore) - ܂ققЂ
chidipy.jpn.com
wordpressやったら化けへんのになぁ。ショートコードの中で使える
関数
にデコード系のは見つけられんかった。
昔たいへんお世話になったatmarkitのページも文字化けするとこあったで。
会員にならな全文が読めへんようになってからは、もう見てへんけどな。
htmlタグの<br>ってのがうまく書けへん#
goldmarkってのがあるらしいんやけど、マークダウンのテキストの中に書いてみても改行してくれへん。
なぜかマトリクスの中だけは改行できるみたいやけど、ようわからん。
ほんでgoldmarkってなんやろな。これも別で調べてみよか。
