Compare commits

...

10 commits

Author SHA1 Message Date
96c5360479 no kudos on 404 2024-01-21 21:58:39 -06:00
0869b0a2c8 post tweaks 2024-01-21 21:43:50 -06:00
7df7a9fad6 make code green 2024-01-21 21:41:18 -06:00
06720c680d improve contrast 2024-01-21 21:22:42 -06:00
b00049b2b1 clean up footnote backlink styling 2024-01-21 21:21:30 -06:00
5a63d1a007 style back-to-top with css 2024-01-21 21:16:15 -06:00
97d7c08d0b update post 2024-01-21 20:42:55 -06:00
6c3c3437a2 new post: deploy-hugo-neocities-github-actions 2024-01-21 19:25:50 -06:00
e5db4ccd19 add daily build 2024-01-21 19:17:33 -06:00
cfa4325526 unalias 404 2024-01-21 17:41:20 -06:00
8 changed files with 127 additions and 16 deletions

View file

@ -2,6 +2,8 @@ name: Deploy to Neocities
# only run on changes to main
on:
schedule:
- cron: 0 13 * * *
push:
branches:
- main
@ -33,7 +35,7 @@ jobs:
run: hugo --minify
- name: Insert 404 page
run: |
cp public/not_found/index.html public/not_found.html
cp public/404/index.html public/not_found.html
- name: Highlight with Torchlight
run: |
npm i @torchlight-api/torchlight-cli

View file

@ -25,6 +25,7 @@ giscusStrict = "0"
giscusTheme = "noborder_gray"
analytics = true
kudos = true
[author]
name = "John Bowdre"

View file

@ -1,9 +1,9 @@
+++
title = "404'd!"
aliases = ["not_found"]
noindex = true
timeless = true
comments = true
kudos = false
+++
We're not sure what you were looking for but it's not here.

View file

@ -0,0 +1,91 @@
---
title: "Deploying a Hugo Site to Neocities with GitHub Actions"
date: 2024-01-21
# lastmod: 2024-01-21
description: "Using GitHub Actions to automatically deploy a Hugo website to Neocities."
featured: false
toc: true
comments: true
categories: Backstage
tags:
- hugo
- meta
- serverless
---
I came across [Neocities](https://neocities.org) many months ago, and got really excited by the premise: a free web host with the mission to bring back the *"fun, creativity and independence that made the web great."* I spent a while scrolling through the [gallery](https://neocities.org/browse) of personal sites and was amazed by both the nostalgic vibes and the creativity on display. It's like a portal back to when the web was fun. Neocities seemed like something I wanted to be a part of so I signed up for an account... and soon realized that I didn't *really* want to go back to crafting artisinal HTML by hand like I did in the early '00s. I didn't see an easy way to leverage my preferred static site generator[^lazy] so I filed it away and moved on.
[^lazy]: Also I'm kind of lazy, and not actually very good at web design anyway. I mean, you've seen my work.
Until yesterday, when I saw a post from [Sophie](https://social.lol/@sophie) on [How I deploy my Eleventy site to Neocities](https://localghost.dev/blog/how-i-deploy-my-eleventy-site-to-neocities/). I hadn't realized that Neocities had an [API](https://neocities.org/api), or that there was a [deploy-to-neocities](https://github.com/bcomnes/deploy-to-neocities) GitHub Action which uses that API to push content to Neocities. With that new-to-me information, I thought I'd give Neocities another try - a real one this time.
I had been hosting this site on Netlify's free plan [for a couple of years](/hello-hugo/) and haven't really encountered any problems. But I saw Neocities as a better vision of the internet, and I wanted to be a part of that[^passion]. So last night I upgraded to the $5/month [Neocities Supporter](https://neocities.org/supporter) plan which would let me use a custom domain for my site (along with higher storage and bandwidth limits).
[^passion]: Plus I love supporting passion projects.
I knew I'd need to make some changes to Sophie's workflow since my site is built with Hugo rather than Eleventy. I did some poking around and found [GitHub Actions for Hugo](https://github.com/peaceiris/actions-hugo) which would take care of installing Hugo for me. Then I'd just need to render the HTML with `hugo --minify` and use the [Torchlight](/spotlight-on-torchlight/) CLI to mark up the code blocks. Along the way, I also discovered that I'd need to overwrite `/not_found.html` to insert my custom 404 page so I included an extra step to do that. After that, I'll finally be ready to push the results to Neocities.
It took a bit of trial and error, but I eventually adapted this workflow which does the trick:
### The Workflow
```yaml
# torchlight! {"lineNumbers": true}
# .github/workflows/deploy-to-neocities.yml
name: Deploy to Neocities
on:
# Daily build to catch any future-dated posts
schedule:
- cron: 0 13 * * *
# Build on pushes to the main branch only
push:
branches:
- main
concurrency:
group: deploy-to-neocities
cancel-in-progress: true
defaults:
run:
shell: bash
jobs:
deploy:
name: Build and deploy Hugo site
runs-on: ubuntu-latest
steps:
# Install Hugo in the runner
- name: Hugo setup
uses: peaceiris/actions-hugo@v2.6.0
with:
hugo-version: '0.121.1'
extended: true
# Check out the source for the site
- name: Checkout
uses: actions/checkout@v4
with:
submodules: recursive
# Build the site with Hugo
- name: Build with Hugo
run: hugo --minify
# Copy my custom 404 page to not_found.html so it
# will be picked up by Neocities
- name: Insert 404 page
run: |
cp public/404/index.html public/not_found.html
# Highlight code blocks with the Torchlight CLI
- name: Highlight with Torchlight
run: |
npm i @torchlight-api/torchlight-cli
npx torchlight
# Push the rendered site to Neocities and
# clean up any orphaned files
- name: Deploy to Neocities
uses: bcomnes/deploy-to-neocities@v1
with:
api_token: ${{ secrets.NEOCITIES_API_TOKEN }}
cleanup: true
dist_dir: public
```
I'm thrilled with how well this works, and happy to have learned a bit more about GitHub Actions in the process. Big thanks to Sophie for pointing me in the right direction!

View file

@ -42,7 +42,13 @@
{{- end }}
{{- if ne $showComments false }}
<hr>
{{- if eq .Site.Params.analytics true }}
{{- $showKudos := true }}
{{- if eq .Site.Params.kudos false }}
{{- $showKudos = false }}
{{- else if eq .Params.kudos false }}
{{- $showKudos = false }}
{{- end }}
{{- if and (eq .Site.Params.analytics true) (ne $showKudos false) }}
<span class="post_kudos">Enjoyed this post?&nbsp;<button class="tinylytics_kudos"></button></span>
{{- end }}
{{- partial "comments" . }}

View file

@ -6,11 +6,7 @@
<!-- Back to Top button via https://github.com/vfeskov/vanilla-back-to-top -->
{{ $jsToTop := resources.Get "js/back-to-top.js" | minify }}
<script src="{{ $jsToTop.RelPermalink }}"></script>
<script>addBackToTop({
diameter: 56,
backgroundColor: '#383838',
textColor: '#c45a5a'
})</script>
<script>addBackToTop()</script>
<!-- Search index via https://victoria.dev/blog/add-search-to-hugo-static-sites-with-lunr/ -->
{{ partial "search-index.html" .}}

View file

@ -260,7 +260,6 @@ form button {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
grid-gap: 0.5rem;
/* justify-content: center; */
margin: 0.5rem 0;
}
@ -333,4 +332,20 @@ button.tinylytics_kudos:hover {
.frontmatter_tags {
font-size: 0.8rem;
color: var(--off-fg);
}
/* back-to-top styling */
#back-to-top {
background: var(--inner-bg);
height: 56px;
width: 56px;
}
#back-to-top svg {
fill: var(--link);
}
/* footnote link styling */
.footnote-backref {
text-decoration: none;
}

View file

@ -2,20 +2,20 @@
*/
:root {
--base00: #181818; /* bg */
--base01: #282828; /* off-bg */
--base02: #383838; /* inner-bg */
--base03: #585858; /* muted */
--base00: #090909; /* bg */
--base01: #1c1c1c; /* off-bg */
--base02: #292929; /* inner-bg */
--base03: #6d6c6c; /* muted */
--base04: #abaaaa; /* off-fg */
--base05: #d8d8d8; /* fg */
--base06: #cfcfcf; /* code */
--base06: #75f558; /* code */
--base07: #5f8700; /* user prompt */
--base08: #ab4642; /* root prompt */
--base09: #dc9656;
--base0A: #f7ca88; /* highlight */
--base0B: #772a28; /* logo */
--base0B: #682523; /* logo */
--base0C: #ab2321; /* hover */
--base0D: #c45a5a; /* link */
--base0D: #d36060; /* link */
--base0E: #ba8baf;
--base0F: #a16946;
}