Direct mdx commit to githubFebruary 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.
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
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
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
gitserver. It has to be in a specific structure, with specific details, so that the server knows how to process it.
I don't know exactly how flexible
mdxis 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.
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
February 19, 2020 at 2:21pm
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.
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.
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.
February 21, 2020 at 2:47pm