Quick Tip: Add Edit on GitHub Links to All Pages

It’s nice to be able to instantly edit your HTML on GitHub when you spot an error or an improvement you can make. Why not facilitate this by adding an Edit this page on GitHub link to every page? You can see an example of this on our page footer.

Use a Layout File

Make sure you’re using a Layout file so that you can add these to a single place and have the links applied to all of your pages.

• Read more about Layouts

Here’s a sample:

    …
    <footer>
      © 2019 Eleventy
    </footer>
  </body>
</html>

Add your link!

Edit your layout file to add the link. Provide the URL to the base of your repo and use the Eleventy provided {{ page.inputPath }} variable to point to the correct input file. Yes, this will also work with paginated templates.

    …
    <footer>
      © 2019 Eleventy
      <a href="https://github.com/11ty/11ty-website/blob/main/{{ page.inputPath }}">Edit this page on GitHub</a>
    </footer>
  </body>
</html>

That’s it!

• All Quick Tips

• Quick Tip: Inline Minified CSS
• Quick Tip: Add Edit on GitHub Links to All Pages
• Quick Tip: Inline Minified JavaScript
• Quick Tip: Zero Maintenance Tag Pages for your Blog
• Quick Tip: Super Simple CSS Concatenation
• Quick Tip: Adding a 404 Not Found Page to your Static Site
• Quick Tip: Fetch GitHub Stargazers Count (and More) at Build Time
• Quick Tip: Trigger a Netlify Build Every Day
• Quick Tip: Cache Data Requests
• Quick Tip: Transform Global Data using an `eleventyComputed.js` Global Data File
• Quick Tip: Use local plugins to reduce config file size
• Quick Tip: Draft Posts using Computed Data
• View all of the Eleventy Quick Tips.