Here’s the scenario:
One of my websites is static, and I need to maintain a changelog both on the website and on GitHub Pages. The solution is a simple JavaScript function to parse the Markdown content and display it on my website.
The content on GitHub Pages is rendered as HTML (from Markdown), so for my changelog I have headings – h2
– and lists – ul/li
. Also, I need to get the <body>
content only.
So I’ll use the DOMParser()
class, like below.
Note that I am checking for a specific element – .changelog
– on my static website, so I can replace it with the retrieved changelog.
document.addEventListener('DOMContentLoaded', () => {
if (document.querySelector('.changelog')) {
function file_get_contents(filename) {
fetch(filename).then((resp) => resp.text()).then(data => {
// Optional, replace the H1 heading with nothing,
// as I do not need it on my static website
data = data.replace(/<h1>(.*?)<\/h1>/ig, "");
// Initialize the document parser
const parser = new DOMParser();
let doc = parser.parseFromString(data, 'text/html');
// Get the <body> element content
let body = doc.querySelector('body').innerHTML;
// Replace my empty element with the retrieved content
document.querySelector('.changelog').innerHTML = body;
});
}
// Call the function and point it to my GitHub Pages page
file_get_contents('https://mypage.github.io/path/to/changelog');
}
});
The function above is commented and self-explanatory. I did not encounter any restriction or CORS issue.
I assume that the github.io
domain has no restrictions, due to the way it’s built, and this makes it ideal for these kinds of tasks.
I also assume that one could create a crude, basic CMS based on github.io
and a static website. I wouldn’t recommend it, though.
While fetching content from another website using JavaScript can be a practical way to aggregate and utilize data, it’s just the beginning. To truly derive value from this data, proper tagging and classification are crucial. If you’re struggling with managing and organizing this information, our data tagging service can provide you with a robust and efficient solution. Our team of experts can ensure that your data is well-organized, allowing you to harness its full potential effectively.

Technical SEO specialist, JavaScript developer and senior full-stack developer. Owner of getButterfly.com.
If you like this article, go ahead and follow me on X or buy me a coffee to support my work!