hugo で画像を最適化して出力する | tbsmcd
ブログを軽くしたい林田ドットオンラインというまあまあ狂ったブログがあり、これはペパボの同僚の手になるものだけど、とにかく異常に軽い。WordPress でこれだけ軽いのだから、 hugo ならもっと軽くなるはず。なのでこのブログも軽量路線で行こうという話。 なにはともあれ画像がデカい大きければ転送に時間がかかる。これは古代エジプトの時代から不変の原理であり、当時は巨石を丸太のコロを使っただとか、ソリを使っただとか、いずれにせよ重いものを運ぶのには力か工夫が必要である。幸い2020年代を生きている我々は、巨石を運ぶ古代エジプト労働者やイースター島モアイ建造従事者とは違い、ファイルを圧縮したり画像自体の表示領域を小さくすることが許されている。逆に労働の合間にビールを飲むことは許されてはいないが、ここは素直に軽くする方向で行きたい。 hugo における画像リサイズ参照 Image Process
hugoを使った爆速ブログをカスタマイズする
前回の振り返り 前回は下記記事で、hugoを使いブログを作成しgithub actionsを使用した自動デプロイを設定しました。 今回はその続編で、投稿をリッチにするshort codeの紹介、投稿に画像を入れる方法、ページテンプレートのカスタマイズをやっていきます。 環境 項目
今回は Hugo に関する小ネタをいくつかお送りする。 Hugo v0.60 から markdown パーサの既定が yuin/goldmark になった。 Hugo v0.60 から既定の Markdown パーサが Goldmark になったようだ yuin/goldmark はきちんと CommonMark に準拠していて，そこには好感が持てるのだが，見方を変えるとあまり融通の効かないパーサであるとも言える。 たとえば russross/blackfriday では設定で target="_blank" や rel="nofollow" といった属性値を <a> 要素に付与できたが， yuin/goldmark にはこれに対応するオプションがない。 Markdown Render Hooks そこで Hugo v0.62 で “Markdown Render Hooks” という仕組
【HUGO】マークダウンの中にHTMLコードを書いて表示する方法
マークダウンにHTMLコードを書きます（結論） 以上です。 いきなり結論ですが、マークダウンの中にHTMLタグをそのまま書けばOKでした。 HUGOは、マークダウンの中に書いたHTMLコードをそのまま出力してくれました。 ※ 『HUGO v0.60.0』以降は、goldmarkの設定(config.toml)で『unsafe: true』を設定すると、従来通りマークダウン中のHTMLが出せました。 (gohugo.io) Goldmark unsafe: true (config.yaml, toml, json) マークダウンファイル(.md) の中に書くHTMLコードは、Raw HTML とか Inline HTML と呼ばれていました。 検索で『markdown raw html』とか『markdown inline html』で検索したら、『マークダウンはインラインHTMLをサポー
公開日: 2020.12.14 中小規模サイトやブログなどで注目を集めている「静的サイトジェネレータ」を共有レンタルサーバーで使う方法をまとめました。 編集ノート: SERVERSUSでは、パートナーリンクからコミッションを得ています。コミッションが記事の意見や、サービスの評価に影響を与えることはありません。 主に3つの方法があるPHP製の静的サイトジェネレータを使う静的サイトジェネレータというと、Node.jsのGatsby.js、Hexo、Ga言語のHUGOあたりが有名ですが、どれも共有レンタルサーバーでは言語が対応していません。 しかし、実はPHPで動く静的サイトジェネレータもいくつかあります。 Sculpin Jigsaw これらを使えば、共有レンタルサーバーでも静的サイトジェネレータを使うことが可能です。ただし、サイトのビルドはコマンドラインから実行するので、SSHが利用可能な共
ブログをWordPressからHugoに移行した
前々からブログをWordPressで運用するのをやめたいと思っていた。 すったもんだのすでにようやくHugoで運用するようにできたので、経緯やら苦労したところなどを書き残しておきたい。 まだ作業途中ではあるのだが、いい加減記事の更新もしたいので書いておく。 以前のブログはWordPressで運用していた。 自分でテーマをいじったり、関連記事の表示に自分でクエリをカスタマイズしてごにょごにょしたりして、ある程度カスタマイズして使っていた。 だが、それも途中からだんだんと面倒くさくなっていた。 理由としては、ローカルでいじる際にいちいちvagrantでWordPress環境を立ち上げてカスタマイズしなければならなかったからだ。 カスタマイズしたらカスタマイズ下で、wordmoveを使ってテーマを更新したりが必要になる。 あげく、途中でSassのソースファイルを喪失してしまった。おかげでスタイル
Hugo や Hugo extended が動作する Docker image の作成方法について知見をまとめます。 Hugo の Docker image 現在 Hugo 公式 (gohugoio) が提供する Docker image はありません。 Docker Hub に gohugoio のアカウントがありますが、あれは GoHugoIO が管理しているものではありません。 手っ取り早く Hugo の Docker image が欲しい方は私が管理しているものを良かったら使ってください。新しいリリースがあればその日のうちに更新するようにしています。 CircleCI や GitLab CI/CD で使いたい場合は以下のイメージをどうぞ。 peaceiris/hugo-extended-docker: Docker image of Hugo (Hugo extended and
論文は100年後も読めることが望ましいと思います。 100年後マイクロソフトが無くなっていても論文がWordで読めなければ用をなさないでしょう。 あなたがWordを大事に保存していてもOSが変われば読めなくなります。 PC-98のソフトウェアでしか読めない論文を想像してみてください。 Wordで論文を書いてはいけない理由がここにあります。 論文ほどではないにしても書いた文章が誰かの役にたつのであれば100年後も読めることが望ましいでしょう。 100年後も文章が読めるフォーマットとはどんなものなのでしょうか。 テキストベースであることの価値 100年後も文章が読めるフォーマットはテキストベースのフォーマットである可能性が高いでしょう。 バイナリベースのフォーマットのWordなどは不確実性が高く2018年時点で2118年を予想することは難しいといえます。 ではテキストベースのフォーマットのなか
ページバンドルとは初期の頃の Hugo では、画像ファイルは static ディレクトリに置いて、記事ファイル (Markdown) と別々のディレクトリで管理するという方法がとられていました。 content/_index.mdpage1.mdpage2.mdpage3.mdstatic/image1.pngimage2.pngimage3.pngしかし、これでは Markdown ファイルと画像ファイルをバラバラに管理しないといけないというユーザーの不満が出て、現状は content ディレクトリ以下に一緒に配置できるようになっています。 この仕組みを ページバンドル (Page Bundle) と言います。 参考: Page Bundles - Hugoページバンドルは、その名のとおり、各ページにバンドルする形で画像ファイル（リソース）を保持するという考え方です。 ページバンドルを作
Hugo v0.56 がリリース Hugo 0.56.0: Hugo Modules and Deployment | Hugo 今回のリリース Hugo v0.56 では Hugo Modules と Hugo deploy の二つの新機能が実装されました。この記事ではそれらの紹介をします。 homebrew-core の Hugo は既に v0.56 へ更新されています。Docker で試したい方は Docker image of Hugo extended version を使ってみてください。GitHub Actions で試したい方は GitHub Actions for Hugo extended をどうぞ。もちろん Release v0.56.0 - gohugoio/hugo からバイナリをダウンロードして実行もできます。 Hugo Modules Hugo Modules
HUGOで独自Shortcodeを作る - ひよこまめ
HUGOでは、記事ファイルを軽量マークアップ言語であるMarkdown形式で作成します。しかし、Markdownの表現力には限りがあるため、HTMLに頼りたくなる場合があります。 とはいえ、何度も同じようなHTMLを記述するのは面倒＆ HTMLタグを記述することでファイルの可読性が落ちてしまいます。 この問題を解決するため、HUGOには、Shortcode（以下、ショートコード）という機能があります。 Markdownファイル内で{{< ショートコード名 >}}と記述すると、コンテンツ内にショートコードとして定義したテンプレートファイルのHTMLの内容を埋め込ます。 HUGOには、TwitterツイートやGistコードの埋め込みなど、ビルドインのショートコードが用意されています。 一方で独自にショートコードを作成できるので、この記事ではテンプレートファイルの作成方法を説明します。 リンクを
Hugo のテーマを自作した – m1yam0t0.com
このブログに使用している Hugo のテーマを変更した。勉強も兼ねて自分でテーマを作成してみた。 作成したテーマ以下のテーマを作成し、このブログ(m1yam0t0.com)に反映している。 m1yam0t0/hugo-blog-theme いろいろなページを参考にしながら作成したため、テーマ用のリポジトリを別途用意したが、 個人用で作成したテーマであるため、このブログを管理しているリポジトリで直接管理したほうが良かったかもしれない。 （このリポジトリを Submodule として追加している） テーマの雛形を作成まず、作成したテーマの動作確認を行うために、Hugo 公式で用意されているサンプルサイトを clone する。 gohugoio/hugoBasicExample: Example site to use with Hugo & Hugo Themes
こんにちは、Gaji-Labo アシスタントエンジニアの石垣です。 Gaji-Labo のコーポレートサイトを運用しているなかで、より効率的に更新が行えるようにするために、最近は使用するCMSやホスティングなど、サイトを動かす環境をアップデートすることを検討しています。 今回は、そんなアップデートを検討しているなかで知った、React 用静的サイトジェネレーターの GatsbyJS から派生した Gatsby Cloud というサービスについて知見をまとめたいと思います。 Gatsby Cloud とは？Gatsby Cloud とは、静的サイトジェネレーターの GatsbyJS のローンチを容易にするプラットフォームです。 GatsbyJS を使用しているWebサイトの GitHub リポジトリと連携し、リポジトリに push があったり接続している CMS から投稿を行ったりすると、イ
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ぼくがかんがえたさいきょうの Hugo Shortcodes
共有レンタルサーバーで静的サイトジェネレータを使う方法 | SERVERSUS
Hugo が動く最小構成の Docker イメージを作る - Qiita
なぜhugoでblogを書くのか - Solist Work Blog
Hugo で画像ファイルを Markdown ファイルと同じディレクトリに置く (Page Bundle)
Hugo v0.56 新機能 Modules と deploy - Qiita
GatsbyJS サイトの高速なビルド＆デプロイが行えるプラットフォーム Gatsby Cloud が便利
www.nikkei.com
news.yahoo.co.jp
detail.chiebukuro.yahoo.co.jp
news.denfaminicogamer.jp
mainichi.jp
ameblo.jp/windytwon