このブログはHugoで構築しているんです。
Hugo の良いところは、「テンプレートと描写エンジンが別れている」でしょうか。 でも、それはタテマエ。 テンプレートが、かなりエンジンに依存しているんですね。 作ってメンテされていないHugoのテンプレートは死屍累々、GitHubは、もう恐竜の墓場以下の存在です。
結局、数年毎に、テンプレートを置き換えて、都度都度のデザインの良いものにする。 これがベストプラクティスなのかもしれません。
今回、使ったのはGeekblog まぁまぁ、設定も素直ですし良いのではないでしょうか？
Favicon覚え書き。
ジェネレーターで基本を作る Favicon Generator - Text to Favicon - favicon.io フォント Kaisei Tokumin - Google Fonts Font Color #FFFFFF Background Color #209CEE ダウンロードしたzipファイルを解凍 themes/hugo-geekblog/static/favicon に favicon.ico favicon-16x16.png favicon-32x32.png をコピー themes/hugo-geekblog/layouts/partials/head/favicons.htmlを修正 <link rel="icon" type="image/x-icon" href="{{ "favicon/favicon.ico" | relURL }}" />
全くWindows、PowerShell、仮想環境、Pythonも知らない人に、実行環境構築するために教えた時のメモです。
カーネルアップデート実行 PowerShellのコマンドプロンプトで、以下を実行します。1
Invoke-WebRequest -Uri "https://wslstorestorage.blob.core.windows.net/wslblob/wsl_update_x64.msi" -OutFile "wsl_update_x64.msi" ./wsl_update_x64.msi WSL/Ubuntuインストール PowerShellのコマンドプロンプトで、以下を実行します。2
wsl --install -d Ubuntu wsl --set-default Ubuntu Ubuntuに入る PowerShellのコマンドプロンプトで、以下を実行します。
wsl Ubuntuのコマンドプロンプトに入れたと思うので、以下を実行して、Python3が有効か確認します。
python3 --version pip3のインストール Ubuntuのコマンドプロンプトで以下を実行します。
apt -y update && apt -y install python3-pip 以下を実行して、pip3が有効か確認します。
pip --version 英語のウィンドウが出ますが、’next’をクリックして、‘finish’まで行けば大丈夫です。 ↩︎
“Retype new password:“と言うウィンドウが出ますが、それは、そのまま閉じて下さい。 ↩︎
bitter*smooth と言う音楽レビューサイトを作っています。
この環境、サーバーサイドはNetlify/Hugo、ローカルではVSCodeでMarkdownを書く、と言う環境で構築しているのですが、あれ？そもそもVSCodeを使うなら、WSL2/DockerDesktop/Remote-Containersでローカル確認もすれば良いんじゃない？と思って、やったらサクッと出来ました！
Windows Terminalインストール
WSL2インストール
Windows Terminal を管理者権限で起動 wsl --install wsl --set-default-version 2 wsl --install -d Ubuntu VSCodeインストール
Windows に Docker Desktop をインストール
まぁ、ここら辺までは、Windows10で開発している人ならフツーに出来るんでないでしょうか？
で、プロジェクトのトップで、 .devcontainer ディレクトリを作り、その配下に、 Dockerfile devcontainer.json の2つのファイルを作ります。
.devcontainer/Dockerfile 1 FROM klakegg/hugo:0.88.0-alpine RUN apk update && apk --no-cache add git .devcontainer/devcontainer.json 2 { "name": "bittersmooth", "build": { "dockerfile": "Dockerfile", }, "extensions": [ "mhutchie.git-graph" ] } Visual Studio Code を使用して Docker コンテナーを開発環境として使用する - Learn | Microsoft Docs 簡単に Hugo の環境が手に入るのですが、コレひとつだけ落とし穴があって、 hugo server -w でライブローディングが効かないんですね。 まぁ、VSCodeだとMarkdownのプレビューも簡単ですし、最終確認だけ hugo server -w で確認すれば良いのかな？と言う感じでやっています。
ImgBB — フリーなスマイリー / アニメエモコン たまにスクショとかを貼りたい時があって。 図解とか細かい記事だと、 Qiita や Zenn の方が良いんでしょうけど、ここは個人の日記サイトだしね…。
という事で、適当にググって、適当にアップロードして、上記サイトを試してみることにしました。 1
まぁ、削除されても、そんなに重要な画像でもないし…。 ↩︎
一瞬、LivedoorBlogで作った時期もあるんですけど、やっぱり技術ブログなので…。
Markdownで書きたい シンタックスハイライトが欲しい ブログパーツとかいらない やはり、上記3条件は必須ですかねぇ。
毎度忘れてしまうので、hugoの操作メモ
新規記事作成
hugo new posts/article.md ローカルサーバーで確認
hugo server 記事書き出し
hugo -D 以下、参考にした記事
Hugo + GitHub Pages + 無料で洒落たブログを30分で作る - Qiita 【2018年版】Hugoとgithub pagesでブログ作る方法【Circle CIも回します】 - Qiita Hugoのテーマ「Theer」を作成しました – qqhann すっきり見やすいHugoテーマ。 ありがたく使ってます
はてなグループの終了日を2020年1月31日(金)に決定しました - はてなグループ日記 - 機能変更、お知らせなど …ということなので、技術ブログも、お引越しです。
旧ブログは、こちら。
ひとり開発日記。 - プログラマの秘密のあれこれ web.archive.org このブログの連絡先は、こちら。
halflite.net
