Hugo + Collected Notes for a more modern static website solution.
I love websites. I love static sites in particular. But I know that sometimes it’s just not practical to write and post only from your computer. With my hands full raising a family, I do a lot more development in stops and starts from my phone these days than I thought I ever would.
So I brought together everything that’s great about Hugo plus everything that’s great about sharing your 3AM thoughts with the world from your phone, thanks to Collected Notes. I put it in a new Hugo site template with a fancy new theme I call Quint.
You can deploy the Quint site template with one button (this button):
The Quint template can use the Collected Notes app as a CMS and also saves your posts to the site repository, for redundancy. It fetches new posts each time you build, and if you’re deploying via Netlify or GitHub Actions, you can use a webhook to deploy the site whenever you make a new post with Collected Notes.
To set up your own site:
- Deploy the Quint template to Netlify with the button above, or clone the repo if you plan to use another deployment solution.
- Sign up for Collected Notes if you haven’t already (there’s a free plan) and download the Collected Notes app on your iPhone.
- Update the
utils/fetch-posts.jsfile to use your Collected Notes site name. - Allow the GitHub Action to push changes back to your repository to save your posts. Under Settings > Actions > General > Workflow permissions, choose Read and write permissions.
Netlify will trigger a new build each time you push to your site repo, or, if you have a Collected Notes Premium subscription, you can set a Netlify Build Hook URL in your Collected Notes site settings to automatically redeploy the site when you make a post or update an existing post.
I hope this template helps out busy people like you! I’m using this solution myself, of course, to write the next chapter of my one-bag era – with my phone in one hand and a coffee in the other.