Static html site without web server

[maxim-gofervent]

Is it possible with Gatsby build static HTML files ( For example manual, or local help site ), within which will possibly navigate without any web server?

I have tried to build my site, but see all files in it webserver oriented.

[LekoArts]

Gatsby is a static site generator. So what you build is(!) static HTML & JS

[maxim-gofervent]

But is there any way to deploy into a local folder?
And then just open my index.html page ( in this folder ) in a browser and navigate through my static site ( with file:// ) ?

As I see now, after I have created the test site and built it, then for page2 I see was created the folder with the index.html file inside.
http://prntscr.com/itprwr

[m-allanson]

You can use gatsby build to build the local site. Then gatsby serve to browse your local site. https://www.gatsbyjs.org/packages/gatsby-cli/#serve

[maxim-gofervent]

I need to have it works without a server. Just folder and .html files

[jquense]

That is what is produced when you run build files in a folder. You can just open the files. Likely the urls aren't going to work because the file protocol is relative to the root of the file system. That problem is true of any attempt to run a site that way tho not specific to gatsby

[maxim-gofervent]

So then there is no solution with gatsby for me?

[pieh]

Maybe you could explore trying to create desktop app from your build with https://github.com/electron-userland/electron-packager ?

[maxim-gofervent]

It's a good suggestion, but I need to do it somehow together with react.js

[jquense]

my point is that it's just as feasible as running any site from the filesystem. If you write your urls/links in a way that works then it'll work, same as if you wrote the site by hand in html. Gatsby produces all the static files you need. run build, and open up any of the html files and see what doesn't work and adjust your site. The process would be the same other site. The only gatsby specific thing i could think of is making the gatsby pathPrefix the directory you want to stick the files in, that might negate the url issues

[mkroening]

In v1 it worked, if you set the absolute "public" path as pathPrefix.
This was not what we wanted, but replacing the pathPrefix manually with empty strings would not work at one line, where find-page is being called.
In v2 it does not work, even with the absolute path as pathPrefix.

[vanvuongngo]

I tried to build a chrome-extension with gatsby and get into same problem like @maxim-gofervent

[treb0r]

@jquense "If you write your urls/links in a way that works then it'll work, same as if you wrote the site by hand in html." could you elaborate further? I'm trying to build a static site with Gatsby that can render basic pages without a server and also without javascript enabled in the browser.

[vibern0]

Does anyone have an answer?
@KyleAMathews can you please reopen it?

[rahkee]

Gatsby is a Static File Generator but it still needs a Server to run it. It does not run via opening index.html directly into a browser.

The word Static File Generator is a bit confusing in a sense that it gives you the perception that it can run a website via clicking on HTML files as if it were to be handwritten.

I've tried everything. Copied every tutorial to the T and still cannot get my Gatsby build (no errors) to run if I was to double-click on the HTML files or if I were to paste it via FTP to a server.

[kerembaydogan]

To be able to build a gatsby site that does not require a webserver to run is a huge feature.

This is greatly needed for embedded/offline web sites where a web server is not available or not feasible.

I am developing an offline documentation site and it will be embedded in a mobile app with a web view as UI.

I need no webserver for this simple app. Please give us a way to prefix our paths with an empty string.

[kerembaydogan]

@KyleAMathews can you please reopen this issue?

[rylew2]

Not sure if it helps, but you can use create-react-app to achieve an offline static html site (just opening index.html from the build folder) with proper routing using react HashRouter .

[rwxguo]

Same from Next.js users.

I have the same requirement for using file:// protocol to browser html pages offline, without any local web server.
Some people need this for testing, or for sharing the website to others through office network share drive (web server is not allowed) etc.
Most of the JamStack tools requires local web server for their experted static HTML, expect MkDocs I found so far.

Addition to the above solutions, another possible workaround is by using JavaScript to dynamically change each of the path in your HTML, when it detect is under file:// protocol.

Here is the example, when page is laded, the script will check the protocol, and iterate all of css asset links, duplicate another one with their relative path:

<script>
        if (window.location.protocol === 'file:') {
            const styleSheets = document.styleSheets;
            let head = document.getElementsByTagName('head')[0];
            for (let i = 0; i < styleSheets.length; i++) {
                let link = document.createElement('link');
                link.rel = 'stylesheet';
                link.type = 'text/css';
                link.href = `./${styleSheets[i].href.split('/').pop()}`;
                head.appendChild(link);
            }
        }
    </script>

Please notice, the script will cause infinite loop if you append the link with a workable href that is found and already loaded

The same approach could also be applied to other assets or <a> href etc.