Onepage website architecture

A simple and small entire website can be seen as one structured document. Such website can be reduced to one web document, i.e. one page!

I built a quick demo if it: Onepage website demo. There is only one HTML document for the entire website. The whole content fits in one web document. The user can navigate as if there were many. It can be structured with many sections and related headings. It can contain forms, images, videos, layouts per section and more.

The perfect use case, in my opinion, is for showcase sites. It has contact details, map, product presentation, etc… The browser will load the document and the linked resources such as images can be loaded while first displayed.

I am thinking how convenient and inconvenient such architecture can be.

Benefits of one-file websites

I found a number of advantages for this architecture compared to static sites, for example generated by Astro.

From the user perspective, they can jump to the content without having the whole content of the site visible. That’s why we created navigation in the first place: split content and only display what’s relevant. It can be overwhelming sometimes. One section at a time can be enough.

One file is the same a an SQLite database: the data is only a file. A site can also be an html file, or a folder with associated resources (fonts, images, etc.). It has the same cool things: easy backups, deployment, etc… The entire content is fetched after the first load: it works offline.

Another quick win: HTML, CSS (and eventually third party services) are needed and you are ready to go! The site stays maintainable and nobody needs to learn an unknown framework: only standards are needed. It can get pretty far with the features while relying on third parties: a code editor can be integrated into such UI. HTML and CSS offers a lot today.

The site can still be broken into components: each section can be one component. The atoms or molecules components (of atomic design) can be CSS components or small HTML templates when needed. I find it now overkill, but the website can be built with Astro or Enhance as one index.html.

Limitations of having one file

A lot of content can become a burden. What is “a lot”? I don’t know yet. The first load can also be long… meanwhile the amount of data required to equalize the payload of a JS framework remains enormous in pure HTML. We should be OK on the first payload.

Sub-pages can become difficult to handle. The id attribute values must be carefully organised and structured. This starts to come back to a web site with several pages. That’s the biggest limitation I see. For these projects, it makes sense to switch to a static site with several pages. Astro or Enhance are better tools.

When should the one-page trick trick be used?

It fits for small websites with few sections or a quick demo of a project. As a rule of thumb: static “content-driven” or “content-first” websites.

Note there are already tools to built one-pager sites. I found Carrd.co in a quick search. Wordpress & co works, but we loose the simplicity of one html file with them. This solution is god-damn simple with a file and done!

I still have to get a useful project to work on such website, but I will enjoy building it.