23.12.05
Targoyle

hostr でつくる単発 HTML

たーごいるです。Nostr アドカレ第二会場の 5日目です。普段はソフト系とは全く関係ないことをしているなんでも屋さんです。プログラミングだと Python を大体 7 年くらいやってます。

Web は全然なんですが、数カ月前に GPT-4 が登場し、壁打ちやプログラミングの問題解決においての強力なパートナーになりました。 GPT を調べるなかで、いろいろなプログラムを書かせたりしていたんですが、HTML/CSS/JS も書けるのでいくつか試して検証していました。そんななか Kaiji さんが hostr ... Nostr Webhost をリリースしました。

単発ネタの HTML をポンポン投げるのにちょうどいいんじゃね？と思ってやってみたら結構いい感じでした……そんな感じの記事です。

Nostr よりは GPT 比率激重です。

nostr-webhost のインストール

...は省きます。README.md を読もう！！！

自分のディレクトリ構成

以下のようになっています。この記事も markdown で書かれています。 markdown を書き終わったら、conv.py を実行して HTML に変換しつつヘッダーとフッターをくっつけます。 prism はコードハイライト用のライブラリです。

nostrh$ tree .
.
├── archive
│   ├── <生成された hex ID>
│   │    └── index.html
│    ...
│
├── dist
│   ├── calc.html
│   ├── index.html
│   ├── nyancat.html
│   ├── prism.min.css
│   └── prism.min.js
├── markdown
│   └── index.md
├── memo.md
├── resources
│   ├── prism.min.css
│   └── prism.min.js
└── utils
    ├── conv.py
    ├── note.md
    ├── prism.md
    └── test.py

conv.py はこんな感じ

import os
import readline
import shutil

import markdown

# ---

RESOURCE_DIR = "../resources"

MARKDOWN_DIR = "../markdown"
EXCLUDE_MD_DIR = "_archive"

DIST_DIR = "../dist"

# ---

lang = "ja"  # en

prism_choice = input("Use prism.js? [y/N] > ").strip().lower() or "n"
use_prismjs = prism_choice != "n"

title = input("Page title > ")

if use_prismjs:
    shutil.copy(os.path.join(RESOURCE_DIR, "prism.min.css"), DIST_DIR)
    shutil.copy(os.path.join(RESOURCE_DIR, "prism.min.js"), DIST_DIR)

style = """body {
padding-top: 3.5rem;
padding-right: 15%;
padding-left: 15%;
padding-bottom: 3.5rem;
}
@media (max-width: 600px) {
body {
padding-right: 5%;
padding-left: 5%;
}
}"""

head = f"""<!DOCTYPE html>
<html lang="{lang}">
<head>
<meta charset="utf-8">
<title>{title}</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/5.4.0/github-markdown.min.css" rel="stylesheet">
{'<link href="prism.min.css" rel="stylesheet">' if use_prismjs else ''}
<style>
{style}
</style>
</head>
<body class="markdown-body">
<main>
"""

script = f"""
</main>
{'<script src="prism.min.js"></script>' if use_prismjs else ''}
</body>
</html>
"""

extensions = ["attr_list", "fenced_code"]

input_files = []
for path, directories, files in os.walk(MARKDOWN_DIR):
    if EXCLUDE_MD_DIR in directories:
        directories.remove(EXCLUDE_MD_DIR)

    for file in files:
        if file.endswith(".md"):
            input_files.append(os.path.join(path, file))

md = markdown.Markdown(extensions=extensions)
for input_file in input_files:
    target_filename = input_file.replace(MARKDOWN_DIR, DIST_DIR).replace(".md", ".html")
    with open(input_file, "r") as f:
        text = md.convert(f.read())

    p = ""
    for j in range(target_filename.count("/") - 1):
        p += "../"

    html = head + text + script

    target_directory = os.path.dirname(target_filename)
    print("target dir:", target_directory)

    os.makedirs(target_directory, exist_ok=True)
    print(input_file, target_filename, sep=" -> ")

    with open(target_filename, "w") as f:
        f.write(html)

GPT に書いてもらう

さて、GPT に HTML を書いてもらう上で、いくつかこなしたあとにテンプレの必要性が見えてきました。これがあると残りの隙間を埋めるだけ……なタスクになるので、GPT 的にも処理しやすく、また一定のクオリティが確保できます。見た目上は。

template.html

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Title</title>
    <style>
        body {
        }

    </style>
</head>

<body>
    <div class="">

    </div>

    <script>

    </script>
</body>

</html>

このテンプレを GPT に投げて、あとは適当な指示を出すだけです。さっそく作ってみましょう......

実際の会話リンク: