なにこれ
#- HugoとGitHub Pagesでサイトを公開したよ
nix flakeで執筆環境を構築したよ- GitHub actionsを使って文章の公正をできるようにしたよ
モチベ
#nix flakeで環境を固めてどのPCでも執筆できるようにする- 少なくとも誤字脱字は無くして読みやすい文章にする
サイト構築
#Hugo + GitHub Pagesで構築しました。
Hugoは静的サイトジェネレータです。markdownで記事を書いたらデザインとかは自動で生成してくれます。
GitHub PagesはGitHubのリポジトリから直接webサイトをホストしてくれるサービスです。
環境構築
#nix + devenv + direnv で環境構築しています。
nixはNixOSで使われるパッケージマネージャーですが、その実態は依存パッケージとビルドスクリプトを宣言的に記した強力なビルドツールです。
パッケージビルドだけでなくパッケージを開発するためのシェル環境(依存パッケージにパスが通った環境)の提供もします。
Dockerと異なりパッケージリポジトリのハッシュもロックするので、ある時点で動作した環境は別の場所で構築しても動作することが保証されます。
(リポジトリ+宣言したパッケージの内で依存関係が解決しているという条件はありますが . . .)
npmパッケージはnixで提供されていないものがあります。
しかし、npmは開発ディレクトリにパッケージをインストール可能であり、またロックファイルも作成してくれることから無理にnixに統合する必要はありません。
(devenvはpackages.jsonがあれば自動的にパッケージをインストールしてくれます。)
devenvはnixによるシェル環境の構築をより分かりやすく提供するためのツールです。
どの言語の開発環境か分かりやすくするだけでなく、pythonやnodeなどnixでは少々取り扱いが難しい言語のサポートが充実しています。
また、開発環境内のみに作用する環境変数やシェルスクリプトを定義でき、作成した環境はコンテナへの出力も可能です。
direnvはプロジェクトディレクトリに入ると自動的にnixのシェル環境を起動させます。
開発環境内のスクリプト以下を作成しました。
mkpost: mkpost <title>でcontent/posts/YYYY/MM配下に自動的にファイルを作成してくれる
flake.nix
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
| {
description = "My blog created by Hugo";
inputs = {
flake-parts.url = "github:hercules-ci/flake-parts";
flakes.url = "github:misumisumi/flakes";
nixpkgs-stable.url = "github:NixOS/nixpkgs/nixos-23.11";
nixpkgs.url = "github:NixOS/nixpkgs/nixos-unstable";
nur.url = "github:nix-community/NUR";
devenv.url = "github:cachix/devenv";
};
outputs = inputs @ { self, flake-parts, ... }:
flake-parts.lib.mkFlake
{ inherit inputs; }
{
imports = [
inputs.devenv.flakeModule
];
flake = { };
systems = [ "x86_64-linux" ];
perSystem = { config, pkgs, system, ... }: rec{
_module.args.pkgs = import inputs.nixpkgs {
inherit system;
overlays = [ inputs.flakes.overlays.default ];
config.allowUnfree = true;
};
devenv.shells.default = {config,...}: {
# 便利なスクリプト
scripts = {
mkpost.exec = ''
title=$1
hugo new content posts/$(date +"%Y/%m")/"''${title}"/index.md -k post
'';
};
processes = {
hugo.exec = "${pkgs.hugo}/bin/hugo server --gc --disableFastRender --enableGitInfo -D"; # サーバーの起動
};
enterShell = ''
export PATH="${config.devenv.root}/node_modules/.bin:$PATH";
'';
languages = {
go.enable = true;
javascript = {
enable = true;
bun = {
enable = true;
install.enable = true;
};
};
};
packages = with pkgs; [
hugo
];
};
};
};
}
|
記事テンプレートの作成
#Qiitaで良い記事を書く技術や
伝えたい人に届ける技術記事の書き方を参考にブログのテンプレートを次のように作成しました。
現状、技術記事しかないのでテンプレートは1つだけです。
archetypes/post.md
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
| ---
title: '{{ replace .File.ContentBaseName "-" " " | title }}'
date: "{{ .Date }}"
draft: true
description: ""
slug: "{{ .Name }}"
authors: []
categories: []
series: []
series_order: 1
tags: []
---
## なにこれ？
## モチベ
## 先行
## やったこと
## 余談+ToDo
## 参考
<!-- URLs -->
|
記事のテンプレートは論文とほぼ同じようなフォーマットで親しみやすかったため採用しました。
備忘録とかはどのようなフォーマットにするかは悩み中です。
Qiitaで良い記事を書く技術
伝えたい人に届ける技術記事の書き方
