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のソースファイルを喪失してしまった。おかげでスタイル
静的サイトジェネレーターを 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でのテーマ制作を進めているのですが、サイト内で使われているタグとカテゴリーの一覧ページ(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 によるブログ作成と mainroad テーマのカスタマイズ | terashim.com
2023/11/29追記: このサイトはリニューアルしました。 ここで紹介した内容は現在このサイトでは使われていませんが、 過去の記事をそのまま掲載しています。 このサイトは Hugo を使って作成しました。 Hugo は Markdown などで書かれたソースファイルから静的なHTMLファイルのウェブサイトを生成するツールです。 Hugo では様々な テーマ を選択することができます。 このサイトではHugoテーマとして Mainroad を使用しています。 また、生成したサイトのホスティングには Netlify を利用しています。 この投稿では Hugo でサイトを作成する際の基本的な操作と、このサイトで行ったカスタマイズの内容を記しておきます。 Hugo サイトの作成 Hugo の基本的な使い方は公式ドキュメントの Quick Start などに書かれているのでここでは簡単に記します
AWS Route 53 から Google Domains への移行 | rakuishi.com
現在、このブログは Next.js + Firebase Hosting + AWS Route 53 を利用して運用しています。今回、利用しているウェブサービスの棚卸しとして、Route 53 から Google Domains への移行を行いました。 Google Domains へ移行した理由 最近、AWS を Route 53 以外には利用しておらず、移行できたらパスワード管理ツールに登録する項目が減らせるのが最大のモチベーションです。 また、Google Domains の管理画面が簡易に見えるのと、料金が安くなることを期待しています。 現在、AWS Route 53 での com ドメインは TLD 別の最新料金表 によれば年額 $12 となっています。これに加え、月額 $0.5 必要です。年額に直すと合計 $18 になります。 一方、Google Domains での com
個人ブログに最適なオススメの 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などは要件から外れてしまうんですよね…
Hugo で画像をリサイズしたりトリミングしたりするテンプレートを書いてみる
Drupal をはじめとする一般的な CMS であれば、アップロードした画像ファイルのサイズ調整などを自動で処理する機能が準備されています。 Hugo にも同様の機能 がありましたので、試してみました。 やりたいことは、ブログ一覧に表示されるタイトル画像を縮小すること。そして、ブログの各投稿のページは上下を切り取った画像を表示すること。この 2 点です。 しかし、思った通りに動作しません。調べながら画像ファイルのサイズ調整の仕組みを作っていたのですが、結構はまってしまったのでまとめておこうと思います。 画像ファイルは記事毎に置く 先に結論を書きます。これが出来ていないから動作しませんでした。 Hugo のサイト にも次のように書かれています : The image is a Page Resource, and the processing methods listed below doe
はてなブログからGitHub Pages+Hugoへ移行した - ゆーすけべー日記
はてなブログで運用してたブログ「ゆーすけべー日記」をGitHub Pagesへ移行した。ドメインも昔使ってたyusukebe.comにした。 静的ファイルのジェネレーターとしてHugoを使ってる。 結局、Hugoいじってる https://t.co/NAKS6k3W1M — Yusuke Wada (@yusukebe) January 15, 2020 今まで使ってた、はてなブログに大きな不満があったわけじゃなかったが、気分一新しようとしていた。ちなみに上記のツイートにあるようにMediumとnoteを試してみたが、今回のユースケースには合わなかった。 というのもコードを貼り付けたいという重要な要件に対して、 Medium Markdownに対応している なので``` と書きはじめてコードを貼り付けることができる ただWYSIWYGすぎて書いた瞬間からHTMLに変換されるのが使いにくかっ
はてなブログからHugoに移行にして1年が経った - ぷらすのブログ
こんにちは、@p1assです。 ブログをはてなブログから移行して一年経ったので、色々感想や分かったことを書いていこうと思います。 移行のモチベーション そもそもはてなブログを辞めたいと思ったきっかけは、レスポンスの遅さでした。トップページや記事を読み込むのに結構時間がかかり、う〜んと思ってました。また、デザインを好き勝手いじるのが少々難しく、もっとカスタマイズしたいなぁと思っていました。 そんな中、静的サイトジェネレータを使えば簡単にブログを生成出来ると知り、はてなブログから Hugo に移行することにしました。なぜ Hugo にしたのかはこの記事を趣旨から逸れるので省略します。 ブログのカスタマイズとか記事の書きやすさとか まず、デザインに関してはTaleというテーマにパッチを当てて使っています。パッチは HTML ファイルや CSS ファイルをlayouts/ や /assetsディレ
Hugoでレスポンシブなブログカードを作成する
//app.js // import * as express from 'express'; // import * as client from 'cheerio-httpcli'; // const app = express(); var express = require('express'); var client = require('cheerio-httpcli'); var app = express(); app.get("/getogp", (expressRequest, expressResponse, expressNext) => { const url = expressRequest.query.url; client.fetch(url, (err, $, res, body) => { if (err) { expressNext(err) retu
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
静的サイトジェネレータHugoを使ってブログを作ろう！！|静的サイトジェネレータHugoを使ってブログを作ろう！|Techpit
hugoを使った爆速ブログをカスタマイズする
GitHub - dsk52/minimage: Hugo's theme
https://cloudlance-motio.work/post/hugo-uber-blog/
hugoでつぶやきブログ作った