Migrate to Hugo

[dscho]

Rather than trying to continue running something home-grown, let's switch to a proper static site generator.

This partially addresses some concerns I raised after integrating the wiki pages and the problems we ran into when the workflow to update the HTML pages failed in a PR by a contributor: While it still does not offer convenient before/after views, it at least allows to preview the changes in a fork, just like this here PR can be previewed at https://dscho.github.io/gitgitgadget.github.io/

So why even bother with a powerful site generator like Hugo for something as small as GitGitGadget's home page? Well, here are a couple of reasons:

• As you can see https://dscho.github.io/gitgitgadget.github.io/architecture, it re-adds the syntax highlighting in code blocks that were lost in the transition away from the wiki.
• It will make auto-generating a navigation bar (or a central index page) much easier.
• It will make it easier to maintain a unified look-and-feel, e.g. when adding something like an "Edit on GitHub" button.
• It should make it somewhat easier to make the site responsive because of a much more standard way to build the site.
• The migration of the wiki pages was meant as a blueprint I could follow in Git for Windows, where I want to stop wasting my time battling spam and vandalism, and any subsequent work over here that can help with that can increase the synergy between both projects.

[dscho]

For the record, I present the before/after views here: e463157

EDIT: Here is the table (without the nice Swipe/Onion Skin views, though, for that, you need to navigate to above-mentioned commit):

Before	After

[dscho]

For the record, I used Playwright to generate these screenshots, using this take-screenshot.js script:

import { chromium } from 'playwright'

(async () => {
  const [ url, path ] = process.argv.slice(2)
  if (!url) throw new Error(`Need a URL!`)
  if (!path) throw new Error('Need a path to save to!')

  // Or 'firefox' or 'webkit'.
  const browser = await chromium.launch()
  // use this in GitHub Actions to avoid having to download the headless browser;
  // you still have to run `npm install -g playwright` first, of course:
  // const browser = await chromium.launch({ channel: 'chrome' })
  const page = await browser.newPage()
  await page.goto(url)
  await page.screenshot({ path, fullPage: true })
  await browser.close()
})().catch(e => { throw e })

in a loop:

for page in index architecture reply-to-this
do
  node ../take-screenshot.js https://gitgitgadget.github.io/$page.html $page.png
done

in a worktree that was newly created via git worktree add --orphan screenshots, then committing the images, then running the loop again with the base URL set to file:///path/to/public/, then committing again and then I published the commit via git push origin HEAD:refs/screenshots/pr-23

This should all be easy to automate, in case we want to have this for future PRs.

One way to automate this would be via a new GitHub workflow that

• triggers on workflow_dispatch
• takes the PR number as input (and potentially a list of pages, but it could determine them from the PR diff by default)
• pushes to refs/screenshots/pr-<number>-<timestamp> to avoid naming clashes
• downloads the PR build's pages artifact and uses that to compare against the current version at https://gitgitgadget.github.io/

This would of course then also be neat to have in Git for Windows, once https://github.com/git-for-windows/git-for-windows.github.io is converted to Hugo, and it would obviously also be neat to have in https://github.com/git/git-scm.com/, too.