Static Comments With Serverless and Staticman - Part 2

Jordan Patterson
Jordan Patterson

Here it is. The blog post so epic, it's taken me more than 2 years to write it. Hang on tight and get ready to be disappointed.

The rest of this is actually pretty simple. We need to authorize the staticman lambda function to connect to our repository and then we just need to post to the serverless function that was created in Part 1. For both of these we will need the endpoint for the lambda function. You can get it from the output in GitHub Actions, or from the API Gateway trigger in AWS Lambda console. In my case, the endpoint is https://y1w2akmejb.execute-api.us-east-2.amazonaws.com/prod/.

To connect the function, first invite the bot user (created in Part 1) to collaborate on your repository. Then visit <YOUR_ENDPOINT>/v2/connect/<GITHUB_USERNAME>/<REPO_NAME>. This should will allow you to accept the invite and give the user access to the repository.

Now we just need a form to post new comments. Comments should be posted to <YOUR_ENDPOINT>/v2/entry/<GITHUB_USERNAME>/<REPO_NAME>/<BRANCH_NAME>/comments. And that's really all there is to it.

Enter SPAM

Why can't we have anything nice?

I thought everything was finished and working until I started getting lots of spam comments. Would you like to buy a yacht?

Luckily, staticman has a built in moderation feature. Just add moderation: true to your staticman.yml file under the comments section and staticman will create a pull request for you to approve before publishing comments to the main branch. How nice.

I have only just enabled this feature. So hopefully it goes well.

I would also recommend enabling reCaptcha.

In staticman.yml add the following to the comments section:

reCaptcha:
  enabled: true
  siteKey: "YOUR-SITE-KEY"
  secret: "YOUR-ENCRYPTED-SECRET"

In your form add the following hidden fields:

<input type="hidden" name="options[reCaptcha][siteKey]" value="YOUR-SITE-KEY">
<input type="hidden" name="options[reCaptcha][secret]" value="YOUR-ENCRYPTED-SECRET">

And finally, add the reCaptcha element to the dom:

<div class="g-recaptcha" data-sitekey="YOUR-SITE-KEY"></div>
<script src='https://www.google.com/recaptcha/api.js'></script>

The end

So leave a comment below.

I said this would be disappointing, didn't I?

Say Something

Comments

Travis
Nov 13, 2023 at 7:46 pm

Awesome work Jordan! Definitely a few hoops to jump through but, honestly not that bad for what you get in return. Definitely something to be said for owning your blog comments and not having to rely on a third party service for hosting them. Also, from a performance and particularly an SEO standpoint, the fact the comments can be server side rendered (e.g. using an SSG, Next JS, etc) as opposed to client side rendered from a JS widget is HUGE. Googlebot is usually the first pass crawler, and it generally only scrapes the pre-generated HTML. Some of their other bots can render JS but, that often takes weeks or months. That can put a huge damper on getting the full value of that user generated content. Anyways, thanks for sharing the tutorial! :-)