arianpg arianpg

gitalkを有効化した。 専用のpublicリポジトリを作成し、テーマの設定を見ながらコンフィグを追加した。 しかし、一部の記事でエラーが出た。 どうも記事のパスに全角があると使えないらしい。 netlify cmsはデフォルトだとタイトルをmdファイル名=パスにするため、問題がある。 cmsのconfig.ymlにslugを設定すると、これを修正できるとのこと。 下記を設定することで、記事のパスを日付とするように修正(重複する場合は自動連番がつくらしい？) slug: "{{year}}-{{month}}-{{day}}"

Netlifyでhugoのビルドが失敗していた。 元々gitの内容がぐっちゃぐちゃになってたので、整理。 ついでにテンプレートも変更してみた。

mermaidを有効にして、フローやグラフを出せるようにする。 参考リンク mermaid github Hugoにmermaidを組み込んでみた mermaidのcdn追加 headに追加 <script src="https://cdnjs.cloudflare.com/ajax/libs/mermaid/8.4.4/mermaid.min.js"></script> mermaid用のshortcode追加 themes/m10c/layouts/shortcodes/mermaid.html <div class="mermaid" align="{{ if .Get "align" }}{{ .Get "align" }}{{ else }}center{{ end }}"> {{ safeHTML .Inner }} </div> 背景調整 このテーマでそのままmermaidを出力すると線が見えなかったりするので、背景を強制的に白くする。 <style> .mermaid { background-color:#f6f8fa; } </style> 出力確認 graph LR subgraph Netlify MD(Markdown) --Hugo--> SH(Shortcode) end subgraph Client SH --mermaid.js--> FH(Flow) end graph LR subgraph Netlify MD(Markdown) --Hugo-- SH(Shortcode) end subgraph Client SH --mermaid.

hugoでシンタックスハイライトを有効にする。 参考リンク Hugo公式 Syntax Highlighting hugo 単体でシンタックスハイライト適用 config.toml 修正 pygmentsUseClasses = true pygmentsCodefences = true シンタックスハイライト用のcss生成 hugo gen chromastyles --style=monokai > site/static/css/syntax.css headタグ内にcss読み込みを追加 <link rel="stylesheet" href="/css/syntax.css">

JAMstackの記事とかみて、この辺気になったから試してみた。 参考リンク HugoとNetlify CMSでブログを構築する Hugo + gitlab + netlifyのブログにNetlify CMSを設定する方法 お名前ドットコムで取得したドメインをNetlifyで使う HugoTheme m10c NetlifyCMSのサイトからぽちぽち進めていくと、Githubのリポジトリと、Netlifyのサイト設定(ホスティングからデプロイまで)が自動で進んだ。 デフォルトだとコーヒー紹介サイトになってるので、ここをひな形に色々いじっていく。 まず、生成されたリポジトリはpublicなので、privateに変えておく。 githubのrepository -> settings -> Make this repository private 念の為、変更後はnetlify側のgit連携を再設定。 netlify site -> settings -> Itentity -> Git Gateway -> Edit settings\ 次はテーマの切り替え。 Hugoの仕組みがわかっていなかったせいで、テーマの設定に手間取った。 結局ローカルにcloneして、ローカルで色々試すことにした。 git clone https://github.com/arianpg/*****.git cd *****/site hugo server これでローカルサーバが立つので、localhost:1313を見つつ直接ファイル修正しながら、何がどう影響してるのかを探り探りチェック。 ポイントは、site/layouts を削除しないとconfig.tomlでテーマを指定してもうまく適用されない点。 あとNetlifyCMSとの連携のため、ヘッダにscriptタグの追加が必要とのこと。 今回のテーマだと、layouts/_default/baseof.html が修正対象。 これに対して入れた変更は下記の通り。 NetlifyCMS Scriptタグ追加 twitterウィジェットの配置 Portrait表示のデザイン修正 ついでに、NetlifyCMSの設定ファイル site/static/admin/config.