I'm looking to create a blog page on github pages. The idea is I can upload a markdown file with a date to the pages repo in a directory named blog and it will render the .md as html, and put one post on top of the other.

I'm not the most experienced javascript programmer, so I'm a bit out of my league here. I'm currently using cdnjs to get marked and browserfs so I can access files on my website, but Its not letting me even scan one file and render it. Here's the code I have, my file structure, the console log:

// Installs globals onto window:
// * Buffer
// * require (monkey-patches if already defined)
// * process
// You can pass in an arbitrary object if you do not wish to pollute
// the global namespace.
BrowserFS.install(window);

// Configures BrowserFS to use the LocalStorage file system.
BrowserFS.configure({
fs: "LocalStorage"
}, function(e) {
if (e) {
    // An error happened!
    throw e;
}
// Otherwise, BrowserFS is ready-to-use!
});


/** namespace. */
var hv = hv || {};

// var marked = require('marked');
var md = window.markdownit();
var fs = require('fs');


// ...

hv.processFiles = () => {
    //var filelist = fs.readdirSync('https://hverrill.github.io/blog/');
    //console.log(filelist.size());
    // filelist.forEach((file) => {
    //     console.log("FILE: ", file);
    //     hv.writefiles(file);
    // });
};
hv.writefiles = (file) => {
    // fs.open(file);
   
    fs.readFile(file, (err, data) => {
        document.getElementById('mdcontent').innerHTML += marked(data);
    });
};

    

/** Functions */
// hv.write((count) => {
//     const fsLibrary  = require('fs')  
//     fsLibrary.writeFile('count.txt', hv.counter, (error) => { 
//         if (error) throw err; 
//     })
// });

// hv.read((count) => {
//     const fsLibrary  = require('fs')
//     fsLibrary.readFile('count.txt', (error, fileCount) => {
//         if (error) throw err;
//         hv.counter = fileCount;
//     })
// });



/* Main */
hv.main = function () {
    console.log("Hello World!");
    
    var reader = new FileReader();
    var text = reader.readAsText(fs.createReadStream("../blog/test.md"));
    console.log(text);
    document.getElementById('mdcontent').innerHTML += md.render(text);

    hv.processFiles();
    // hv.read();
    // hv.counter++;
    // hv.write();
    // console.log(hv.counter);
};

hv.main();

Screenshot of the console log of my website

Screenshot of file structure

*Edit: The code may look disorganized, I tried a bunch of things, and some have been left around unused. Sorry!