Adding ‘Edit on GitHub’ links to GitHub Pages using Jekyll

If you’re using Jekyll on GitHub Pages you can have your Jekyll blog posts or collection document pages with extra “Edit on GitHub”, “View source” and even “View revision history” links. Here’s how you can have those:

Edit on GitHub link

If you’re hosting the site on GitHub Pages using Jekyll, they inject the source repository into a variable called {{ site.github.repository_url }} which you can use in combination with {{ page.path }} to wire up the URL on github.com.

For a blog post

<a
  href="{{ site.github.repository_url }}/edit/{{ site.github.source.branch }}/{{ page.path }}"
>
  Edit this page on GitHub
</a>

Example for output URL of above input URL:

<a
  href="http://github.com/username/username.github.io/edit/main/_posts/yyyy-mm-dd-your-post-title.md"
>
  Edit this page on GitHub
</a>

For a collection document

For a collection document, you’ll need to use {{ page.relative_path }} instead of {{ page.path }} to get the desired behavior.

<a
  href="{{ site.github.repository_url }}/edit/{{ site.github.source.branch }}/{{ page.relative_path }}"
>
  Edit this page on GitHub
</a>

On Prose

If you are using Prose to manage your content:

<a
  href="http://prose.io/#{{ site.github.repository_nwo }}/edit/{{ site.github.source.branch }}/{{ page.path }}"
>
  Edit this page
</a>

View source link

You can add link of a source code of a post or doc on GitHub.

Source link for a blog post

<a
  href="{{ site.github.repository_url }}/blob/{{ site.github.source.branch }}/{{ page.path }}"
>
  View source
</a>

Source link for a collection document

<a
  href="{{ site.github.repository_url }}/blob/{{ site.github.source.branch }}/{{ page.relative_path }}"
>
  View source
</a>

View revision history link

Like ways you can also add view revision history link which shows all the commitments of a post or doc.

Revision history link for a blog post

<a
  href="{{ site.github.repository_url }}/commits/{{ site.github.source.branch }}/{{ page.path }}"
>
  View revision history
</a>

Revision history link for a collection document

<a
  href="{{ site.github.repository_url }}/commits/{{ site.github.source.branch }}/{{ page.relative_path }}"
>
  View revision history
</a>