I'm exploring ways to make my web projects simple enough for anyone to run just by opening an index.html file locally. I've tried using frameworks like Astro and Vue, but I keep running into issues with ESModules not working with local files. I even tested Nuxt.js, but it has the same problem. I want to avoid writing everything in pure HTML/JS—I'm already using Tailwind CSS—yet I'm told to stay away from Alpine.js since it doesn't measure up to other JavaScript options. I also tried Eleventy, but it didn't work due to a plugin issue. Any suggestions on alternatives that allow me to build static sites without these hassles?
4 Answers
Don't listen to your friends; Alpine.js is actually a great choice for your needs. It allows you to add interactivity to static HTML files without complicated build steps. If you're looking to reduce code repetition, you can have your header and navbar designed in one file and then import it into your other pages. While using a blank DIV to replace InnerHTML works, I get that you’d prefer a cleaner approach that involves a build step.
If you're looking for a solid alternative, consider SvelteKit with the static adapter. It builds everything into static files—no issues with local hosting. You run into fewer complications compared to using frameworks like Astro or Vue since Svelte could cater to your needs pretty well.
When you build your Astro project, it exports everything into a dist/ folder, which includes an index.html file you can access directly. If you're using Vue along with it, it compiles everything into a JavaScript bundle. Just make sure you include the _astro folder for it to work smoothly.
One option to avoid local file issues is to host your projects on GitHub Pages. This way, your friends can easily access them without having to figure out local file paths. If you're focused on pure learning, CodePen is also a good choice for testing out small projects without worrying about hosting them.
Related Questions
How to Build a Custom GPT Journalist That Posts Directly to WordPress
Cloudflare Origin SSL Certificate Setup Guide
How To Effectively Monetize A Site With Ads