Hugoでできること | Hugoブログテーマ「Salt」
最近はSSG（静的サイトジェネレータ）全盛期の時代で、サーバー代をかけずにブログが作れる時代になりました。 そこで実際にHugoを使ってこのブログを作ってみた所感とHugoでできることを紹介したいと思います ちなみにHugoとGatsbyどっちの方がいいの？サイト内でリッチなグラフやテーブルを使ったり、動きのあるサイトを作りたい場合は、Gatsbyのほうが良いと思います。 というのもGatsbyの方がReactベースで作られているので、jsとの相性が非常に良く、Reactのライブラリをそのまま使えます。 逆にHugoとjsの親和性は低いので、素のHTMLに対してjsやjQueryで操作・加工する事になり、時代を逆行する事になります。（SPAを導入することもできますが、それなら最初からGatsby使う方が、、、） さらにこれもHugoのデメリットなんですが、検索機能をつける際もゴリゴリなdo
ブログをWordPressからHugoに移行した
前々からブログをWordPressで運用するのをやめたいと思っていた。 すったもんだのすでにようやくHugoで運用するようにできたので、経緯やら苦労したところなどを書き残しておきたい。 まだ作業途中ではあるのだが、いい加減記事の更新もしたいので書いておく。 以前のブログはWordPressで運用していた。 自分でテーマをいじったり、関連記事の表示に自分でクエリをカスタマイズしてごにょごにょしたりして、ある程度カスタマイズして使っていた。 だが、それも途中からだんだんと面倒くさくなっていた。 理由としては、ローカルでいじる際にいちいちvagrantでWordPress環境を立ち上げてカスタマイズしなければならなかったからだ。 カスタマイズしたらカスタマイズ下で、wordmoveを使ってテーマを更新したりが必要になる。 あげく、途中でSassのソースファイルを喪失してしまった。おかげでスタイル
静的サイトジェネレーターを比較して再びHugoにした理由（2021年版）
この記事は最終更新日から一定の時間が経過しています。情報が古くなっている可能性があるため注意してください。 2年前に静的サイトジェネレータ（SSG）を比較しました。やはり動的プログラム（代表例 WordPress）のようにセキュリティリスクとイタチごっこになる仕組みと違って、純粋なHTMLページでしかないSSGは運用面の負担が少なくていいなと身にしみて感じます。 静的サイトジェネレーターの比較とHugoに決めた理由（2019年版） | Web勉強ノートブック 以前結論を出した通り静的サイトジェネレーター Hugo で全く問題なかったのですが、サイトのレイアウトを変更しようと思ったこのタイミングで他の技術にも触れておこうと思い最近の動向（2021年10月時点）をチェックしましたので、改めてアップデートしたいと思います。 なお、静的サイトジェネレーター全体の動向比較というよりも、特定の条件に絞
静的サイトジェネレーターを Next.js から Astro に乗り換えた 🧑🚀 | rakuishi.com
2011 年当初 WordPress で書き始めたこのブログは、途中からは Hugo による静的サイトに置き換わり、その次は Next.js, そしてこの記事からは Astro を採用しています。 新しいものを勉強することが移行の一番のモチベーションでしたが、結果として Next.js に感じていた不満を解消することが出来ました。 Next.js の不満点としては、静的サイト出力はあくまで機能の一部であり（個人的感想です）、ブログ用途にしては機能過多感がありました。また、サイトマップやフィードの静的出力に難があり、未だに適切な書き方が分からず敗北感が拭えませんでした。追い打ちとなったのは、先日 8 万字弱の記事を公開したかったのですが、これが差分更新のパフォーマンス劣化を及ぼすとして公開できず… 😢 そんな折、静的サイト出力（SSG）とサーバーサイドレンダリング（SSR）をサポートしてい
hugoを使って爆速でブログを作成する
hugoとは？ hugo(ヒューゴ）とは、goで作られたwebサイトを作成するフレームワークです。 公式サイトのトップページで「ウェブサイトを構築するための世界最速のフレームワーク」書いてあるように速さを売りにした静的サイトジェネレーターのようです。 公式ページ 使用できるテーマも数多く揃えられており、柔軟性もあるとのことだったので今回はhugoを使って実際にブログを作成してみました。 先に触ってみた感想なのですが、下記画像のように本当に多くのテーマが用意されており選ぶだけで楽しかったです。また、テーマのカスタマイズも簡単に行なえ自分好みにできるので結構体験良かったです。 テーマ一覧 もととなるテーマも豊富にあり、結構簡単にカスタマイズもできるので、企業サイトやショップサイト、LPやオウンドメディアとか作るのもいいかもしれないですね。 blogの作成 今回はhugoで静的サイトを作り、ロリ
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 が出力されると思って問題ないと思います。 ただ、今回は一覧の出し方(レイアウト)
Hugoで作成したサイトをNetlifyで公開する | PengNote
はじめに 前回、WordPressからHugoに移行した話を書きました。 Hugoで静的なファイルを生成するので、折角ならサーバー代を抑えつつHTTPSに対応するか、勉強がてらS3に載せたいよなーと思っていました。そんな中少し前に参加したフロントエンドエンジニアに伝えたいインフラの話 でNetlifyの話を聞いて、興味をもったので移行先にしちゃいました。 Netlifyとは 公開したサイトはCDN経由で配信される SSL対応が簡単にできる 独自ドメインをあてられる PHPやRubyなどの言語は動かないっぽい CIツール(新規サイトの作成やデプロイなど色々可)もある などなど 以下、手順です。 アカウント作成 サインアップからアカウントを作成します。 Github, GitLab, Bitbucketの3サービスから選ぶことが出来ますが、Netlifyで公開したいプログラムをリポジトリ Hu
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
hugoを使ってこのブログを生成し直してみた
この所更新とかあまりしてませんでしたが、最近はちまちまとhugoという静的サイトジェネレーターを使ってこのgithub.ioを書き直したりしました。 表ページとか体裁が良くなったかなと思います。 実は今までサイトジェネレーターなるものは使ったことがなくて、一応はCSSもHTMLも理解は出来るので手でタグを打って記事を更新しておりました。 しかしながらちょっと何か書こうと思うとやっぱり途端にめんどくさくなって「もうええかな…」みたいになるという大きな欠点がありました。 記事だけなら良いんですがMainページやら分類ページも自分で編集しないといけないですしね… で、タグをあまり打たなくて更新できるといえば、真っ先に思い浮かぶのがWordpress等の動的なジェネレーターなわけですが、Githubのページだと当然ながらサーバが動かせないのでWordpressなどは要件から外れてしまうんですよね…
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
静的サイトジェネレータHugoを使ってブログを作ろう！！|静的サイトジェネレータHugoを使ってブログを作ろう！|Techpit
GitHub - modiimedia/contentful-hugo: A CLI tool that pulls data from Contentful and turns it into markdown files for Hugo and other static site generators. It also includes an express server that can be used for local development and content previews
hugoを使った爆速ブログをカスタマイズする
Zen
Hugo Themes Site
GitHub - dsk52/minimage: Hugo's theme
https://cloudlance-motio.work/post/hugo-uber-blog/
