# Render markdown from .md files within a separate GitHub repo

**URL:** https://discourse.gohugo.io/t/render-markdown-from-md-files-within-a-separate-github-repo/26625
**Category:** support
**Created:** [June 30, 2020, 7:50pm UTC](https://discourse.gohugo.io/t/render-markdown-from-md-files-within-a-separate-github-repo/26625 "2020-06-30T19:50:12Z")
**Posts on this page:** 6
**Page:** 1

<div class="post-metadata">

### Author: ![Forfold](https://avatars.discourse-cdn.com/v4/letter/f/dec6dc/32.png) [@Forfold](https://discourse.gohugo.io/u/Forfold)
#### Post date: [June 30, 2020, 7:50pm UTC](https://discourse.gohugo.io/t/render-markdown-from-md-files-within-a-separate-github-repo/26625/1 "2020-06-30T19:50:12Z")

</div>

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](https://github.com/target/goalert/blob/master/CONTRIBUTING.md)

Would this be possible?

Thanks,  
Nate

---

<div class="post-metadata">

### Author: ![maiki](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/maiki/32/16384_2.png) [@maiki](https://discourse.gohugo.io/u/maiki)
#### Post date: [June 30, 2020, 8:09pm UTC](https://discourse.gohugo.io/t/render-markdown-from-md-files-within-a-separate-github-repo/26625/2 "2020-06-30T20:09:40Z")

</div>

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](https://gohugo.io/functions/readfile/#readout). Probably other ways, as well. 🙂

---

<div class="post-metadata">

### Author: ![Forfold](https://avatars.discourse-cdn.com/v4/letter/f/dec6dc/32.png) [@Forfold](https://discourse.gohugo.io/u/Forfold)
#### Post date: [June 30, 2020, 8:58pm UTC](https://discourse.gohugo.io/t/render-markdown-from-md-files-within-a-separate-github-repo/26625/3 "2020-06-30T20:58:27Z")

</div>

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

---

<div class="post-metadata">

### Author: ![maiki](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/maiki/32/16384_2.png) [@maiki](https://discourse.gohugo.io/u/maiki)
#### Post date: [June 30, 2020, 10:18pm UTC](https://discourse.gohugo.io/t/render-markdown-from-md-files-within-a-separate-github-repo/26625/4 "2020-06-30T22:18:41Z")

</div>

> [@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).

---

<div class="post-metadata">

### Author: ![Forfold](https://avatars.discourse-cdn.com/v4/letter/f/dec6dc/32.png) [@Forfold](https://discourse.gohugo.io/u/Forfold)
#### Post date: [June 30, 2020, 10:25pm UTC](https://discourse.gohugo.io/t/render-markdown-from-md-files-within-a-separate-github-repo/26625/5 "2020-06-30T22:25:55Z")

</div>

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!

---

<div class="post-metadata">

### Author: ![system](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/system/32/1_2.png) [@system](https://discourse.gohugo.io/u/system)
#### Post date: [July 2, 2020, 10:25pm UTC](https://discourse.gohugo.io/t/render-markdown-from-md-files-within-a-separate-github-repo/26625/6 "2020-07-02T22:25:58Z")

</div>

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.