Installing Jekyll Staticman Plugin

Hello 😄#

I was previously using the Disqus comment plugin on my blog. But I finally got acquainted with Staticman, which I wanted to try for a long time but never had the chance. In this article, I'll give you detailed information about Staticman installation and usage. Although the installation process is a bit challenging, I'll explain it step by step and hope you'll benefit from this process. 😌

What is Staticman?#

Staticman is a fantastic library developed for static sites that is completely under your control. It can be used for various functions such as comment section, guestbook or contact form. 🐒 However, since the documents in the repo are not updated according to newer versions, you may experience difficulties if you follow those documents. Don't worry, I'm here to prevent you from hitting the wall! 🥰

Required Materials 🥗#

Firstly, we'll need the following tools:

• Heroku Membership
• Creating Github Application
• Github Tokens
• A Second Github Account

First Step: Create a Different Github Account#

Create a new Github account. You can create this account with a name like mycoolyname-bot for example. Babanın Botu

Deploy on Heroku#

1. Go to Heroku site and create a membership.
2. Then, go to Staticman Repo and select the dev branch here. Because some updates in the main branch are not yet merged. Click the Deploy Heroku button at the bottom of this section.

1. Deploy your application by making the relevant settings.

For now, that's enough for the process, we'll configure the settings in detail in the following steps.

Github Applications#

1. First, create an application from Github Apps. Don't forget to customize the application name, description and Heroku address according to yourself.

Private Keys#

Click the Generate a private key button in the Private keys section and save the generated file. We'll use the information in this file in Heroku environment variables.

Github Tokens#

1. Go to Github Tokens page and create a new token. Give the following permissions to your token:

After creating, you'll be given a code. Save this code as we'll use it in the following steps. Then click your created application and click Install from Install App section.

In this step, you can select whether to use the token in all your repos or only in a specific repo. I prefer to use it only in a single repo.

Then click the Install button.

Github Bot#

We'll invite our newly created Github account to our repo. Go to our repo, click the Settings tab. Then click add people from Collaborators section and add your bot account you created. Accept the invitation by logging in with your other account.

Github settings are completed here! 🤯

Heroku Settings#

Go to the Heroku panel and click your created application. Go to Config Vars section from Settings and click Reveal Config Vars.

Environment Variables#

You should create the following variables here:

• GITHUB_APP_ID
• GITHUB_PRIVATE_KEY
• GITHUB_TOKEN
• RSA_PRIVATE_KEY

Fill these values with the tokens and private keys we created before.

Creating RSA Key#

ssh-keygen -m PEM -t rsa -b 4096 -C "writeyourmailhere" -f ~/.ssh/staticman_key

Then to see the key you created:

head -2 ~/.ssh/staticman_key

Output should be as follows:

-----BEGIN RSA PRIVATE KEY-----
MIDIGOMEDAGLARIBLA12930219312

Alternatively, you can create RSA key using openssl:

openssl genrsa -out key.pem

If you can't use terminal, you can use online RSA key generators. You can visit Online RSA Key Generator site to create your key.

Staticman Settings#

Staticman settings are stored in YAML format. The staticman.yml file should have the following content:

comments:
  allowedFields: ["name", "email", "website", "message", "reply_id"]
  allowedOrigins: ["localhost", "www.yuceltoluyag.github.io"]
  branch: "master"
  commitMessage: "Comment from {fields.name} on {options.slug}"
  filename: "entry-{@timestamp}"
  format: "yaml"
  generatedFields:
    date:
      type: "date"
      options:
        format: "timestamp-seconds"
  moderation: true
  name: "Yücel Toluyağ"
  notifications:
    enabled: false
  path: "_data/comments/{options.slug}"
  requiredFields: ["name", "email", "message"]
  transforms:
    email: md5
  reCaptcha:
    enabled: false
    siteKey: "12321321"
    secret: "123213213213"

Staticman Form Elements#

To send your form data, you can use the fields tag in the value sections. A sample form element would be as follows:

<input
  class="textfield__input"
  name="fields[name]"
  type="text"
  id="comment-form-name"
  placeholder="Your Name"
  required
/>

Staticman Encryption#

To ensure security in static sites, using encryption is quite important. For encryption, you can use the following structure:

https://{YOUR_HEROKU_ADDRESS}/v3/encrypt/thingtoencrypt

Staticman Postman Tests#

To make tests via Postman, you'll need to make the correct settings. You should configure the field and options settings in the Form elements section correctly.

Live Test

Staticman Sample Codes#

Take a look at these files friends, I'm sure your mind will light up 🎃

• comments.html
• comment.html
• comment_form.html

• main.js

• _comment.scss

• Live Test => Comment

• Source Files => Free Download

Conclusion#

Now you don't have to use Disqus anymore! Staticman is quite useful and customizable even though it has some flaws. Although there are areas that need to be improved, you can easily manage comments on your static sites for now. ✨

Source Files