I’m creating a website which is meant to be a repository of student projects for our college. One of the more important functionalities of the website needed to be allowing students to submit their own work via a form, which could be then uploaded as a new post on the website. I’ve created a new archetype for default submissions and I imagined that the form could have fields which map directly to the relevant frontmatter.
I’ve done some reading on what already exists.
In this blogpost, the author mentions how it might be possible to leverage Netlify forms to process submissions.
Going through old issues, I noticed this script which a user had shared which appears to be converting a Google Sheets document into YAML strings, which are saved as text files.
From the same thread this user quotes downloading Google Sheets data to JSON files and using that as content.
The flow I imagined was as follows:
Person uses a form to make a submission. The fields correspond to the relevant front-matter.
This form data is saved in a Google Sheets document via Zapier, with one user per row.
At regular intervals, a day or two (to prevent spam posting and occasional review if necessary), the rows are read in and converted to .md files. We can convert Sheets to a JSON feed comfortably, and since Hugo recognizes JSON, it should be formatted appropriately.
Is this possible or am I expecting too much out of this? If my proposed flow isn’t possible, is there any way to generate new .md files in content with user-submitted content, preferably from a form?
The most versatile way to achieve the above -provided of course that you do not worry about the Data Collecting practices of Google- would be indeed to use a Google form to populate a Google Spreadsheet with the respective parameters.
THEN (and this is the magic part)
Use this extension to output the Google sheet as a JSON.
As you posted above, indeed you can build a pipeline outside Hugo to schedule access to this Google sheet JSON and then re-build the website.
Thank you Alexandros, this was very helpful in getting me set in the right direction. I thought I’d reply once I had found a way that others could also use.
To anyone looking to do the same thing, I hope this blows your mind like it did for me!
If, as you say, I am okay with Google’s data collection practices, Google Sheets is the easiest way to go about this. Luckily, I happened upon this post by Bryan Klein which was exactly what I was looking for. He presents a way to parse each row of the Sheet into a separate .md files with Python and a convenient way to trigger builds from right within Google Sheets (just at the press of a button!). He was kind enough to get on call with me today and helped me figure out how to run this properly. I’m posting the final script I’ve got working in this Gist: https://gist.github.com/thedivtagguy/49951b2858f812614a097c45041dab1a
The current pipeline is as follows:
User submits through Google Form. This updates the Sheet.
I run the Python script periodically, writing new rows to my local files containing my Hugo website.
Push to main Github repo, triggering build at Netlify.
Essentially, we’re able to use Google Sheets as a database! All you have to do is make sure that the frontmatter matches the column headings. But you can do this with practically anything that stores things in a spreadsheet and has an accessible API.
There are ways to automate this further. I am now looking to add code that could commit to my repo within Python as well (if anyone knows how, additions to the gist are welcome), so I don’t even have to do that manually. Further, the script could be run at periodic intervals on its own so that the process runs itself!
This is very exciting stuff and very simple to set up. I hope this helps future users looking to add something like this to their Hugo website. As I said, if anyone would like to add to the code to help automate it further, I’d love to connect!