こんにちは、ポメラ購入後に知ったLinux化のおかげで、購入後一ヶ月近く経ってもポメラは触りまくってるのにポメラ本来の執筆活動がちっとも進んでないyukari-erbです。
下記記事の通り、ポメラLinuxからGitHubのリポジトリが問題なく操作できることを確認しました。
ポメラDM250にLinuxを入れて文章データをGitHubで管理する
ここまで来たからには、今度はGitHubリポジトリの記事データを更新するだけでブログが更新できると良いよね!
と思い、Hugo+Cloudflare Pagesを活用した個人ブログサイトの作り直しに勤しんでます
(流石にブログ構築そのものをポメラLinuxからやるのはムリ😂)
シルバーウィーク前半戦も一旦終わりに近づいたので、参考にさせていただいたサイトやカスタムでやったこと、意識したこと、TODOでやり残していることを備忘で記録しました。
参考にさせていただいたサイト
GitHub - zhaohuabing/hugo-theme-cleanwhite: A clean, elegant blog theme for hugo A clean, elegant blog theme for hugo. Contribute to zhaohuabing/hugo-theme-cleanwhite development by creating an account on GitHub. Hugoを使ったblogをGitLab CIを使ってGitLab Pagesで公開する-色々な設定の記録たち Hugo で Markdeep な記述ができるようになった レンダー・フックを使って Mermaid にも対応できる。 Submoduleで管理しているHugoのThemeが更新されているので追随させる(git一般の話)-色々な設定の記録たち Hugo プロジェクトを Cloudflare Pages へデプロイ Hugo なサイトのホスティングに Cloudflare Pages を使ってみた所感 Cloudflare PagesでHUGOのコンテンツを公開 Without haste, but without rest. ブログ移行日記(その3) - Hugoの設定と微調整(テーマに合わせた) johtaniの日記です。技術とか、他愛のないことを書き連ねていくブログです。 | johtani's blog site that includes topics, e.g. technical, life, hobby, etc. NetlifyでホストしているサイトをSearch Consoleに登録する-色々な設定の記録たち Hugoにシェアボタンを追加する-色々な設定の記録たち hugoの改行をgithub風に変更する hugoの改行をgithubと同じようにします。markdownレンダラーGoldmarkの設定をします。 Hugoのテンプレート構文「template」「partial」「block」「define」のわかりやすい解説 Hugo のオリジナルテーマ作成を勝手に応援する企画、記念すべき第 1 弾はテンプレート構文の基本となる「template」「partial」「block」「define」の違いについてです。以下のバージョンで確認しています。 Hugo Static Site Generator v0.53/extended darwin/amd64 BuildDate: unknown Hugo のテンプレート構文 Hugo にはさまざまなテンプレート構文が用意されています hugoの改行をgithub風に変更する hugoの改行をgithubと同じようにします。markdownレンダラーGoldmarkの設定をします。 Hugoで出力されるaタグをカスタマイズする - kamoqq.info Hugoでブログカードを作成する(resources.GetRemote利用) - SIS Lab 以前、 HugoでAMP対応のブログカードを作る でAPIサーバを利用したブログカードの作成方法を紹介した。このときは、getJSONを利用していた。Hugo v0.91.0でresources.GetRemoteが実装され、getJSONやgetCSV以外にもresources.GetRemoteを利用できるようになった。Release v0.91.0 · gohugoio/hugo resources.GetRemoteを利用したブログカードの作り方のメモ。目次 resources.GetRemoteを利用したブログカードの作り方 markdownファイル 参考 Hugoでビルド時にデータ処理した話 -カード型リンク編- | BLOG - DeNA Engineering こちらはDeNA 21新卒×22新卒内定者 Advent Calendar 2021の12日目の記事です。 はじめに こんにちは。22新卒の佐久間です。現在DeNAではCTO室で内定者インターンをさせていただいており、本サイトの作成をお手伝いさせていただいています。 本稿ではポータルサイト作成に使用したフレームワークである Hugo について書いていこうと思います。なお、ポータルサイトへのHugo … ブログカード作成ブックマークレットをアップデートしました FC2ブログのみならず汎くお使い頂いているようで甲斐があったなぁ、と思っております ブログカード なんですが、アップデート、というか少しhtml内容を変更しました。...
error calling resources.GetRemote: Get "/imgs/avatar.jpg": unsupported protocol scheme ""
カスタマイズした点
- mermaid記法に対応
- 昔はshortcodeでしかできなかったが、現在はアップデートによりmarkupで対応可能なのでその方式に変更
- mermaid,jsスクリプトはsingle.htmlテンプレートで読み込み
- 昔はshortcodeでしかできなかったが、現在はアップデートによりmarkupで対応可能なのでその方式に変更
- フォント設定を日本語向けに変更
- CSS・ヘッダ画像等変更
- googleAnalyticsをv4対応に変更
- テーマのfooter.htmlを自分のlayouts/partials/footer.htmlにコピー
{{ template "_internal/google_analytics_async.html" . }}
を{{ template "_internal/google_analytics.html" . }}
に差し替え- config.tomlの
googleAnalytics
にv4のG-hogehoge
形式IDを指定 - 参考
TODO
- About meページを作る
- オリジナルテーマの不具合と判明したため、 修正PR 投げた
- zennへのリンク貼り付け
- 本当はアイコンで出来ればよかったけど、CSS力なさすぎて力尽きた
- 記事シェアボタン作成
- 記事シェア時のOGP出力
- favicon追加
- Markdownリンクの別Windows & ブログカード対応
- トップページのOGP設定
- ブログカードのデザイン改良
- 写真変更
- OGP
- サイトヘッダ
- 記事ごとのOGP画像作成
サイトのOGP画像を自動生成する
tcardgenでHugoで作ったブログのOGPを自動生成してみた
Cloudinaryで動的にOGP画像を生成する方法
HUGOのOGP画像を自動生成する方法を解説
HUGO製のサイトで使うOGP画像の作り方をまとめました。
HUGO v0.90.0 で追加された images.Text でブログカードと OGP 画像を自動生成する | ひよこまめ