Tech
PaperMod 背景画像の設定
背景画像を入れたくなり,素材サイトでパターン画像の色を任意に変更して画像を作った. 参考: https://bg-patterns.com/?p=2299 PaperMod で背景画像を設定するのに一日くらい四苦八苦していた. theme-vars.css に背景色などの設定が変数でまとまっているのはわかったが, そのままここに background-image を書き足しても反映されない. main.cssか,baseof.html か,list.html か... 公式の質問で変数の設定方法を見つけたが書く場所がわからない. (恐らく,hugo.yaml と baseof.html か list.html) 参考: https://github.com/adityatelange/hugo-PaperMod/discussions/988 結局,public フォルダに画像を入れていないから表示されないことに気づき, public 直下に画像を入れ, theme-vars.css から見た相対パスを記述した. 画像が濃すぎたので,背景画像の濃度を背景色とブレンドモードを使って弄った. 参考: https://note.com/jackinriver/n/n4383898ce0c6 .list { # background: var(--code-bg); background: repeat url("../../patter.png"); background-color:rgba(255,255,255,0.7); background-blend-mode:lighten; } ついでに --primary: rgb(79, 128, 207); の色も弄り,サイトの雰囲気がガラッと変わった✨ あと,絵文字も使えるように,hugo.yamlに enableEmoji: "true"も指定しておいた.
Hugo のカバー画像
なぜか list.html のコードでエラーが出たり(知らず </div> が入っていた?) hugo server で正しく表示できるのに,Netlify のビルドのエラーが出たり(再ビルドで直った)していたが,3 日程かけてようやくHugo PaperMod のリスト表示のカバー画像を良い感じで設定できた. テーマ PaperMod のテンプレートのファイルを修正する必要がある. テーマのテンプレートを公式サブモジュールのパスでインストールした場合,ファイルを変更しても,当然のように push ができないという問題がある. themes/PaperMod/ 以下の Git のリモートのパスは公式のパスを指しているので作者しか変更を反映できない. PaperMod のインストール方法は 4 つあり,サブモジュール以外には,clone, DL してディレクトリ配置,hugo モジュール使用と 3つあるが,hugo モジュール使用は原因不明でうまくいかず,clone と DL は,hugo server とローカルでは正しくビルドされるが,Netlify でビルドするとサブモジュールのパスが設定されていない,.gitmodule が無い,と怒られて失敗する. Netlify では強制的にサブモジュールによるテーマ適用しかできないようだ.そこで,リポジトリを Fork することを考える. GitLab の Import Repository で公式 PaperMod の GitHub の URL を入れ,任意のグループとリポジトリ名を指定し,Mirror Repository にチェックを入れ,自分のアカウントにリモートリポジトリを作成する. これを参照するように,submodule コマンドで元の公式の PaperMod の関連パスとディレクトリを削除し,新たに自分のアカウントにある PaperMod のリモートリポジトリのパスを指定して submodule として設定する. 参考: https://qiita.com/k_yamashita/items/040c04f8798d2384806e submodule の削除と再追加 まず公式のパスを削除する. git submodule definit -f themes/PaperMod git rm -f themes/PaperMod git -rf ....
Hugo x Netlify ブログ 前編
前提 GitLab Pages を愛用しており,以前は GitBook を使った静的サイトを作っていた.ガジェット友達の元同僚に勧めたところ気に入ってサイト作成をその方法に乗り換えてくれたのだが,その後,さらに Hugo に乗り換えたという知らせを受けた. 自分でも技術ブログ的なものを書いてみたくなり,GitBook はページ数が決まっているサイトには適しているけれど,ブログのようなサイトには適さないと思い至った.そこで Hugo を使いたくなり一日調べ上げてブログを公開した. 調査 ホスティング先は Netlify がお勧めされている.もちろん,GitLab Pages や GitHub Pages でも良いのだけれど, https://[好きなアドレス].netlify.app というさらに短縮された URL で公開できるのは魅力的に思った. Netlify は CodeSandBox か何かで間接的に用いただけでアカウントを持っていなかったので,GitLab アカウントでログインしたが,あまり使い方がわからない.GitLab では Hugo テンプレートが最初から選択できて,すぐに Hugo サイトを GitLab Pages で公開できる.そのため,GitLab の Hugo テンプレートを選択してリポジトリを作成し,そのリポジトリを Netlify の from exsisting repositry から選んでみた.よし,これで簡単と思ったが,Netlify では自動で URL を付けてくれたが,Page Not Found となった. Hugo の日本語情報がそもそも多くはなく,Netlify と組合わせて公開する例はさらに減る.減るがないわけではないし,それなりのギークな人が公開しているので役立つページは多い. 諦めて GitLab Pages で公開しようかなと思ったが,そもそもテーマテンプレートをうまく設定できない.テンプレートを設定するには複数の方法があるようだが,これがページによって説明がまるで違って非常にわかりにくい. たった数行のコマンドで良いはずなのだが... 結局,git サブモジュールとしてテンプレートを設定する方法が推奨されているので,hugo コマンドを打つ必要があり,ローカルで諸々設定する必要性を感じ,大人しく従うことにした. Hugo に好きなテンプレートを適用する 私は PaperMod を使ってみることにした. テンプレート設定の正しい情報が載っているサイトが少なく,結構たくさんのページを調べたが,結論から言うと, PaperMod 公式の以下のインストール手順と,...
Clicks Keyboard for iPhone
Clicks を買った! 例えば長年の Black Berry ユーザでスマートフォンの買い替え先に困っていて,iPhone が iPhone らしくなくなっても構わない人は真似して欲しい. 私は Black Berry Key2 を 6 年使った末に乗り換えて満足しています. 「何それ?キーボード付いてるの?スマホ長っ!」 とか Black Berry 以上にキーボードが目立つので話のネタにもなります.女性のスカートのポケットは案外深くて難なく入るので,心配無用です.逆に男性のズボンのポケットの方が浅いかもしれません. 小さい画面好きなので,サイズは画面とキーが一体になった Black Berry Key2 で十分なんだけどね. 5 月初旬に iPhone Pro 15 のサイズの注文が開始したので注文し,5 月中旬に海外から配送され手に入れた. 日本語のレビュー記事は発売前の展示会情報しかなく,Discord のコミュニティで英語で「日本からだよ!」発言してみたが反応がなかったので,日本で持っている人はまだ私しかいないのではないかと想っている. ちなみにギークの心をよくわかっている公式とコミュニティなので,使用方法やカスタムの便利な使い方は公式からのメールと Discord コミュニティに入っていれば大体入手できると思う. Emacs キーバインドが使える 敢えてこれを一番に挙げたい. 少々のカスタムが必要なのだが,特に言語選択に利用しなくとも良い Global キー(地球マークのキー)を Ctrl に割り当てる設定に変更すればなんと,Ctrl+a, Ctrl+e, Ctrl+k などでおなじみ,Emacs キーバインドが使える. さらに,Ctrl+z で戻るなどと併用できるので,テキスト入力効率がすごい! BlackBerry よりすごいところ! この恩恵がわからないユーザは正直買わなくて良いと思います.フリック入力でも慣れればそれなりの速度で打てる時代,敢えてのこの PCライクな打ち方をすると...私は 20分で 1000 字は楽に打てます.ちなみに PC なら 10 分で 1000 字は打てる. Black Berry Key 2 時代も 1 万字/日とか余裕で打ってたんですが,1....