🍘

生成AIと画像生成AIで使っているCaddyのbrowse.html完全体

2025/06/16に公開

多分究極体に進化するのは先になりそうなので

生成AIでmdファイルを生成した時のbrowse.html

browse.html

<!DOCTYPE html>
<html>
	<head>
		<title>{{html .Host}}</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.fluid.classless.orange.min.css">
	</head>
	<body>
		<header>
			<h1><a href="/">{{html .Host}}</a></h1>
		</header>
		<main>{{- range .Items}}{{- if .HasExt ".md" ".mdown" ".markdown" }}<p><a href="{{html .Name}}">{{html .Name}}</a></p>{{include .Name | markdown}}{{- end}}{{- end}}</main>
		<footer>
			Styled with <a rel="noopener noreferrer" href="https://picocss.com">Pico CSS</a> | Served with <a rel="noopener noreferrer" href="https://caddyserver.com">Caddy</a>
		</footer>
	</body>
</html>

画像生成AIでwebpファイルを生成した時のbrowse.html

browse.html

<!DOCTYPE html>
<html>
	<head>
		<title>{{html .Host}}</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.fluid.classless.orange.min.css">
		<style>@media (min-width:768px){img{max-width:25%}}</style>
	</head>
	<body>
		<header>
			<h1><a href="/">{{html .Host}}</a></h1>
		</header>
		<main>{{- range .Items}}{{- if .IsDir }}<p><a href="{{html .Name}}">{{html .Name}}</a></p>{{- else if .HasExt ".jpg" ".jpeg" ".png" ".gif" ".webp" ".tiff" ".bmp" ".heif" ".heic" ".svg" ".avif"}}<img loading="lazy" src="{{.Name | pathEscape}}">{{- end}}{{- end}}</main>
		<footer>
			Styled with <a rel="noopener noreferrer" href="https://picocss.com">Pico CSS</a> | Served with <a rel="noopener noreferrer" href="https://caddyserver.com">Caddy</a>
		</footer>
	</body>
</html>

webp

Caddyfileはシンプルに

Caddyfile

{
	admin off
	auto_https off
}

:8080
root * public
file_server {
	browse browse.html
}

$ caddy run

完全体になる前にbrowse.htmlを紹介していた記事はこちら

Pico CSSの記事はこちら

Discussion