Render markdown from .md files within a separate GitHub repo

[Forfold]

Hello,

I’m wondering if it is possible to render a markdown file within Hugo based off of a link to a markdown file. The reason being is that it would be nice to have some of the readmes from our repo on our Hugo site, without having to manage the same content in two files.

e.g. Say in Hugo I have a contributing.md file, and in that file I only want to render what is at https://github.com/target/goalert/blob/master/CONTRIBUTING.md

Would this be possible?

Thanks,
Nate

[maiki]

You could mount the repo in question and use it’s CONTRIBUTING.md as you content. There’s also https://gohugo.io/functions/readfile/#readout. Probably other ways, as well.

[Forfold]

Interesting, yeah I was looking into the readFile function but I wasn’t sure if it would support a link, since it says it’s for local files

[maiki]

@Forfold

since it says it’s for local files

I presumed you meant local file. To load remote data, maybe you can use some API to get a JSON representation of the file in question. But there is not currently a way to load markdown from a remote endpoint in Hugo.

Hugo modules is still an option (making remote files local, cached).

[Forfold]

I ended up getting it to work with this, so now I just need to figure out how to store my secret and pull that in

renderMarkdownFromGoAlert.html:

 <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<div id="markdown" style="height: 100%;"></div>
<script type="module">
  import { Octokit } from "https://cdn.pika.dev/@octokit/rest";

  const octokit = new Octokit({
    auth: "MY_SECRET",
    userAgent: "goalert",
    baseUrl: "https://api.github.com",
  });

  octokit.repos
    .getContent({
      owner: "target",
      repo: "goalert",
      path: "{{ .Get 0 }}",
    })
    .then((result) => {
      // content will be base64 encoded
      var content = atob(result.data.content).toString();
      // replace rel links from github markdown with abs links
      var toUrl = "https://github.com/target/goalert/blob/master";
      content = content.replace(/\]\(\./g, "](" + toUrl);
      // render within div
      document.getElementById("markdown").innerHTML = marked(content);
    });
</script>

and then in my _index.md I have {{< renderMarkdownFromGoAlert "CONTRIBUTING.md" >}} where that parameter is the path to the file in our repo. Working great so far!