menu

Gatsby.js

Fast in every way that matters. Gatsby is a free and open source framework based on React that helps developers build blazing fast websites and apps.

Channels
# All channels
view-forward
# General
view-forward
# I Made This
view-forward
# Meta
view-forward
# Themes
view-forward
Team

Direct mdx commit to github

February 18, 2020 at 4:24am

Direct mdx commit to github

February 18, 2020 at 4:24am
I am creating a Gatsby site through mdx. Also started writing article on it https://dev.to/nabendu82/the-dev-to-project-with-gatsbyjs-1-10d4
I wanted to know if there is a way by which i can take the mdx file from any user(through a form) and commit it to my github repo automatically. This way any user can submit the mdx and github will be updated and automatically build through netlify and the post will be displayed on the site.
I think i have to use Github API, but not getting where to start. Help appreciated.

February 18, 2020 at 5:27am
Do you have a server you can use to handle the transaction with Github? In order for somebody to commit to your repo, they need the correct privileges. Which means the easiest way to do it would be to use your specific api key, but you don’t want to expose that publicly, so it can’t be a front-end process.
  • reply
  • like
I’d also be veeerryy careful with that, because people could upload all kinds of arbitrary code, and it would be built into your website automatically, which would cause it to run on any client that hits your website. That’s a very serious security risk
  • reply
  • like
But i can add the github API key in the netlify account. Is it ok?
  • reply
  • like
It should be fine, so long as the proper precautions are taken. Do you want literally “any user” to be able to post, or just certain ones that fit certain criteria?
  • reply
  • like

February 19, 2020 at 12:37am
Oh, okay... I just read your blog post. I see what you're trying to do. You want to make a blogging platform that people can use, similar to how dev.to does it.
Since you're using Netlify, you can probably use their cloud functions as your backend.
You should be able to use github's "app authentication" process, in order to use an App Id and secret to authenticate with Github, and commit files. It looks like the endpoint permissions for that are good for what you're trying to do.
Check out Github's documentation here. I think it goes "authenticate as app" -> "authenticate as installation" -> "commit".
You might be able to use this tutorial for actually committing a file to Github. It's not as simple as POSTing some basic file content to a Rest API, since you're dealing with a git server. It has to be in a specific structure, with specific details, so that the server knows how to process it.
like-fill
1
  • reply
  • like
I don't know exactly how flexible mdx is when using it with Gatsby, since I don't really use it, but you may want to limit what users can do. This might involve restricting access to only specific "shortcodes", maybe some MDX AST processing to sanitize inputs.
Edited
  • reply
  • like
Btw, you'll be doing this in Nodejs, in your cloud function. Your front-end will have the text editor UI, which will need to POST to your cloud function endpoint, which will need to take the data, authenticate with and send to Github
  • reply
  • like

February 19, 2020 at 2:21pm
Thanks again for the awesome explanation. Right now in version 1, i think i will take the mdx from user via a form and then check and commit it myself. But this is possible and i am happy to know, as will definitely do it in future.
  • reply
  • like

February 21, 2020 at 4:16am
I think this is not a good idea. I need a backend or a CMS system to make something like dev.to I had earlier worked with contentful for my site amazinghampi.com I am not finding many article or way to do it with gatsbyjs ie authentication and then posting a md file like dev.to. Do i need to do it with React+node? please suggest.
  • reply
  • like
It doesn't necessarily have to be node; it could be any kind of server language. But it really should be a client+server architecture. It is definitely possible to do it on the front-end, but this type of process inevitably requires various secrets that really should be kept, well... secret. Exposing them would create all sorts of vulnerabilities, and allowing anonymous access to your data store is pretty much the same thing.
In order to do this securely, you must be in control of the transaction; this is vital. You have to keep your keys safe, and make sure that the input is safe before letting it pass. Anything that gets sent to/from the front-end can be exploited, which is one reason doing this kind of thing on the front-end exposes your secrets, no matter how you try to obfuscate them. Relying on the front-end for data sanitation, as well, is very much insecure, because it requires javascript (and javascript can be turned off, for one). I could easily scrape your keys, spoof your domain, and send whatever I wanted to your data store without ever hitting your javascript safeties.
Gatsby itself wouldn't be doing any authentication. You can, or even should, have the front-end authenticate users that are posting, mainly for accountability. That is, you want to know who posted what, when, and how. You could use any authentication process to authenticate users on the front-end, so long as you can also validate that authentication on the back end. You could use Firebase, Auth0, or even Facebook.
Firebase would actually be a good one, because they have a pretty generous free-tier. Just an example of what you could do: keep your content in a Firebase data store, and configure Gatsby to load the content from there in order to generate the pages. Your users can hit your front-end, authenticate with Firebase (it supports Google OAuth, Facebook OAuth, and others, I'm pretty sure), and write a post. The front-end would send the post to a Google Cloud Function, which would validate the authentication information, sanitize the input, and store the data in datastore. That would trigger a webhook to wherever your Gatsby site is stored in order to trigger a build, which fetches all the data, and rebuilds the site with the new content.
For an extra layer of security, you can add a human element... a moderation layer. When the server has done what it needs to do and is ready to store the data, it puts it in an isolated environment that doesn't get built into the front-end until it has been approved.
  • reply
  • like

February 21, 2020 at 2:47pm
Great explanation again. Got a good course in udemy with Gatsby + Firebase. https://www.udemy.com/course/gatsby-js-firebase-hybrid-realtime-static-sites/
  • reply
  • like