Pick up

Hugoブログテーマ「Salt」とは?

Hugoブログテーマ「Salt」とは?

 Saltの使い方
 2022-08-10
「Salt」はシンプルなブログを低コストで作成できる を目標にしたHugo用テーマです。名前の通り、できるだけ素材そのものを引き出せるようなシンプルなデザイン・レイアウトにしました。 実際にSaltでできることについて紹介したいと思います 1. レスポンシブデザイン対応 PCとSP表示に対応しています。 デフォルトで横幅600pxをデフォルトにしていますが、任意のサイズに変更できます。 2. サイトカラーを自分の好き
Hugoでできること

Hugoでできること

 Hugo
 2021-09-12
最近はSSG(静的サイトジェネレータ)全盛期の時代で、サーバー代をかけずにブログが作れる時代になりました。 そこで実際にHugoを使ってこのブログを作ってみた所感とHugoでできることを紹介したいと思います ちなみにHugoとGatsbyどっちの方がいいの? サイト内でリッチなグラフやテーブルを使ったり、動きのあるサイトを作りたい場合は、Gatsbyのほうが良いと思います。 というのもGatsbyの方がR

New Article

Hugoでついに外部URLのブログカードを作れるようになった【自作ショートコード】

Hugoでついに外部URLのブログカードを作れるようになった【自作ショートコード】

 Saltの使い方
 2022-05-06
Hugoでは外部サイトのデータを扱う場合、getJSONやgetCSVを使った方法しかありませんでしたが、ついにv0.91でGetRemoteが実装されました。 Release v0.91.0 · gohugoio/hugo Hugo 0.91.0 is mostly on the boring and technical side. See the list of changes below, but especially note the fix that allows passing falsy arguments to partials with the return keyword (5758c37 #... Hugo Pipes Hugo Pipes is Hugo's asset processing set of functions. GetRemoteの基本 基本の使い方はこんな感じで、html以外にも外部の画像、css、jsといったデータも取得できます。 {{ with resources.GetRemote "https://example.com" }} {{ .Content }} {{ end
Hugoでデプロイする時たまにビルドエラーになる原因

Hugoでデプロイする時たまにビルドエラーになる原因

 Hugo
 2022-01-29
GitHub Actionsを使ったHugoのデプロイ時に、たまにエラーになっていたんですが原因が分かりました。 package.json "scripts": { "create-ranking": "node scripts/create-ranking.js", "build": "hugo --gc --minify", "test": "echo \"Error: no test specified\" && exit 1" }, npm run buildしてみるとこんな感じのエラーが出て、たまにデプロイがうまくいきませんでした Start building sites … hugo v0.89.4-AB01BA6E darwin/amd64 BuildDate=2021-11-17T08:24:09Z VendorInfo=gohugoio ERROR 2022/01/29 20:21:30 render of "page" failed: execute of template failed: template: partials/sidebar.html:101:72: executing "sidebar" at <(index $thumbnail 0).Fill>: error calling Fill: image "/Users/okdyy75/hugo-theme-salt/content/article/hugo/fontawsome/thumbnail.png": this feature is not available in your current Hugo version, see https://goo.gl/YMrWcn for more information ERROR 2022/01/29 20:21:30 render of "page" failed: execute of template failed: template: partials/sidebar.html:101:72: executing "sidebar" at <(index $thumbnail 0).Fill>: error calling Fill: image "/Users/okdyy75/hugo-theme-salt/content/article/hugo/fontawsome/thumbnail.png": this feature is not available in your current Hugo version, see https://goo.gl/YMrWcn for more
Hugoで一週間のPV数順の人気記事を作る方法

Hugoで一週間のPV数順の人気記事を作る方法

 Hugo
 2022-01-12
HugoとGoogle Analyticsを使って人気記事のランキングを作る方法を紹介します ステップとしては GCPから鍵を作成し、Google Analyticsで権限を付与 Google Analytics Data APIからpv数を取得するスクリプトを作成 保存したpvデータを元にHugoからランキング作成 CIで定期的にpv取得スクリプトを起動させる 1. GCPから鍵を作成し、Google Analyticsで権限を付与 基本的にはdevelo
Hugoで年月別のアーカイブを作る方法

Hugoで年月別のアーカイブを作る方法

 Hugo
 2021-12-28
Hugoでアーカイブを作るには2種類ほど方法があります ①タグやカテゴリと同様にタクソノミーを設定する config.ymlにarchiveを追加し taxonomies: archive: archives 記事のフロントマターに年月を設定してあげれば archives: ["2021年12月"] こんな感じのデータが作成されます。この時「yyyy年mm月」の形式でないと年月でソートされないので注意です {{ .Site.Taxonomies.archives.Alphabetical.Reverse }} [ {2021年12月 [WeightedPage(0,
HugoでFontAwesomeを使う方法

HugoでFontAwesomeを使う方法

 Hugo
 2021-12-04
HugoにFontAwesomeを使う場合はHugoの機能であるモジュールを使うと簡単に実現できます! 1. npmでFontAwesomeをインストール package.jsonがない場合はnpm initしてください npm install -D @fortawesome/fontawesome-free 2. config.ymlのmoduleに使いたいjsファイルをmounts 注意点としてmountすると、デフォルトであるtargetのルートディレクトリが無視されるので明示的に追加する
Hugoに検索機能を追加しよう

Hugoに検索機能を追加しよう

 Hugo
 2021-10-15
このサイトにも実装されているんですが、Hugoにlunaを使った検索機能を実装する方法を紹介します。 基本的には公式で紹介されているgistを参考に実装します。(コメント下の方にvanilla js版を作ってくれた方がいました!感謝!) こちらのサイトも参考にさせて頂きました。 1. lunrのセットアップ npm install lunr lunr-languagesを実行してパッケージをインストールし、config.ymlに下記を追加
Hugoを使い始めた人に捧げるTips11選

Hugoを使い始めた人に捧げるTips11選

 Hugo
 2021-09-16
1. とりあえずhugo server -Dって使ってるけどこれって何? draft: trueのコンテンツファイルも含めて出力。 詳しくはhugo server --helpでチェック 2. taxonomyとtermの違い taxonomyは「タグ」や「カテゴリー」といった分類自体 termはそのタグやカテゴリーに属する「go」とか「tips」のことです こちらのサイトが非常に分かりやすいです! https://maku77.github.io/hugo/taxonomy/basic.html 3. content配下の固定ページに共通のlayoutを使
Go言語Tips② Hugoで使われるlayoutの正体

Go言語Tips② Hugoで使われるlayoutの正体

 Go言語
 2021-09-13
Hugoで使われるlayoutですが実態はgo-templateという、いわゆるテンプレートエンジンです https://pkg.go.dev/text/template テンプレート内のハイフンありなしの違い たまにHugoテンプレート内で{{ .Title }}や{{- .Title -}}で書いてるものを見かけます この違いはハイフンを付けることで前後の空白を除去したい場合に使われます ちなみに公式ドキュメントにあります https://pkg.go.dev/text/template#hdr-Text_and_spaces 配列や連想配列の空チェック Hugoを使う際、空ではない文字列or配列
Go言語Tips① 変数について

Go言語Tips① 変数について

 Go言語
 2021-09-13
変数定義 Hugoのテンプレート内で{{ $title := .Title }}や{{ $title = .Title }} のようにコロンをつけたり、付けなかったりする記述を見ます。 これはgo言語の書き方の特徴で、変数を定義する場合の省略記法です title := "タイトル" 省略しない場合はこうなります var title string = "タイトル" 変数のスコープ go言語の変数スコープはif、for、switchなどのブロック内で有効です if内などで新しく変数を定義す
サイト内ブログカードを作る自作ショートコード

サイト内ブログカードを作る自作ショートコード

 Saltの使い方
 2021-09-12
このテーマ内でサイト内ブログカードを作れる「self-blog-card」というショートコードを作成しました。 使い方 自サイト内のurlを指定します 自記事のブログカードは表示できません。 日本語だとconfig.ymlのsummaryLength: 200以上推奨です {{< self-blog-card "/article/salt/custom-figure" >}} 表示例 画像のリサイズ・トリミング可能な自作ショートコード このテーマ内で画像のリサイズ・トリミングができる「custom-figur