The Blog Post

Since my previous post I’ve been working on a few things.

First of all, I enabled code scanning on simple-as-pie, the demo page and the repo for the interactive LOK timeline.

In doing so, I was alerted to some security issues on the timeline and demo page repos. After trying to fix those, it became apparent that they were issues inherent to the create-react-app command. Whilst researching that, I found out that create-react-app has been deprecated.

Evidently the React world moves quite quickly. Or at least faster than I’m used to (with the exception of arbitrary and sudden changes to permissions when developing mobile apps. That was ridiculous.)

Since I am not doing SPAs (single page apps) the smart move seemed to be to re-create my apps from scratch and of the frameworks mentioned by the React docs explicitly, Vite seemed to be a good fit for my uses.

Thankfully, it was very easy to migrate the simple-as-pie demo to it, and it resolved the security issues.

I was then faced with a choice. I could either migrate the timeline code to use Vite, and then manually integrate the compiled code into this site. Or, I could use this as an opporunity to integrate React (via Vite) into my site directly, making my life easier in the long run.

So I went for the latter.

Perhaps I could have used something other than Vite, but I was already slightly experienced with it. Plus, when learning about it, I think I came across a link about integrating it into Hugo. Whether it was that directly, or something else, there was nonetheless a bit of a niggle at the back of my mind which convinced me to stick with it.

Integration

Teething troubles

When googling about how to actually get this done, the page that kept coming up was a medium article by Dawid Prośba.

It was difficult to follow - in some cases there were code snippets that you could inspect, but in most cases it would say “make this file look like below” and then be followed with a broken iFrame. I tried pulling the GitHub repo that it links to, but it doesn’t work immediately (at least not for me).

Rather than putting in the work to make the repo work, I decided to follow the guide as best as I could, cross referencing with the repo, to ensure that I understood (at least roughly) how it worked.

In the end I succeeded, and created my own starter repo that people can pull/fork/do whatever they want with.

How

The more detailed instructions are on the start repo, so here are the summarised steps of how I did it:

1. Create a new branch for my website repo
2. Delete everything (with the exception of git required files)
3. Create a new Hugo site in that directory
4. Add my adpated stack theme as a submodule
5. Use Yarn to add all of the required modules (including the Hugo plugin from the author of the medium article)
6. Edit the configuration files (package.json, tsconfig.base.json, vite.config.ts) to set everything up
7. Create an assets/js folder
8. Add a tsconfig.json file there, and fill it out
9. Add the timeline source code into the js folder
10. Re-add all of the content and configs from the existing Hugo site
11. Edit the files that refer to the timeline to use the files in the assets folder
12. Edit the theme to fix any issues when building
13. Clean it all up

Even that list makes things look a lot simpler than it was in reality:

• Whilst I was learning Vite, and used it for the simple-as-pie demo, the latest version was 6.3.5 and was compatible with my installation of Node. This was still the case while I was integrating it into my site (on a Monday). Then, on Tuesday, they released version 7, and for some reason Yarn stopped checking compatibility, demanding that I upgrade Node to install version 7. I could have instead forced it to use 6.3.5, but instead upgraded Node.
• When running the dev command, it kept failing. To investigate it, I had to install a local clone of the Hugo-Vite plugin so that I could add console logs to diagnose it. It turned out that my hugo.toml configuration file, despite being valid toml according to most online validation tools, was malformed according to the Node toml module. I was able to find an online tool that used it explicitly, so I could fix it. I think this may be a case of me realising I prefer yaml to toml.

That’s all for now. I think the next step for me will be to implement GitHub actions to automatically update the server, but I want to be careful with that, and it’s not for tonight.