Splendid Static Website Generator

architecture

This Node.JS package allows to generate static website easily. The content is written in pages that consist either of files or directories with files as HTML with some markdown and compiled into HTML for a given layout. The navigation is performed using AJAX with the content of the pages being inserted dynamically, allowing websites to load faster to improve the SEO which also benefits from auto-generated sitemap. Its main advantage is that it also supports custom reusable <JSX/> components that are rendered into HTML source code natively without Babel or any additional setup required. It also provides a way to define custom transforms using regular expressions. Finally, it is opinionated in a sense that there is a standard directory structure, however it is very simple and readily configurable if needed. Splendid is a perfect tool to make cool websites fast without having to learn complicated frameworks. All you do is write pages, define components and Splendid does the rest, while providing great developer experience with live content reload.

Hello World
Loading sharing buttons...

section break

Installation

Splendid can be installed as a global package and used from the command-line. Or, because it has no dependencies, it is easily installed in any Node.JS package, e.g., to create web documentation for it.

yarn global add splendid
npm i -g splendid

section break

Structure Initialisation

To initialise the default structure into the current folder, the splendid --init or splendid -i command is used. It will copy all initial files including configuration, a couple of pages and a menu implemented as a JSX component for an easy start.

mkdir website.co
cd website.co
# initialise structure
splendid --init
# compile
splendid
# stard development server
splendid -s

section break

Project Structure

The new website will have the following default structure:

Dockerfile
nginx.conf
node_modules
package.json
splendid
website
yarn.lock

The website's files will be contained in the splendid directory and compiled to the website directory.


Each new static website will have splendid directory with the source files used to generate the files that are served using Dockerimage.

The project has Dockerfile so that it is easily deployable using the nginx:alpine image.

FROM alpine:latest

ENTRYPOINT ["nginx", "-c",  "/nginx.conf"]

RUN apk add --no-cache nginx
ADD nginx.conf /

COPY website /app

section break

JSX Components

Any user-defined JSX components can be added to the components directory. They allow to define React/Preact components, but invoke them using html notation in pages files. When invoked, the component receives properties from the tag attributes and the content of the node as the children property.
// splendid/components/Component.jsx
// Definition of a component.
export const Component = ({ children, url, id }) => <div id={id}>
  <a href={url} />
  { children }
</div>
<!-- Invocation of the component from source -->
<Component url="https://test.com" id="Preview">
  Please follow the link above to find out the details.
</Component>

It is important to remember that JSX components are not added to the website as JavaScript, but are rendered during the compile-time of the website. In future, the JavaScript components might be supported.

The components receive the splendid property, in which the list of pages and the current page is container, so that navigational menus can be implemented.

section break

Development Server

To preview the website locally, Splendid ships a development server that returns all HTML pages and static assets. Moreover, it supports hot-page reload so that when the content of a page is changed, it is automatically reflected in the web browser.

section break

Images
wall