The smallest Docker image to serve static websites Until recently, I used to think that serving static websites from Docker would be a waste of bandwith and storage. Bundling nginx or various other heavy runtimes inside a Docker image for the sole purpose of serving static files didn’t seem like the best idea - Netlify or Github Pages can handle this much better. But my hobby server was sad and cr
WordPressから記事をMarkdownで書き出すことに成功したら、もっとも大変な部分は終わりです。後半は、それをブログらしく表示させるためのテーマを作っていきます。 Hugoには既存のテーマも数多く存在しますので、それを改変してもいいのですが、いわゆるブログ的なテーマはなかなか存在しません。そこで私は既存のHTMLテンプレートを自前でHugoに対応させることにしています。 htmlとcssの知識があれば、それほど難しい作業ではありませんし、この連載の記事でブログに必要なコンポーネントもいくつか実装しますので、参考にしてみてください。 Hugoのテーマの構成を理解しておく まずは、Hugo におけるテーマの構成について理解しておきましょう。テーマをいちから作るときには、config.toml が存在するディレクトリで次のコマンドを入力します。 コマンドを実行すると、以下のような基本的な
zzzmisa's blog
Octokit を使って GitHub API を叩く際に、認証方法を Personal Access Token から GitHub Apps に切り替えました。 Personal Access Token で行う方法と、 GitHub Apps で行う方法をそれぞれをメモしておきます。 環境 Node.js 16.15.0
Qiita 向けの Markdown Exporter の選択 Hugo 向けの Exporter は ox-hugo 一択でよいだろう。Qiita 向けの Markdown の生成には、いつくかの候補を検討した後に、最も機能の差分が少なかった ox-gfm を選択した。他の選択肢としては、標準の ox-md や、こちらの記事で紹介されている ox-qmd などがある。特に ox-qmd はそのものズバリで、最も org-mode から Qiita への再現性が高いと思われた。しかし、自分の設定が悪いのか、org の table が HTML として出力されてしまい、その結果、文字修飾が有効にならないという問題があったため断念した。他にも ox-pandoc からも Markdown を出力できるが、今回は試していない。 ox-hugo と ox-gfm のインストール ox-hugo と
この記事について Reactの開発ではcreate-react-appを用いることが多かったのですが、Next.jsでも開発を行う機会があったので把握できた範囲で実装方法の差異などをまとめてみたいと思います。 個人的な内容整理が主目的ですが、どちらかに触れてみようと思っている方やフレームワーク選定の際の参考になれば幸いです。 SPA、SSR、SSGについておさらい フレームワークの話の前にこの辺りの用語についておさらいしておきます。 SPAの登場前は、 ページ遷移の度にサーバーへ同期処理でリクエストを行い、ページを取得するのが一般的でした。 LaravelやRailsなどMVCフレームワークで画面作ったことある方はイメージしやすいと思います。 ページアクセスの度にサーバーでPHPやRubyなどの処理が実行されるため、サーバーの負荷や読み込みの遅さなどが課題とされていました。 SPAの登場
Hugo uses Chroma as its code highlighter; it is built in Go and is really, really fast. Configure syntax highlighter See Configure Highlight. Generate syntax highlighter CSS If you run with markup.highlight.noClasses=false in your site configuration, you need a style sheet. The style sheet will override the style specified in markup.highlight.style. You can generate one with Hugo: Run hugo gen chr
MkDocsでmarkdownなサイト作り
Table of Contents 作成したもの 作成したサイトとGitHubのリポジトリは以下です。 サイト 経緯 アウトプットの先 学びをアウトプットすることは大事です。 私の場合はアウトプットとして、このブログに投稿していました。 しかし、ブログを書くまでも必要ないアウトプットもあります。 参考リンクを貼るだけで解決する場合 (公式の最新を見た方が信頼できる) インターネット上で既に似たような情報が多数見受けられる場合 このようなケースをどう扱うか悩んでいました。 GitHubのリポジトリにノウハウを GitHubはインターネットからアクセスでき、全文検索も可能です。 ブログを書く必要のないものはGitHubのリポジトリにまとめていました。 しかし、しばらく使っていると以下の要望が出てきました。 GitHub Markdown以上のリッチな機能を使いたい 自身の経歴などを記載したポー
hugo で画像を最適化して出力する | tbsmcd
ブログを軽くしたい林田ドットオンラインというまあまあ狂ったブログがあり、これはペパボの同僚の手になるものだけど、とにかく異常に軽い。WordPress でこれだけ軽いのだから、 hugo ならもっと軽くなるはず。なのでこのブログも軽量路線で行こうという話。 なにはともあれ画像がデカい大きければ転送に時間がかかる。これは古代エジプトの時代から不変の原理であり、当時は巨石を丸太のコロを使っただとか、ソリを使っただとか、いずれにせよ重いものを運ぶのには力か工夫が必要である。幸い2020年代を生きている我々は、巨石を運ぶ古代エジプト労働者やイースター島モアイ建造従事者とは違い、ファイルを圧縮したり画像自体の表示領域を小さくすることが許されている。逆に労働の合間にビールを飲むことは許されてはいないが、ここは素直に軽くする方向で行きたい。 hugo における画像リサイズ参照 Image Process
hugoを使った爆速ブログをカスタマイズする
前回の振り返り 前回は下記記事で、hugoを使いブログを作成しgithub actionsを使用した自動デプロイを設定しました。 今回はその続編で、投稿をリッチにするshort codeの紹介、投稿に画像を入れる方法、ページテンプレートのカスタマイズをやっていきます。 環境 項目
【HUGO】マークダウンの中にHTMLコードを書いて表示する方法
マークダウンにHTMLコードを書きます（結論）以上です。 いきなり結論ですが、マークダウンの中にHTMLタグをそのまま書けばOKでした。 HUGOは、マークダウンの中に書いたHTMLコードをそのまま出力してくれました。 マークダウンファイル(.md) の中に書くHTMLコードは、Raw HTML とか Inline HTML と呼ばれていました。 検索で『markdown raw html』とか『markdown inline html』で検索したら、『マークダウンはインラインHTMLをサポートしている』といった内容のサイトがヒットしました。 マークダウンの仕様Markdownマークダウンの仕様（文法、構文、Syntaxシンタックス）の場所です（マークダウンの開発者のサイト）。 INLINE HTMLの説明がありました。 (daringfireball.net) INLINE HTML –
今回は 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” という仕組
公開日: 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 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 では、画像ファイルは static ディレクトリに置いて、記事ファイル (Markdown) と別々のディレクトリで管理するという方法がとられていました。 content/_index.mdpage1.mdpage2.mdpage3.mdstatic/image1.pngimage2.pngimage3.pngしかし、これでは Markdown ファイルと画像ファイルをバラバラに管理しないといけないというユーザーの不満が出て、現状は content ディレクトリ以下に一緒に配置できるようになっています。 この仕組みを ページバンドル (Page Bundle) と言います。 参考: Page Bundles - Hugoページバンドルは、その名のとおり、各ページにバンドルする形で画像ファイル（リソース）を保持するという考え方です。 ページバンドルを作
Hugo のテーマを自作した – m1yam0t0.com
このブログに使用している Hugo のテーマを変更した。勉強も兼ねて自分でテーマを作成してみた。 作成したテーマ以下のテーマを作成し、このブログ(m1yam0t0.com)に反映している。 m1yam0t0/hugo-blog-theme いろいろなページを参考にしながら作成したため、テーマ用のリポジトリを別途用意したが、 個人用で作成したテーマであるため、このブログを管理しているリポジトリで直接管理したほうが良かったかもしれない。 （このリポジトリを Submodule として追加している） テーマの雛形を作成まず、作成したテーマの動作確認を行うために、Hugo 公式で用意されているサンプルサイトを clone する。 gohugoio/hugoBasicExample: Example site to use with Hugo & Hugo Themes
GitHub - primocms/primo: Primo is a visual CMS with a built-in code editor, Svelte blocks, and static site generator.
Traditional monolithic CMSs like WordPress, Drupal, and Joomla enable quick setup and easy content editing, but rely on antiquated and heavy development practices (often relying on plugins and third-party services to customize the site and add new components). Headless CMSs have popped up to modernize the view layer with modern development practices and frameworks, but have a poorer content editin
So in case you were wondering what this is all about... Nift is a high-performance cross-platform unopinionated framework for building the web. It's lightning fast (evidence), open source (MIT license) and developed from the ground up in C++. Use it for any of your personal or commercial projects!
こんにちは、Gaji-Labo アシスタントエンジニアの石垣です。 Gaji-Labo のコーポレートサイトを運用しているなかで、より効率的に更新が行えるようにするために、最近は使用するCMSやホスティングなど、サイトを動かす環境をアップデートすることを検討しています。 今回は、そんなアップデートを検討しているなかで知った、React 用静的サイトジェネレーターの GatsbyJS から派生した Gatsby Cloud というサービスについて知見をまとめたいと思います。 Gatsby Cloud とは？Gatsby Cloud とは、静的サイトジェネレーターの GatsbyJS のローンチを容易にするプラットフォームです。 GatsbyJS を使用しているWebサイトの GitHub リポジトリと連携し、リポジトリに push があったり接続している CMS から投稿を行ったりすると、イ
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
The smallest Docker image to serve static websites
WordPressからHugoへ：Hugoでブログテーマを作る (1) | mehori.com
1つの org ファイルから Hugo と Qiita の Markdown を生成する - Qiita
create-react-appとNext.jsの比較 - Qiita
https://cloudlance-motio.work/post/hugo-uber-blog/
Syntax highlighting
ぼくがかんがえたさいきょうの Hugo Shortcodes
共有レンタルサーバーで静的サイトジェネレータを使う方法 | SERVERSUS
Hugo が動く最小構成の Docker イメージを作る - Qiita
なぜhugoでblogを書くのか - Solist Work Blog
Hugo v0.56 新機能 Modules と deploy - Qiita
Hugo で画像ファイルを Markdown ファイルと同じディレクトリに置く (Page Bundle)
Nift - index
GatsbyJS サイトの高速なビルド＆デプロイが行えるプラットフォーム Gatsby Cloud が便利