Intro
HTMLジェネレータのseml-mode.elとOrg->HTMLジェネレータ拡張のorglyth.elを作っていて、自分のブログくらいはそれらを使って構築しようと思っていました。
しかし結局落ち着かないまま1年が経過し、leaf.elのドキュメントや、専門分野のまとめなどネットで公開したいものだけ溜まっていました。
conao3.comのドメインも2017年から持っていますが、3年もの間まともなコンテンツは提供されませんでした。
ここらへんで諦めてさっさとHugoとNetlifyで公開してしまえということで、きちんと整備されたツールを使わせてもらい、この度ようやくconao3.comでまともなコンテンツを提供できるようになりました。
Netlify
よい情報で溢れているので省略します。
NetlifyはDNSも提供しているようなので、「さくらのドメイン」で取得したconao3.comをNetlify DNSで解決させるようにしました。
また、デフォルトでは古いHugoが動いているようなので、「Build & Deploy」->「Environment」->「Environment variables」で「HUGO_VERSION」をローカルのバージョンで設定します。 私の場合「0.69.2」でした。
Hugo
Hugoのインストール
Install Hugoを参考にHugoをインストールします。
記載がありませんが、Archの場合はpacmanで簡単に入ります。(Archlinux - Package)
# pacman -S hugo
$ hugo version
Hugo Static Site Generator v0.69.2/extended linux/amd64 BuildDate: unknown
ブログテンプレートの展開
Quick Startを参考にテンプレートを展開します。
私はローカルのレポジトリ置き場は ~/dev/repos にしています。
$ cd ~/dev/repos
$ hugo new site netlify-src
以下、 netlify-src はhugoサイトのルートディレクトリということにします。
ブログテーマの適用
Hugo themesからいい感じのテーマを探し、submoduleでレポジトリに持ちます。
テーマはローカルで簡単にカスタマイズできる仕組みがあるので、多少気に入らないところがあっても大丈夫です。
$ cd quickstart
$ git init
$ git submodule add https://github.com/lxndrblz/anatole.git themes/anatole
テーマごとにカスタマイズする方法が違うので、テーマのREADMEを読んで設定をして下さい。
なお、私は当時ローカルで簡単にカスタマイズできる機構を知らず、forkでカスタマイズするしかないと思っていたので、「Make a Hugo blog from scratch」を参考に0からテーマを作りました。
私が作ったテーマはconao3/anatole-extで公開しています。
サンプル記事の追加
サンプルの記事を追加します。
テーマが exampleSite というフォルダを持っている場合は、それらのファイルを netlify-src/ にコピーするだけでいいです。
コマンドでテンプレートを作成するには次のコマンドを実行します。
実行後、 content/blog/my-first-post.md が作成されているので、よしなに編集します。
$ hugo new blog/my-first-post.md
ローカルサーバーの起動
Hugoは簡単にローカルサーバーを起動でき、さらに依存ファイルが変更されたときに自動でブラウザにリロードさせることができます。
$ hugo server -D
サーバーを起動すると localhost:1333 で配信されます。
静的サイトのビルド
サイト全体のビルドは下記で行います。
Netlifyで公開するならローカルでビルドする必要はないのですが、最終的にどんなツリーになっているかを確認することができます。
$ hugo
ox-hugo
ox-hugoのインストールと設定
ox-hugoをインストールし、適宜設定を行ないます。
「hugo | IMADENALE」を参考に無難な構成を考えましたが、もっといい方法がある気がします。 とりあえず私は下記の設定と方針でしばらくやってみます。
(leaf ox-hugo
:doc "Hugo Markdown Back-End for Org Export Engine"
:req "emacs-24.4" "org-9.0"
:tag "docs" "markdown" "org" "emacs>=24.4"
:added "2020-05-05"
:url "https://ox-hugo.scripter.co"
:emacs>= 24.4
:ensure t
:after ox
:custom ((org-hugo-front-matter-format . "yaml")))
orgファイル管理の方針
ox-hugo用のorgファイルは netlify-src/org/{{user}}.org に持つことにしました。
#+title: Hugo blog source
#+author: conao3
#+date: <2020-05-05 Tue>
#+options: ^:{}
#+hugo_base_dir: ../
#+hugo_section: blog
#+link: files file+sys:../static/files/
* blog
:PROPERTIES:
:EXPORT_HUGO_SECTION: blog
:END:
** DONE test :meta:hugo:
CLOSED: [2020-05-05 Tue 19:21]
:PROPERTIES:
:EXPORT_FILE_NAME: test
:EXPORT_DATE: 2020-05-05T00:00:00+09:00
:EXPORT_HUGO_LASTMOD: [2020-05-05 Tue 16:20]
:END:
testestest.
もし将来的にこのorgファイルが超巨大なファイル(1万行~)になれば、適宜 netlify-src/org/archive-{{user}}-{{num}}.org に移すことにします。
レベル1はセクションの分類に使い、レベル2のheadingから記事のツリーと解釈されます。
静的ファイル管理の方針
filesのlinkは「画像の埋め込みテスト | imadenale」を参考にしました。
スクリーンショットやPDFは netlify-src/static/files 以下に持つことにします。
netlify-src/static はレポジトリ肥大化を避けてconao3/netlify-srcからconao3/netlify-src-blobに切り出し、submoduleで持つことにします。
参考記事ではfilesのリンクをURLで設定していましたが、「Org Modeのリンク機能で情報集約 | Qiita」を参考に fils+sys: 指定を使うとorgの画像インライン表示もできますし、きちんとox-hugoによってリンクが修正され、正しいマークダウンが出力されました。
Input
#+link: files file+sys:../static/files/ #+attr_html: :width 128px [[files:logo.jpg]]Output
{{< figure src="/files/logo.jpg" width="128px" >}}Rendering
Deploy
NetlifyのデプロイはGitHubにpushするだけです!
Hugoのビルドはとても早く、pushしてNetlifyのログを見に行くともう終わっています。
ビルドできたら個人Slackに通知飛したりするのをまた今度やりたいと思っています。
Conclusion
Netlify + Hugo + ox-hugoで快適なブログ執筆環境を整えることができました!
ようやく情報発信する環境が整ったので、どんどん情報を発信していきたいと思います。
まずは見やすいleaf.elのドキュメントを書きます!
また、執筆現在はconao3/netlify-srcとconao3/netlify-src-blobをパブリックレポジトリとしていますが、後でプライベートレポジトリに変更し、Patreonの特典にします。
本来公開するものを非公開にすることでしか価値を付けられないことをお許しください。
ぜひPatreonで私の活動のサポートをして頂けるとうれしいです!