How to Implement Edit This Page on Github for a Hugo Website

I saw this quesiton on this thread but the answer by bep did not solve the problem.

The solution can be found in Yihui Xie’s book of Blogdown .

However, when I tried the block of codes recommended by Yihui, I still couldn’t implement this function of editing on GitHub:

{{ with .File.Path }}
<a href="https://github.com/.../{{ . }}">Edit this page</a>
{{ end }}

I tried the second block of codes on Yihui’s book, and it works.

The key trick is that you need to add {{ $.Scratch.Set "FilePath" .File.Path }} to the codes above.

I’ll summarize the solution here.

First of all, go to the GitHub repo of your website and open a post. For example, for me, I will go to this page and open a post (it does not matter which post you choose to open). For example, I’ll open this post .

Then, on top of this post, you can see this:

Click the “pen” and now you are viewing the “editing” page. Look at the url in your browser and you can find it should be something like this: https://github.com/USER/REPO/edit/BRANCH/PATH/TO/FILE¹. In the example I was showing above, the url shold be: https://github.com/hongtaoh/hongtaoh.github.io/edit/sources/content/en/blog/2020-06-14-terminal-command-basics.md.

Okay, now we will be implementing the “edit on GitHub” feature.

1. If your website only contains .md files:

First, in your config.toml, add this:

[params]
GithubEdit = "https://github.com/USER/REPO/edit/"

The above is just an example. You should use your own USER and REPO name.

Also, the code above might be dependent on your permalinks setting in your config.toml.

Here, please note that there might be replication in urls. For example, in this project , I have this:

[permalinks]
post = "/:year/:month/:day/:filename/"

Then the url of a post should be like https://mydomain/2017/08/30/amid-rising-hiv/. It does not contain post. When I open the “pen” mentioned above in GitHub, the url is like this: https://github.com/hongtaoh/guoxinban/edit/master/content/post/amid-rising-hiv.md. It contains post.

Then, what should I put in the GithubEdit? I tried https://github.com/hongtaoh/guoxinban/edit/master/content/post, but then I cliked the “Edit this page on GitHub” button in my website, the url had two posts. So I changed the GithubEdit to this: https://github.com/hongtaoh/guoxinban/edit/master/content/, and then it worked.

Then, depending on where you want to add “edit this page on GitHub”, add the following codes:

<span>
        	{{ if .IsPage}} 
            {{ if .File.Path}}
            {{ $.Scratch.Set "FilePath" .File.Path }}
            {{ end }}
            {{ with .Site.Params.GithubEdit}}
            <a href='{{ . }}{{ $.Scratch.Get "FilePath" }}'>Edit this page on GitHub</a>
            {{ end }}
            {{ end }}
</span>

If you are not sure where to add this block of these codes, study these three websites and their GitHub repos closely by yourself: Blogdown-repo , my personal website , and RUC International Journalism .

If you want to customize the style of the words of “Edit this page on Github”, you can use this in the above codes:

<a href='{{ . }}{{ $.Scratch.Get "FilePath" }}' class="btn">Edit this page on GitHub</a>

A good example is the style on Blogdown-demo . Here is the CSS of this style.

If you want to use a icon rather than the words of “Edit this page on Github”, study my setting , or that on Daijiang Li’s personal website .

2. If your website also contains .Rmd file:

The setting in config.toml is the same. However, codes that should be in your layouts are different:

<span>
        	{{ if .IsPage}} 
            {{ if .File.Path}}
            {{ $Rmd := (print .File.BaseFileName ".Rmd") }}
            {{ if (where (readDir (print "content/" .File.Dir)) "Name" $Rmd) }}
            {{ $.Scratch.Set "FilePath" (print .File.Dir $Rmd) }}
            {{ else }}
            {{ $.Scratch.Set "FilePath" .File.Path }}
            {{ end }}
            {{ with .Site.Params.GithubEdit}}
            <a href='{{ . }}{{ $.Scratch.Get "FilePath" }}'>Edit this page on GitHub</a>
            {{ end }}
            {{ end }}
            {{ end }}
</span>

In fact, no matter whether your website contains .Rmd files or not, you can use the above codes anyway…

You can also refer to this repo .

Many thanks to Yihui’s contributions.

Last modified on 2021-10-05