Because jekyll generates static html, it doesn’t have a native way to include comments on a website. It’s possible to have comments by using something like disqus, but I was looking for something that I can control myself.

After some thinkering and experiments, I’ve came to the following solution:

How?

  • I created a file _includes/comments.html :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
----

## Comments ##

<form class="myForm" method="POST" action="/contact/index.php">
	<input type="hidden" name="url" value="/jekyll/2018/06/09/comments.html">

	<p>
		<label>Name
			<input type="text" name="name" required>
		</label> 
	</p>

	<p>
		<label>Email 
			<input type="email" name="email">
		</label>
	</p>

	<p>
		<label>Your comment
			<textarea name="comment" maxlength="500" required></textarea>
		</label>
	</p>

	<p><button>Submit</button></p>

</form>
  • In the posts where I want a comment box I include the line {% include comments.html %}.
  • I created a file /contact/index.php on my website :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Notice</title>
    </head>
    <body>
	<?php 
		// Only handle request if there is a 'url'
		if (isset($_POST['url'])) {
			// Format the data
			$comment = preg_replace('/.+/', ' > $0', htmlspecialchars($_POST['comment']));
			$url = htmlspecialchars($_POST['url']);
			$bericht = " * From: " . htmlspecialchars($_POST['name']) . "\n" . 
				   " * Date: " . date("Y-m-d h:i:sa") . "\n\n" . 
				   $comment . "\n\n" .
				   " " . htmlspecialchars($_POST['email']) . "\n\n";
			$headers = 'From: comments@janwagemakers.be' . "\r\n" .
				'Reply-To: comments@janwagemakers.be' . "\r\n" .
				'X-Mailer: PHP/' . phpversion();
		 	// Send the email
			if(!mail('comments@janwagemakers.be', 'Contact-' . $_POST['url'], $bericht, $headers))
			{
				echo "<H1>Mailer Error</H1>";
			}	
			else
			{
				echo "<H1>Comment is send and waiting for moderation</H1>";
			}
			// Back to the original page
			header("Refresh:5; url=/jekyll" . $url);
		} 
	?>
    </body>
</html>

The working

When a person adds a comment, the data that’s entered is send to /contact/index.php, which formats the data and send it as and email. The email looks like this:

1
2
3
4
5
6
7
8
Subject: Contact-/wordpress/2018/06/09/comments.html

 * From: Jan Wagemakers
 * Date: 2018-06-09 12:48:07pm

 > This is just a comment to test if everything works.
 >
 > Jan...

Which I can read and copy/paste to the original post to add the comment.


Comments


  • From: Jan Wagemakers
  • Date: 2018-06-09 12:48:07pm

This is just a comment to test if everything works.

Jan…


  • From: Jan Wagemakers
  • Date: 2018-06-10 08:33:56pm

After a day I’ve already received 2 spam comments. So, I’ve added a google reCAPTCHA. I found this tutorial very clear to understand.