✍️ How I Edit my Posts ⚡ Fast

Waylon Walker - Jul 19 '20 - - Dev Community

I recently added a button to my blog, and subsequently my posts on DEV.to. It's the best thing that I have done for it in a while. It makes it so easy to do quick edits.



It's an edit on GitHub button.


Discovering Errors

I refer back to my old posts quite a bit, sometimes I find errors in them. Honestly, most of the time its too much effort to load up my editor make the change and git add and git commit. It's not much, but when I am referring to my own post generally I am just trying to get something done and don't have time for that.

Honestly most of the time its too much effort to load up my editor make the change and git add and git commit.

The slug

the last part of the url

The slug that I am getting from gatsby is formatted as /blog/this-post/. Note the trailing slash and missing file extension, thats where the ${slug.slice(0, -1)}.md comes in.

Creating The Full Link

from post to edit on github

GitHub makes it super easy to form a URL that puts you right into edit mode on the exact post you are looking for. This is format for the URL... you can always figure it out easily by clicking edit on one.

https://github.com/<user>/<repo>/edit/<branch>/<filepath>
Enter fullscreen mode Exit fullscreen mode

The Final Result

Wrapping that URL up in a short snippet gave me the following result.

<p style={{ display: 'flex', justify: 'center', textAlign: 'center', margin: '3rem auto' }}>
  <span role='img' aria-label=''>👀</span>
  see an issue, edit this post on 
  <a 
    href={`https://github.com/WaylonWalker/waylonwalkerv2/edit/main/src/pages${slug.slice(0, -1)}.md`} 
    alt='edit post url' 
    title='edit this post'
   >
  <FiGithub /> 
  GitHub
  </a>
</p>
Enter fullscreen mode Exit fullscreen mode

Edit on GitHub

here is a screenshot

Quick Value

This was a super quick change that brought me a lot of value without much effort. I will probably change up the styling/layout of it in the future. For now, I have something that functions, and I can get back to creating content.


I have been writing short snippets about my mentality breaking into the tech/data industry in my newsletter, 👉 check it out and lets get the conversation started.

Newsletter Signup

Sign up for my Newsletter

👀 see an issue, edit this post on GitHub
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .