✍️ How I Edit my Posts ⚡ Fast
Tags: webdev, blog, jamstack
Published: 2020-07-19 20:57:42

---
title: ✍️ How I Edit my Posts ⚡ Fast
published: true
date: 2020-06-19 05:00:00 UTC
tags: webdev, blog, jamstack
series: waylonwalker-redesign-2020
canonical_url: https://waylonwalker.com/blog/edit-on-github/
cover_image: https://waylonwalker.com/practice-python-online.png
---

I recently added a button to my blog, and subsequently my posts on [DEV.to](https://dev.to/waylonwalker). It's the best thing that I have done for it in a while. It makes it so easy to do quick edits.

<br>
It's an edit on GitHub button.

<br>
<br>

---

## 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.

``` php
https://github.com/<user>/<repo>/edit/<branch>/<filepath>
```

## The Final Result

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

``` jsx
<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>
```

![Edit on GitHub](https://dev-to-uploads.s3.amazonaws.com/i/sgqd23rbbusjpfxqr7bl.PNG)

> 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.

* * *


<table style='border: none;'  cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td colspan="5">
I have been writing short snippets about my mentality breaking into the tech/data industry in my <a href="https://waylonwalker.com/newsletter">newsletter</a>, 👉 check it out and lets get the conversation started.
</td>
<td colspan="1">
<h3>Newsletter Signup</h3>
<p><a href="https://waylonwalker.com/newsletter"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--uOcrEpdd--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://waylonwalker.com/waylon-walker-newsletter.png" alt="Sign up for my Newsletter"></a></p>
</td>
</tr>
<tr>
<td></td>
<td></td>
<td><a href="https://twitter.com/_waylonwalker"><img width='30' src="https://github.com/WaylonWalker/WaylonWalker/blob/main/icon/twitter.png?raw=true"></a></td>
<td><a href="https://instagram.com/_waylonwalker"><img width='30' src="https://github.com/WaylonWalker/WaylonWalker/blob/main/icon/instagram.jpg?raw=true"></a></td>
<td><a href="https://www.linkedin.com/in/waylonwalker/"><img width='30' src="https://github.com/WaylonWalker/WaylonWalker/blob/main/icon/linkedin.png?raw=true"></a></td>
<td><a href='https://www.buymeacoffee.com/bBdtMQO'>
  <img src='https://cdn.buymeacoffee.com/buttons/lato-violet.png' width='200px' />
</a></td>
</tr>
<tr>
<td></td>
<td colspan="5" align=center style="text-align: center">
👀 see an issue, edit this post on <a href='https://github.com/WaylonWalker/waylonwalkerv2/edit/main/src/pages/blog/edit-on-github.md' >GitHub</a>
</td>
</tr>
</tbody>
</table>