最近はSSG（静的サイトジェネレータ）全盛期の時代で、サーバー代をかけずにブログが作れる時代になりました。 そこで実際にHugoを使ってこのブログを作ってみた所感とHugoでできることを紹介したいと思います ちなみにHugoとGatsbyどっちの方がいいの？サイト内でリッチなグラフやテーブルを使ったり、動きのあるサイトを作りたい場合は、Gatsbyのほうが良いと思います。 というのもGatsbyの方がReactベースで作られているので、jsとの相性が非常に良く、Reactのライブラリをそのまま使えます。 逆にHugoとjsの親和性は低いので、素のHTMLに対してjsやjQueryで操作・加工する事になり、時代を逆行する事になります。（SPAを導入することもできますが、それなら最初からGatsby使う方が、、、） さらにこれもHugoのデメリットなんですが、検索機能をつける際もゴリゴリなdo
前々からブログをWordPressで運用するのをやめたいと思っていた。 すったもんだのすでにようやくHugoで運用するようにできたので、経緯やら苦労したところなどを書き残しておきたい。 まだ作業途中ではあるのだが、いい加減記事の更新もしたいので書いておく。 以前のブログはWordPressで運用していた。 自分でテーマをいじったり、関連記事の表示に自分でクエリをカスタマイズしてごにょごにょしたりして、ある程度カスタマイズして使っていた。 だが、それも途中からだんだんと面倒くさくなっていた。 理由としては、ローカルでいじる際にいちいちvagrantでWordPress環境を立ち上げてカスタマイズしなければならなかったからだ。 カスタマイズしたらカスタマイズ下で、wordmoveを使ってテーマを更新したりが必要になる。 あげく、途中でSassのソースファイルを喪失してしまった。おかげでスタイル
この記事は最終更新日から一定の時間が経過しています。情報が古くなっている可能性があるため注意してください。 2年前に静的サイトジェネレータ（SSG）を比較しました。やはり動的プログラム（代表例 WordPress）のようにセキュリティリスクとイタチごっこになる仕組みと違って、純粋なHTMLページでしかないSSGは運用面の負担が少なくていいなと身にしみて感じます。 静的サイトジェネレーターの比較とHugoに決めた理由（2019年版） | Web勉強ノートブック 以前結論を出した通り静的サイトジェネレーター Hugo で全く問題なかったのですが、サイトのレイアウトを変更しようと思ったこのタイミングで他の技術にも触れておこうと思い最近の動向（2021年10月時点）をチェックしましたので、改めてアップデートしたいと思います。 なお、静的サイトジェネレーター全体の動向比較というよりも、特定の条件に絞
「Salt」はシンプルなブログを低コストで作成できる。 を目標にしたHugo用テーマです。名前の通り、できるだけ素材そのものを引き出せるようなシンプルなデザイン・レイアウトにしました。
「Salt」はシンプルなブログを低コストで作成できる を目標にしたHugo用テーマです。名前の通り、できるだけ素材そのものを引き出せるようなシンプルなデザイン・レイアウトにしました。 実際にSaltでできることについて紹介したいと思います 1. レスポンシブデザイン対応PCとSP表示に対応しています。 デフォルトで横幅600pxをデフォルトにしていますが、任意のサイズに変更できます。 2. サイトカラーを自分の好きなように変更可能ヘッダー・フッダー・コンテンツの背景色、記事カードの細かいスタイルも簡単に変更できます 3. 各SNSのブログカードを簡単表示Hugo標準のショートコードを使用することで、TwitterやYouTubeといったブログカードを簡単に表示できます Hugoで用意されているショートコード使用時の表示サンプルです figure スイカの画像 gist highlight
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
2011 年当初 WordPress で書き始めたこのブログは、途中からは Hugo による静的サイトに置き換わり、その次は Next.js, そしてこの記事からは Astro を採用しています。 新しいものを勉強することが移行の一番のモチベーションでしたが、結果として Next.js に感じていた不満を解消することが出来ました。 Next.js の不満点としては、静的サイト出力はあくまで機能の一部であり（個人的感想です）、ブログ用途にしては機能過多感がありました。また、サイトマップやフィードの静的出力に難があり、未だに適切な書き方が分からず敗北感が拭えませんでした。追い打ちとなったのは、先日 8 万字弱の記事を公開したかったのですが、これが差分更新のパフォーマンス劣化を及ぼすとして公開できず… 😢 そんな折、静的サイト出力（SSG）とサーバーサイドレンダリング（SSR）をサポートしてい
hugoとは？ hugo(ヒューゴ）とは、goで作られたwebサイトを作成するフレームワークです。 公式サイトのトップページで「ウェブサイトを構築するための世界最速のフレームワーク」書いてあるように速さを売りにした静的サイトジェネレーターのようです。 公式ページ 使用できるテーマも数多く揃えられており、柔軟性もあるとのことだったので今回はhugoを使って実際にブログを作成してみました。 先に触ってみた感想なのですが、下記画像のように本当に多くのテーマが用意されており選ぶだけで楽しかったです。また、テーマのカスタマイズも簡単に行なえ自分好みにできるので結構体験良かったです。 テーマ一覧 もととなるテーマも豊富にあり、結構簡単にカスタマイズもできるので、企業サイトやショップサイト、LPやオウンドメディアとか作るのもいいかもしれないですね。 blogの作成 今回はhugoで静的サイトを作り、ロリ
Hugoでテーマを作ったのですが、申請して公開までいけました。 実際に作ったテーマ Hugo Gentoo Themeという名前でテーマを作りました。 d-kusk/hugo-gentoo-theme: Hugo theme こういうの何をテーマに作ろうか毎度悩むんですが、会社マシンのデスクトップの壁紙がジェンツーペンギンに変わったので、Gentooという名前にしました。前後のHugoとThemeはたまたま見かけたのでつけたんですが、別に要らないみたいですね…。 配色の感じも写真から色取って、ヘッダーを頭に、コンテンツ部分を体にしたんですがジェンツーらしさが全くないというか出せなかったです。 CSSフレームワークのBlumaを採用 楽してサクッとやりたいと思ったのでBlumaというフレームワークを入れてみました。 ぶっちゃけ要らなかったです。元気あればそのうち抜くかもしれない。 Bluma
Hugoでのテーマ制作を進めているのですが、サイト内で使われているタグとカテゴリーの一覧ページ(WordPressのウィジェットであるタグクラウドとかカテゴリー一覧みたいなイメージ)を出力する方法がイマイチ分からず、困っていましたがようやく解決したので覚書です。 バージョン Hugo v0.26 必要なこと config.tomlで設定 (テンプレートの用意) config.tomlへの記述 タグやカテゴリーといった分類を使う場合、config.tomlに以下を記述します。 [taxonomies] tag = "tags" category = "categories" 参考: Hugo | Taxonomies テンプレート(layout/terms.html)を用意する 基本的には、 list.html が出力されると思って問題ないと思います。 ただ、今回は一覧の出し方(レイアウト)
はじめに 前回、WordPressからHugoに移行した話を書きました。 Hugoで静的なファイルを生成するので、折角ならサーバー代を抑えつつHTTPSに対応するか、勉強がてらS3に載せたいよなーと思っていました。そんな中少し前に参加したフロントエンドエンジニアに伝えたいインフラの話 でNetlifyの話を聞いて、興味をもったので移行先にしちゃいました。 Netlifyとは 公開したサイトはCDN経由で配信される SSL対応が簡単にできる 独自ドメインをあてられる PHPやRubyなどの言語は動かないっぽい CIツール(新規サイトの作成やデプロイなど色々可)もある などなど 以下、手順です。 アカウント作成 サインアップからアカウントを作成します。 Github, GitLab, Bitbucketの3サービスから選ぶことが出来ますが、Netlifyで公開したいプログラムをリポジトリ Hu
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く