the chill web stack

nov 10, 2024

matt harris

i've decided to use the simplest web stack possible for this site and i refer to it as the chill web stack.

the site uses only html, css, and vanilla javascript. the only difference between the chill web stack and a normal static html site, is the use of shared html embedded with js.

the basics:
to create a new page with my sample repo, simply:

create a new root folder or sub-folder with the name of the new page. an example article in a sub-folder would be:
```
/articles/example-article-name/  
```
add an index.html file inside of that folder and manually copy the contents of the template.html file into it.
write whatever html you want to create the content area and publish. i'm currently using github pages to publish this site.

the magic:

the very simple magic is in the header.js and footer.js files linked into every page. this could have been reduced to 1 file for all of the embedded html but i decided to break it into 2 files.


    <footer id="footer"></footer>

    <script src="../../scripts/header.js"></script>  
    <script src="../../scripts/footer.js"></script>
</body>

</html>

here's an example of a simplified version of my footer.js file which embeds the footer html on every page:


const footerElement = document.getElementById("footer");

const footer = `
    <div id="footer-inner-wrapper">

        <div class="footer-column">
            <a href="https://x.com/hellouniverseco" target="_blank">  
                @hellouniverseco
            </a>
        </div>

    </div>
`;

footerElement.innerHTML = footer;

if you're going for brutalist simplicity, you know html basics, and just want to get content out, it couldn't get more chill than the chill web stack. #chillwebstack

you can copy this site to get started:
https://github.com/hey-universe/hello-universe.git