音楽ブログ を数年書いているのですが、安いWindows11環境で、以下のような技術スタックで書いています。 前回 の続編です。
要点 秘密鍵/公開鍵は難しいけど、頑張って！ netlify.toml がハマりどころ 環境 Rancher Desktop で Docker/仮想環境を作る Visual Studio Code (所謂)“VSCode” を使って Markdown で書く Bitbucket にコミット/プッシュ Netlify で公開 これ、一回慣れてしまうと簡単なんですけど、それまでが四苦八苦だったので、備忘録代わりに書いておきます。
VSCode をインストール Git for Windows も、事前にインストールしておきましょう 拡張機能 日本語拡張 と Dev Containers は必須でしょうね。 Rancher Desktop/WSL2 をインストール Rancher Desktop をインストールする際、最近はWSL2/Ubuntuが自動で入るみたいですね Bitbucketで、とりあえずリポジトリを作ってCloneする プライベートリボジトリで作るのが良いでしょう ローカルにクローンします。 これがプロジェクトになります。 公開/秘密の鍵ペアを作り、Bitbucketに公開鍵を登録する WSL2の中身はUbuntuなので、ターミナルから、Ubuntuを選び、以下で鍵ペアが作れるのではないでしょうか ユーザー名はC:Users配下の、自分のディレクトリを参照して下さい bitbucketに公開鍵を登録するのは、公式手順に従うのが良いでしょう Windows で個人用 SSH キーをセットアップする | Bitbucket Cloud | アトラシアン サポート sudo ssh-keygen ls -la /root/.ssh/ # 公開鍵を表示 sudo cat /root/.
このブログは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
