Behind Coleus

まずは、
ターミナルを出して
winget install Hugo.Hugo.Extended

で、Hugoを落とします。ターミナルは再起動しないと、反映されません。

hugo new site __（__は新しいフォルダ名を指す）で特定のサイトのひな形を作成します。

そこに、カレントディレクトリを移して、hugo serverを実行すればローカルで表示することが出来るようになる。

次に、テーマを設定するために、winget install --id Git.Git -e --source winget

を使って、Gitを落とす。

今回は、

github.comこれを使ってみる。

ダウンロードしようとしたら、グローバルのファイルになっていないなどとエラーで抜かすので、

git config --global --add safe.directory（カレントディレクトリのアドレス）
でグローバルにします。
そしたら、gitのダウンロードコマンドが使えるようになった。

それで、このページの手順通りにダウンロードしました。

すると、エラーが出たので、

index.rss.xmlをlayoutsフォルダに作成して、次をコピペした。

{{- printf "<?xml-stylesheet href=\"/rss.xsl\" type=\"text/xsl\"?>" | safeHTML }}
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
<channel>
<title>{{ if eq .Title .Site.Title }}{{ .Site.Title }}{{ else }}{{ with .Title }}{{ . }} on {{ end }}{{ .Site.Title }}{{ end }}</title>
<link>{{ .Permalink }}</link>
<description>Recent content {{ if ne .Title .Site.Title }}{{ with .Title }}in {{ . }} {{ end }}{{ end }}on {{ .Site.Title }}</description>
<generator>Hugo -- gohugo.io</generator>

{{ with .Site.Language.Locale }}
<language>{{ . }}</language>
{{ end }}

{{ with .Site.Params.authorEmail }}
<managingEditor>
{{ . }}{{ with $.Site.Params.authorName }} ({{ . }}){{ end }}
</managingEditor>
{{ end }}

{{ with .Site.Params.authorEmail }}
<webMaster>
{{ . }}{{ with $.Site.Params.authorName }} ({{ . }}){{ end }}
</webMaster>
{{ end }}

{{ with .Site.Copyright }}
<copyright>{{ . }}</copyright>
{{ end }}

{{ if not .Date.IsZero }}
<lastBuildDate>{{ .Date.Format "Mon, 02 Jan 2006 15:04:05 -0700" | safeHTML }}</lastBuildDate>
{{ end }}

{{ with .OutputFormats.Get "RSS" }}
{{ printf "<atom:link href=%q rel=\"self\" type=%q />" .Permalink .MediaType | safeHTML }}
{{ end }}

{{ range .Paginator.Pages }}
{{ if and .IsPage .Params.date }}
<item>
<title>{{ .Title }}</title>
<link>{{ .Permalink }}</link>
<pubDate>{{ .Date.Format "Mon, 02 Jan 2006 15:04:05 -0700" | safeHTML }}</pubDate>

{{ with .Site.Params.authorEmail }}
<author>
{{ . }}{{ with $.Site.Params.authorName }} ({{ . }}){{ end }}
</author>
{{ end }}

<guid>{{ .Permalink }}</guid>
<description>{{ .Site.Title }} {{ .Permalink }} - {{ .Content | html }} - {{ .Permalink }} - {{ .Site.Copyright }}</description>
</item>
{{ end }}
{{ end }}
</channel>
</rss>

これで実行したら、テーマを実装することが出来ました。

次のステップは、サイトをGithubを使って、公開したいです。

まずは、新しいリポジトリを作成しました。hugo.tomlのリンクにそのリンクをベースURLとして、設定しました。

git init

git add .

git commit -m "Initial blog"

git remote add origin https://github.com/（リンク）.git
を実行して、
git branch -M main
git push -u origin main

これらを実行すれば、現在のリポジトリがギットハブ上に公開されました。

次が難しくて、次のファイルをカレントディレクトリに作成し、

.github/workflows/hugo.yaml

内容を次の通りにします。

name: Deploy Hugo site to Pages

on:
push:
branches:
- main
workflow_dispatch:

schedule:
- cron: "0 0 * * *"

permissions:
contents: read
pages: write
id-token: write

concurrency:
group: pages
cancel-in-progress: false

jobs:
build:
runs-on: ubuntu-latest

steps:
- name: Checkout
uses: actions/checkout@v4
with:
submodules: recursive
fetch-depth: 0

- name: Setup Hugo
uses: peaceiris/actions-hugo@v3
with:
hugo-version: "latest"
extended: true

- name: Setup Pages
id: pages
uses: actions/configure-pages@v5

- name: Build
run: hugo --gc --minify --baseURL "${{ steps.pages.outputs.base_url }}/"

- name: Upload artifact
uses: actions/upload-pages-artifact@v3
with:
path: ./public

deploy:
environment:
name: github-pages
url: ${{ steps.deployment.outputs.page_url }}

runs-on: ubuntu-latest
needs: build

steps:
- name: Deploy to GitHub Pages
id: deployment
uses: actions/deploy-pages@v4

そこから、コミットして、新しく作ったファイルを追加します。

git add .
git commit -m "Add GitHub Pages workflow"
git push

それから、

ここが一番悩みましたが。

設定のページのソースをGithub Actionsにしてから、

Add　Github　Pages　workflowを、走らせます。エラーが出たら、もう一度走らせたら出来ました。

記事を追加したら、

git add .
git commit -m "Add new post"
git push

で公開出来るそう。

最後に、予約投稿の機能について、説明したいと思います。

Git hub Actionsはgitサーバーにワークフローが上がっていれば、こちらのPCがオフラインでも、それを実行してくれます。

先ほどのワークフローファイルに

on:
push:
branches:
- main

workflow_dispatch:

schedule:
- cron: "0 0 * * *"

このような記述があります。このschedule:以下の部分により、ページをGithub Actionsが毎日ビルドしてくれます。

そして、未来の日時に投稿するには、もうひとステップあります。

+++
title = "Markdown Test"
date = 2025-01-01T00:00:00+09:00
draft = false
+++

これは、マークダウン記事の最初に書く書式です。ここのdateを未来の日時に設定しておけば、毎日ビルドしてくれるGithub Actions君が、過去の日付になったものをビルドしてくれます。

2週間に一度しかネットに繋がらない環境で毎日投稿するには、まず、14記事分書いて、それらの日付を2週間後の1日目から、4週間後まで毎日に設定します。その後、ネットに繋がったらそれらの記事をギットハブにプッシュします。

すると、2週間と1日後から4週間後まで、ネットに接続できなくても、毎日ブログが更新できるというわけです。

ヤバそうだったら、ブラウザで自分のギットにアクセスして、アクション再実行すればおおむねいいと思います。

折角タグを付けたのに、クリックしても機能してない事に気付いたので、なおします。
hugo.tomlに次の記述を加え書きします。

[taxonomies]
tag = "tags"
category = "categories"
これを追加して、layouts/_default /single.htmlに次のようなファイルを作成してください。

{{ define "main" }}

<div class="post-list-container post-list-container-shadow">
<div class="post">
{{ $post_class := "post-head-wrapper-text-only"}}
{{ $featured_image := .Params.featured_image }}
{{ if $featured_image }}
{{ $post_class = "post-head-wrapper"}}
{{ end }}

<div class="{{$post_class}}"
{{ if $featured_image }}
{{ $image := .Resources.GetMatch (.Params.featured_image) }}
{{ if $image }}
style="background-image: url('{{$image.RelPermalink }}')"
{{ else }}
style="background-image: url('{{ $featured_image | absURL}}')"
{{ end }}
{{ end }}
>
<div class="post-title">
{{ .Title }}
{{ if .Params.description }}
<div class="post-subtitle">
{{ .Params.description }}
</div>
{{ end }}
<div class="post-meta">
{{ if .Params.date}}
<time itemprop="datePublished">
{{ i18n "format_date_tosec" .PublishDate }}
</time>
{{ end }}

{{ if .Params.categories }}
<i class="material-icons" style="">folder</i>
<a href="{{ (printf "categories/%s/" (.Params.categories | urlize)) | relURL }}">
{{ .Params.categories }}
</a>
 
{{ end }}

{{ if .Params.tags }}
<i class="material-icons" style="">label</i>
{{ range .Params.tags }}
<a href="{{ (printf "tags/%s/" (. | urlize)) | relURL }}">
{{ . }}
</a>
 
{{ end }}
{{ end }}

{{ if .Site.Params.enableReadingTime }}
<i class="material-icons" style="">schedule</i>
{{ $readTime := mul (div (countwords .Content) 220.0) 60 }}

{{ $minutes := math.Floor (div $readTime 60) }}
{{ $seconds := mod $readTime 60 }}

{{ if gt $minutes 0}}
{{ $minutes }} {{ cond (eq $minutes 1) "minute" "min" }}
{{ end }}
{{ $seconds }} {{ cond (eq $seconds 1) "second" "s" }}.
{{ end }}
</div>
</div>
</div>

<div class="post-body-wrapper">
{{ if .Params.enableVue }}
<div class="post-body">
{{ else }}
<div class="post-body" v-pre>
{{ end }}
{{.Content}}
{{ if not .Lastmod.IsZero }}
<HR width="100%" id="EOF">
<p style="color:#777;">{{ i18n "last_mod_on" .Page.Lastmod }}</p>
{{ end }}
</div>
</div>


<nav class="post-pagination">

{{if .Next}}
<a class="newer-posts" href="{{.Next.RelPermalink}}">
{{ i18n "next_link" }}<br>{{.Next.Title}}
</a>
{{else}}
<a class="newer-posts">
{{ i18n "next_link" }}<br>{{ i18n "no_newer_posts"}}
</a>
{{end}}

{{if .Prev}}
<a class="older-posts" href="{{.Prev.RelPermalink}}">
{{ i18n "prev_link" }}<br>{{.Prev.Title}}
</a>
{{else}}
<a class="older-posts">
{{ i18n "prev_link" }}<br>{{ i18n "no_older_posts" }}
</a>
{{end}}
</nav>
<div class="post-comment-wrapper">
{{ if eq .Params.comment false }}
<p style="opacity: 0.6" align="center">
<small>{{ i18n "comments_disabled" }}</small>
</p>
{{ else }}
{{- partial "comment.html" . -}}
{{ end }}
</div>
</div>
</div>

{{ end }}

リンクがいい感じに、サブフォルダを通して記載されています。
OKです。
今日は結構仕事したんでもうやめます。

Behind Coleus

新しい仕事は楽ちんです

新しいブログをぞくぞく更新しています。

ブログは更新してるんです。

新しいブログのリンク

Hugo環境構築

サブスク解除日

結局あんぷり亭の錦糸町が一番いいと思う。