{"data":{"markdownRemark":{"html":"

This tutorial will take ~30 minutes or so. We'll take a Gatsby starter and add comment support via StaticMan.

\n

Prerequisites

\n

To follow this tutorial you will need:

\n\n

NPM or yarn

\n

This tutorial assumes you have installed yarn. You can use npm instead, but you will need to convert the yarn comments to their npm equivalents. We recommend yarn.

\n

Fork the starter

\n

To start the tutorial, fork this repo on GitHub. Once you have your own fork, clone that.

\n

Detailed steps:

\n\n

You should now have a local copy of your freshly cloned repository in a directory called staticman-tutorial

\n

Start Gatsby

\n

Start your freshly cloned Gatsby site.

\n\n

At this point Gatsby should open chrome and load your Gatsby site. It should look like this:

\n

\"Blog

\n

Click on the first blog post. Comments are only visible on individual blog posts, not on the homepage.

\n

Comments section

\n

Open the src/components/PostTemplateDetails/index.jsx file. Online 35 you should see const commentsBlock = <div />.

\n

Replace the <div /> with a \"Comments\" heading. It should look like this:

\n
const commentsBlock = (\n  <div>\n    <hr />\n    <h2>Comments</h2>\n    <p>No comments yet.</p>\n  </div>\n);
\n

Now you should see this heading appear at the very bottom of the post.

\n

Let's move {commentsBlock} from line 72 up to line 61, below the {tagsBlock} line. Now the comments should appear directly underneath the tags.

\n

Connect StaticMan

\n

We need to give StaticMan access to our GitHub repository. You do this on your fork.

\n\n

Now you've invited StaticMan to your project. Next, tell StaticMan to accept your invitation. You do that by visiting a special URL. You need to know your GitHub username (where your fork lives) and the repository name (probably staticman-tutorial).

\n

Then put those two values into the following URL:

\n

https://api.staticman.net/v2/connect/{your GitHub username}/{your repository name}

\n

The URL should look something like this:

\n

https://api.staticman.net/v2/connect/GatsbyCentral/staticman-tutorial

\n

Open your URL in your browser, and you should see the message \"OK!\".

\n

StaticMan config file

\n

Now that you've connected StaticMan, the next step is to configure it.

\n

Create a new file at the root of your repository called staticman.yml. Copy the contents from the StaticMan sample config file.

\n
\n

NOTE The filename must be exactly staticman.yml, not .yaml or otherwise.

\n
\n

The sample configuration is fine for this tutorial. You can read the comments in the file to learn more about the available options.

\n

Change path

\n

We need to make one change to the staticman config file. On line 68 remove {options.slug} from the path. It should look like:

\n
path: \"_data/comments\"
\n

Commit & push

\n

At this point, you need to commit your changes. Hopefully you're familiar with git already. If not, try the following commands in a terminal.

\n\n

Now when you look at your fork on GitHub, you should see the staticman.yml file.

\n

Comment form

\n

Now we want to create a form to submit comments. This is just a standard HTML form.

\n

First, we need to construct the correct URL for the form. Just like above, you will need your GitHub username and fork name (staticman-tutorial). Then you create a URL like so:

\n
https://api.staticman.net/v2/entry/{your GitHub username}/{your fork name}/master/comments
\n

Edit the src/components/PostTemplateDetails/index.jsx file again. After line 39, add a form like this:

\n
<h3>Add a comment</h3>\n<form\n  method=\"POST\"\n  action=\"YOUR_FORM_URL\"\n>\n  <input\n    name=\"options[slug]\"\n    type=\"hidden\"\n    value={this.props.pathContext.slug}\n  />\n  <input name=\"fields[name]\" type=\"text\" placeholder=\"Name\" required />\n  <input\n    name=\"fields[email]\"\n    type=\"email\"\n    placeholder=\"Email\"\n    required\n  />\n  <textarea name=\"fields[message]\" placeholder=\"Comment\" required />\n  <button type=\"submit\">Submit Comment</button>\n</form>
\n

Style the form

\n

The form is unstyled at this point. Styling it is beyond the scope of this tutorial. It's just a standard HTML form, so you can style it using your preferred method.

\n

Commit and push

\n

As above, commit these changes, and push them to GitHub.

\n\n

Test comment

\n

Type a name, email, and comment. Then click the \"Submit Comment\" button. You should see a JSON success message if your comment was submitted. Now look at your GitHub fork. You should see a new Pull Request with your test comment. Merge this PR.

\n\n

This commit is now in GitHub.

\n

Pull

\n

After merging the PR, you need to pull.

\n

git pull

\n

Check that you have a file in _data/comments. This means you have successfully pulled your test comment from GitHub.

\n

Source comments

\n

Now we have a comment, but it's not yet visible on the site. First, we need to add the _data/comments directory to our Gatsby config. This tells Gatsby to read this directory for comments.

\n

Install the gatsby-tranformer-yaml plugin like so:

\n

yarn add gatsby-transformer-yaml

\n

Open the gatsby-config.js file.

\n

After line 39, enable this plugin and create a new gatsby-source-filesystem by adding these lines:

\n
'gatsby-transformer-yaml',\n{\n  resolve: 'gatsby-source-filesystem',\n  options: {\n    path: `${__dirname}/_data/comments`,\n    name: 'comments',\n  },\n},
\n

You need to restart Gatsby at this point. You do that by pressing ctrl+c in the terminal, then running gatsby develop again.

\n

Now your comment should be loaded into Gatsby's node system.

\n

Load comments

\n

Open the src/templates/post-template.jsx file. Edit the GraphQL query to add the comments. Add the following after line 52.

\n
allCommentsYaml(filter: { slug: { eq: $slug } }) {\n  edges {\n    node {\n      id\n      name\n      email\n      message\n      date\n    }\n  }\n}
\n

This will load the comments into the post template.

\n

Render comments

\n

Open the src/components/PostTemplateDetails/index.jsx file again.

\n

Add the following after line 9.

\n
const comments =\n  this.props.data.allCommentsYaml && this.props.data.allCommentsYaml.edges
\n

Above line 37 (const commentsBlock =) add the following:

\n
const commentsList =\n  comments && comments.length ? (\n    comments.map(comment => (\n      <div key={comment.node.id}>\n        <p>\n          Name: {comment.node.name}\n          <br />\n          Comment: {comment.node.message}\n          <br />\n          Date: {comment.node.date}\n        </p>\n      </div>\n    ))\n  ) : (\n    <p>No comments yet.</p>\n  )
\n

This is a bit complicated. It's doing several things.

\n\n

The next step is to replace the <p>No comments yet.</p> block on line 58 with our new commentsList which looks like:

\n
{commentsList}
\n

When you save this file, you should see your test file appear above the comment form.

\n

Success!

\n

You can see all the changes we made in this tutorial on GitHub here.

\n

Next steps

\n

This tutorial does not cover any styling. You can style the form and comment output using your preferred method.

\n

The comment output could also look much better. A few obvious upgrades include:

\n\n

The goal of this tutorial was to show you the basics of how to connect StaticMan and Gatsby. Hopefully we've done that. If you found the tutorial useful, please let us know in the comments or consider sharing it on twitter, facebook, etc.

\n

Questions

\n

If you have any issues with the tutorial, let us know in the comments below.

","excerpt":"This tutorial will take ~30 minutes or so. We'll take a Gatsby starter and add comment support via StaticMan. Prerequisites To follow this…","timeToRead":7,"frontmatter":{"date":"June 05, 2018","path":"/tutorial-comments-with-staticman-in-gatsby","title":"Tutorial: Comments with StaticMan in Gatsby"}},"relatedPosts":null,"allCommentsJson":{"edges":[{"node":{"id":"ea3a8d33-e5ac-5d74-b932-e2e44573c790","name":"Sukil","date":1529053435,"fields":{"messageHtml":"

Hi, may I suggest adding labels to the tutorial form, just as in here? They're good for accessibility purposes. (Also, this field doesn't have a label associated with it). Thanks!

"}}},{"node":{"id":"b914678c-c36c-5e0e-affe-5046c54848c3","name":"Callum Macdonald","date":1529079558,"fields":{"messageHtml":"

Labels sounds like a great idea. I'm not 100% sure what you mean exactly about putting them in the tutorial itself though. Can you share any more info on that? Maybe we can do a tutorial on labels in Gatsby! :-)

"}}},{"node":{"id":"31efee8a-949e-5ae0-8501-684fb0e5c0cd","name":"Stephan Weinhold","date":1534700534,"fields":{"messageHtml":"

Great tutorial! This helped me a lot, thanks. But (and there's always a but): you say \"NOTE The filename must be exactly staticman.yml, not .yaml or otherwise.\" just to tell us \"you should see the staticman.yaml file\" a few lines below. Guess that's a typo, isn't it?

"}}}]},"allRatingsJson":{"totalCount":9,"edges":[{"node":{"id":"7e589d1d-4bdf-55c0-8c62-0012466b72cd","rating":"5"}},{"node":{"id":"58a781c2-6e4a-5431-b5bd-763ca94ae6ac","rating":"5"}},{"node":{"id":"c5807c06-e772-5202-90f9-a5158ed38f2e","rating":"4"}},{"node":{"id":"5034e08a-3154-59ca-b6be-02ab242ca5b6","rating":"3"}},{"node":{"id":"e97d8804-d993-5d71-8456-255ae05a2f7b","rating":"4"}},{"node":{"id":"ad0271a6-98dd-596e-a894-fd6290b465e2","rating":"5"}},{"node":{"id":"1ec4636f-3d0c-58bc-b5d1-be4fd2736520","rating":"5"}},{"node":{"id":"b7dd6ec4-f100-52ad-91f3-8ec3c35572a7","rating":"4"}},{"node":{"id":"50b3b725-d40d-5247-b7f9-15ff89460424","rating":"4"}}]}},"pageContext":{"tags":[]}}