MetaStatic Demo

About MetaStatic

MetaStatic is a JavaScript tool that allows you to build and maintain a static web site using:

high-level tags that we call Meta Tags and that represent and encapsulate a particular set of user interface (UI) features and behaviours
optionally, a simple text file-based Content Management System, with your content written using Markdown syntax

MetatStatic can be used with either Node.js or Bun.js.

Using MetaStatic, a Web Site maintainer can quickly and easily define and maintain a complex static web site that has a modern responsive user interface, using a few simple Meta Tags and without the need for complex JavaScript frameworks.

MetaStatic allows a Web Site to be described/defined completely declaratively, requiring no programming knowledge or expertise.

However, technical developers can create libraries of re-usable MetaStatic Meta Tags that encapsulate any amount of markup and JavaScript logic, to whatever degree of complexity is required. These can then be used by a Web Site maintainer as building-blocks that describe the Web Site.

The file containing the Meta Tag-based definition of a web site is then used as the input to the MetaStatic module which converts it to a corresponding HTML file that can be run in a browser.

Installing MetaStatic

MetatStatic's Build Module is written in JavaScript and can be used with Node.js.

Install it as follows:

npm install metastatic

Bun.js

MetaStatic's Build Module is written in JavaScript and can be used with Bun.js.

Install it as follows:

bun install metastatic

Configuring MetaStatic

Configuration of MetaStatic's Builder module is performed when you instantiate its MetaStatic class. You pass its constructor an options object as an argument.

The options object's properties are as follows:

tagLibraryPath: the file path under which each of your Meta Tag Libraries are stored
inputPath: the file path holding your .meta files which describe your Web Site's page(s)
outputPath: the destination file path into which MetaStatic's Builder will output the generated HTML file
contentPath: an object containing one or more key/value pairs, with each key/value pair describing the mapping of a namespace to a corresponding physical file path. These are used by MetaStatic's Builder to locate Markdown content files that are referenced in Meta Tag attributes.

For example, the configuration used in your cloned repository is:

const metaStatic = new MetaStatic({
  tagLibraryPath: './metaTagLibraries/',
  inputPath: './sites/',
  outputPath: './sites/',
  contentPath: {
    tutorial: './sites/tutorial/content'
  }
});

JavaScript Frameworks

Many people these days are using complex and cumbersome JavaScript frameworks such as React, Vue or Angular, to create what are actually just static Web Sites where the content is largely fixed and only occasionally updated.

This isn't perhaps so much of an issue if the maintainer of such a Web Site is technically well-versed in such a framework, but, more often than not, the maintainer is someone else in the organisation who has little or no detailed technical or programming expertise, but is more focused on ensuring that the content required for the site is accurate and kept up to date. Such a Web Site maintainer will find it difficult to learn and understand the complexities involved when changes need to be made, and, nine times out of ten will need to go back to the original developer (if they are still available!) in order to make the change.

In any case, the use of such frameworks to create such Web Sites is often an unnecessary "sledgehammer to crack a nut".

Furthermore, such a site will typically be slow to load and start for users, because it will require potentially huge files of JavaScript to be loaded into the browser before anything can begin to be rendered.

And just to add insult to injury, Web Sites developed using JavaScript frameworks that dynamically build the markup by manipulating the page DOM can be difficult for web crawlers to properly and fully process and index the content for search engines to use, resulting in sub-optimal Search Engine Optimisation (SEO).

Content Management Systems

For Web Sites that require maintenance of a lot of content that can change over time, the usual solution is to use a Content Management System (CMS). This requires specific technical skills and a potentially steep learning curve, and often the cost of a license for the CMS and/or associated database. The latter database may also need technical maintenance (eg backup, restore etc), again requiring specific technical expertise.

As a result, many Web Site maintainers turn to commercial packaged solutions such as Wordpress, Wix, Squarespace etc, most of which incur licensing or subscription costs and/or remote/cloud hosting, and potentially constraining the look and feel of the Web Site. Migrating between such services can also be problematic, so vendor lock-in is a real risk of such a solution.

CSS/JavaScript Templates

Meanwhile, there are a great many pre-built templates that can be used to create complex, modern, responsive user interfaces for static web sites, with the entire content and functionality delivered as a single HTML page. See for example:

the W3 Schools W3.CSS Templates
the SB Admin Dashboard Template

Templates such as these don't require anything other than their own pre-defined CSS stylesheets and some behaviour-specific JavaScript files. They don't require React, Vue, Angular or any other build and runtime framework. As a result they are incredibly fast to load and run, and, being static HTML files, can be crawled and indexed completely for use by all search engines.

Whilst impressive in terms of their look and feel and functionality, tailoring such templates for a specific use case is, however, time-consuming, error-prone and fiddly, and requires a good understanding of HTML and JavaScript. For a full web site, the page would be huge, and making content changes would require scanning or searching the HTML page and editing in situ. More complex modifications, such as adding or changing new menu options, tabbed panels or content sections would probably be beyond the skills of a basic Web Site maintainer and would be a cumbersome task.

Breaking Down Templates into Building Blocks

The thinking behind MetaStatic is: what if it was possible for a technically skilled developer to break down such templates into a hierarchy of high-level building blocks - Meta Tags - that represent the individual elements or components (eg the backdrop, the menus, tab controls, carousels etc) from which that template is constructed? Armed with a library of such Meta Tags, a relatively unskilled Web Site maintainer could then define their own spefically-customised version that conforms to the template, but containing their own content and using a much simpler and intuitive shorthand description summarising the bulding blocks and content needed for their specific site.

The idea would be to process such a high-level Meta Tag description and generate a user-specific version of the template HTML that could be loaded into the browser. If any changes were made to the Meta Tag description, simply re-running the build process would create an updated version of the HTML file needed for the Web Server.

The technical expertise required to build a Meta Tag library for a particular template would be a one-off expert task. However, the resulting Tag Library could then be used repeatedly and easily by any number of Web Site maintainers who would not require particularly detailed technical skills.

Content Management

Furthermore, if the text content of the Web Site could be held separately, maintained in simple text files in a directory, using the now widely used and easily understood Markdown syntax (using any convenient editor from nano upwards!), then this content could be pulled in at build time for inclusion in the final template file. All this would require is a simple file naming convention and the ability to reference the corresponding file name in a Meta Tag that made use of that content.

No database would be needed, and no license or subscription fees needed. All that would be needed would be a basic understanding of a server's directory structure and the ability to use a text editor and devise a simple file nomeclature convention.

Ergo MetaStatic

So these are the underlying ideas and concepts behind MetaStatic: a new and deceptively simple way to create and maintain static Web Sites of any size and complexity, without the need for any complex JavaScript frameworks, CMS, database or build chain.