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
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 と
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
hugo で画像を最適化して出力する | tbsmcd
ブログを軽くしたい林田ドットオンラインというまあまあ狂ったブログがあり、これはペパボの同僚の手になるものだけど、とにかく異常に軽い。WordPress でこれだけ軽いのだから、 hugo ならもっと軽くなるはず。なのでこのブログも軽量路線で行こうという話。 なにはともあれ画像がデカい大きければ転送に時間がかかる。これは古代エジプトの時代から不変の原理であり、当時は巨石を丸太のコロを使っただとか、ソリを使っただとか、いずれにせよ重いものを運ぶのには力か工夫が必要である。幸い2020年代を生きている我々は、巨石を運ぶ古代エジプト労働者やイースター島モアイ建造従事者とは違い、ファイルを圧縮したり画像自体の表示領域を小さくすることが許されている。逆に労働の合間にビールを飲むことは許されてはいないが、ここは素直に軽くする方向で行きたい。 hugo における画像リサイズ参照 Image Process
MkDocsでmarkdownなサイト作り
Table of Contents 作成したもの 作成したサイトとGitHubのリポジトリは以下です。 サイト 経緯 アウトプットの先 学びをアウトプットすることは大事です。 私の場合はアウトプットとして、このブログに投稿していました。 しかし、ブログを書くまでも必要ないアウトプットもあります。 参考リンクを貼るだけで解決する場合 (公式の最新を見た方が信頼できる) インターネット上で既に似たような情報が多数見受けられる場合 このようなケースをどう扱うか悩んでいました。 GitHubのリポジトリにノウハウを GitHubはインターネットからアクセスでき、全文検索も可能です。 ブログを書く必要のないものはGitHubのリポジトリにまとめていました。 しかし、しばらく使っていると以下の要望が出てきました。 GitHub Markdown以上のリッチな機能を使いたい 自身の経歴などを記載したポー
GitHub Pages サイトの可視性を変更する - GitHub Enterprise Cloud Docs
GitHub Pages サイトのアクセス制御について # GitHub Pages のアクセス制御では、サイトをプライベートで公開することで、プロジェクト サイトへのアクセスを制限できます。 プライベートで公開されたサイトは、サイトの公開元のリポジトリの読み取りアクセスを持っている人だけがアクセスできます。 プライベートで公開されたサイトは、内部的なドキュメンテーションや知識ベースをEnterpriseのメンバーと共有するために利用できます。 自社で Enterprise Managed Users を使っている場合、アクセス制御は使えず、すべての GitHub Pages サイトには、他のエンタープライズ メンバーのみがアクセスできます。 Enterprise Managed Users について詳しくは、「GitHub Pages について」をご覧ください。 Organization
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” という仕組
公開日: 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 では、画像ファイルは static ディレクトリに置いて、記事ファイル (Markdown) と別々のディレクトリで管理するという方法がとられていました。 content/_index.mdpage1.mdpage2.mdpage3.mdstatic/image1.pngimage2.pngimage3.pngしかし、これでは Markdown ファイルと画像ファイルをバラバラに管理しないといけないというユーザーの不満が出て、現状は content ディレクトリ以下に一緒に配置できるようになっています。 この仕組みを ページバンドル (Page Bundle) と言います。 参考: Page Bundles - Hugoページバンドルは、その名のとおり、各ページにバンドルする形で画像ファイル（リソース）を保持するという考え方です。 ページバンドルを作
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
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
1つの org ファイルから Hugo と Qiita の Markdown を生成する - Qiita
https://cloudlance-motio.work/post/hugo-uber-blog/
Syntax highlighting
ぼくがかんがえたさいきょうの Hugo Shortcodes
共有レンタルサーバーで静的サイトジェネレータを使う方法 | SERVERSUS
Hugo で画像ファイルを Markdown ファイルと同じディレクトリに置く (Page Bundle)
Nift - index
GatsbyJS サイトの高速なビルド＆デプロイが行えるプラットフォーム Gatsby Cloud が便利
kamigame.jp
phxxius.hatenablog.com
ndlsearch.ndl.go.jp
x.com
www.sankei.com
news.livedoor.com