Hugoでできること | Hugoブログテーマ「Salt」
最近はSSG（静的サイトジェネレータ）全盛期の時代で、サーバー代をかけずにブログが作れる時代になりました。 そこで実際にHugoを使ってこのブログを作ってみた所感とHugoでできることを紹介したいと思います ちなみにHugoとGatsbyどっちの方がいいの？サイト内でリッチなグラフやテーブルを使ったり、動きのあるサイトを作りたい場合は、Gatsbyのほうが良いと思います。 というのもGatsbyの方がReactベースで作られているので、jsとの相性が非常に良く、Reactのライブラリをそのまま使えます。 逆にHugoとjsの親和性は低いので、素のHTMLに対してjsやjQueryで操作・加工する事になり、時代を逆行する事になります。（SPAを導入することもできますが、それなら最初からGatsby使う方が、、、） さらにこれもHugoのデメリットなんですが、検索機能をつける際もゴリゴリなdo
シンプルなHugoブログテーマ「Salt」をつくりました
「Salt」はシンプルなブログを低コストで作成できる。 を目標にしたHugo用テーマです。名前の通り、できるだけ素材そのものを引き出せるようなシンプルなデザイン・レイアウトにしました。
Hugoブログテーマ「Salt」とは？ | Hugoブログテーマ「Salt」
「Salt」はシンプルなブログを低コストで作成できる を目標にしたHugo用テーマです。名前の通り、できるだけ素材そのものを引き出せるようなシンプルなデザイン・レイアウトにしました。 実際にSaltでできることについて紹介したいと思います 1. レスポンシブデザイン対応PCとSP表示に対応しています。 デフォルトで横幅600pxをデフォルトにしていますが、任意のサイズに変更できます。 2. サイトカラーを自分の好きなように変更可能ヘッダー・フッダー・コンテンツの背景色、記事カードの細かいスタイルも簡単に変更できます 3. 各SNSのブログカードを簡単表示Hugo標準のショートコードを使用することで、TwitterやYouTubeといったブログカードを簡単に表示できます Hugoで用意されているショートコード使用時の表示サンプルです figure スイカの画像 gist highlight
Hugoブログテーマ「Salt」
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
Hugoのテーマを作ってテーマのギャラリーで公開されました | PengNote
Hugoでテーマを作ったのですが、申請して公開までいけました。 実際に作ったテーマ Hugo Gentoo Themeという名前でテーマを作りました。 d-kusk/hugo-gentoo-theme: Hugo theme こういうの何をテーマに作ろうか毎度悩むんですが、会社マシンのデスクトップの壁紙がジェンツーペンギンに変わったので、Gentooという名前にしました。前後のHugoとThemeはたまたま見かけたのでつけたんですが、別に要らないみたいですね…。 配色の感じも写真から色取って、ヘッダーを頭に、コンテンツ部分を体にしたんですがジェンツーらしさが全くないというか出せなかったです。 CSSフレームワークのBlumaを採用 楽してサクッとやりたいと思ったのでBlumaというフレームワークを入れてみました。 ぶっちゃけ要らなかったです。元気あればそのうち抜くかもしれない。 Bluma
Hugoでサイト全体で使われているタグやカテゴリーの一覧のページを作る | PengNote
Hugoでのテーマ制作を進めているのですが、サイト内で使われているタグとカテゴリーの一覧ページ(WordPressのウィジェットであるタグクラウドとかカテゴリー一覧みたいなイメージ)を出力する方法がイマイチ分からず、困っていましたがようやく解決したので覚書です。 バージョン Hugo v0.26 必要なこと config.tomlで設定 (テンプレートの用意) config.tomlへの記述 タグやカテゴリーといった分類を使う場合、config.tomlに以下を記述します。 [taxonomies] tag = "tags" category = "categories" 参考: Hugo | Taxonomies テンプレート(layout/terms.html)を用意する 基本的には、 list.html が出力されると思って問題ないと思います。 ただ、今回は一覧の出し方(レイアウト)
PengNote | 勉強した事や行った場所の感想を書くブログ
EMになる前となった後の話なるべくユーザー依存を減らしてGoogle App ScriptからGitHubAPIを利用するAWS CDKに入門し、AWS費用をSlack通知する処理を書き直したNode.jsのDockerイメージを使ってマルチステージビルドをやってみたFastifyで既存のOpen APIファイルを読み込んでSwagger UIで表示できるようにするOASの内容を元に、Orvalで型やクライアントを生成するNext SEOでmetaタグとJSON-LDの生成を置き換えたexpress+OpenAPIで開発を始める際にいくつか試してみたことモノレポ構成のNext.jsプロジェクトを作成し、VercelにデプロイするNodejsプロジェクトで使用しているGithub Actionsのjobを並列実行するように組み替えて実行時間を短縮したReactで指定位置までのスクロールやスク
Hugoのテーマをgitのsubmoduleで管理し始めた | PengNote
はじめに このブログはHugoで生成しているのですが、テーマはブログのリポジトリと別で管理しています。 これまでは、ブログのリポジトリの theme/ ディレクトリにzipとかで落としてきて展開していました。 ですが、テーマのアップデート時に再度その作業を行うのは面倒だなと思い調べていた所、gitのsubmodule機能を使うことで、テーマのリポジトリをブログのリポジトリに取り込むことが出来る。つまり該当のテーマの所へ行けばgit pullできる。 git submodule は、外部の git リポジトリを、自分の git リポジトリのサブディレクトリとして登録し、特定の commit を参照する仕組みです。 Git submodule の基礎 - Qiita Hugoの公式でもやってるテーマの管理方法ですね submoduleで取り込む とりあえず、今の状態はこんな感じ。 . ├──
Hugo によるブログ作成と mainroad テーマのカスタマイズ | terashim.com
2023/11/29追記: このサイトはリニューアルしました。 ここで紹介した内容は現在このサイトでは使われていませんが、 過去の記事をそのまま掲載しています。 このサイトは Hugo を使って作成しました。 Hugo は Markdown などで書かれたソースファイルから静的なHTMLファイルのウェブサイトを生成するツールです。 Hugo では様々な テーマ を選択することができます。 このサイトではHugoテーマとして Mainroad を使用しています。 また、生成したサイトのホスティングには Netlify を利用しています。 この投稿では Hugo でサイトを作成する際の基本的な操作と、このサイトで行ったカスタマイズの内容を記しておきます。 Hugo サイトの作成 Hugo の基本的な使い方は公式ドキュメントの Quick Start などに書かれているのでここでは簡単に記します
個人ブログに最適なオススメの Hugo テーマ｜Abstract Archives
1. はじめに Go 言語で実装されている静的ジェネレーターである Hugo は，ユーザーが自作したテーマを投稿することができる Hugo Themes が公式より提供されています。しかし，Hugo Themes にはレビュー機能やランキング機能が実装されていないので，自分に合ったテーマを探すのは時間がかかります。本記事では，筆者が独断と偏見で個人ブログに最適な Hugo テーマを選び，概要を記述します。 2. Ananke Gohugo Theme Ananke Gohugo Theme は，シングルカラムレイアウトのテーマです。公式のクイックスタートガイドで採用されているベーシックな Hugo テーマでもあります。表面上は，シンプルな構成になっていますが，ブログに必要な機能は一通り実装されているので，初心者でも簡単にブログサイトを構築することができると思います。 3. Github S
【NeoVim】プラグインを導入してモダンなNeovimにする｜Histone
の（Option 8）の方法を取るのが一番簡単。以下のコマンドをTerminalにコピペして実行するだけ。 mkdir -p ~/.local/share/fonts cd ~/.local/share/fonts && curl -fLo "Droid Sans Mono for Powerline Nerd Font Complete.otf" https://github.com/ryanoasis/nerd-fonts/raw/master/patched-fonts/DroidSansMono/complete/Droid%20Sans%20Mono%20Nerd%20Font%20Complete.otfこれで「Droid Sans Mono Nerd 」フォントがインストール完了。 （ステップ２） 次に、「~/.config/nvim/init.vim」のプラグインの設定部分
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - okdyy75/hugo-theme-salt: シンプルなHugo用ブログテーマ「Salt」
Zen
Hugo Themes Site
PaperMod
GitHub - gohugoio/hugoThemes: A curated directory of Hugo themes
Minimage
GitHub - dsk52/minimage: Hugo's theme
PaperMod
https://nasust.com/hugo/0ffa01cb-1a71-4eab-9ad0-a398c006ae63/
