Head Start

Base setup on top of headless services to help you quickly start a new website

Philosophy

Provide a generic template to help develop new websites (not web apps) faster.
Provide a pre-defined setup for composable pages with common components.
Provide pre-configured services like a CMS and deployment platform.
Support common needs like internationalisation (i18n), SEO, redirects and analytics.
Provide functional interactivity without a JS framework (React, Vue, Svelte, etc)*.
Provide functional interactivity without specific styling ("unstyled")*.
Provide a fully accessible and highly performant baseline for every project.
Utilise testing to ensure quality and prevent regressions.

* We'll leave the choice for a JS framework and strategy for styling to developers using Head Start for their project.

Roadmap

Current status: Head Start is suitable for internal use by De Voorhoede.

v1: all common website functionality for use by De Voorhoede.
v1 public: extend setup and documentation to be suitable for use outside De Voorhoede.
v2: ideas for Head Start as starterkit for websites & web apps (maybe, someday).

Progress can also be tracked on the Head Start project board.

Architecture

The site is created as lightweight progressively enhanced website connected to a headless CMS:

Astro - web framework to structure this project. Astro is selected because it embraces web standards, is designed for performance, and supports all our favourite UI frameworks (React, Vue and Svelte).
DatoCMS - a headless CMS is connected to manage web content. DatoCMS is selected for its modular and structured content options, advanced image service, multi-language support and GraphQL API.
Cloudflare Pages - is a JAMstack hosting platform. Cloudflare Pages is selected for its reliable CDN, zero cold-start workers, green hosting and affordable pricing.

%%{
    init: {
        'theme': 'base',
        'themeVariables': {
            'edgeLabelBackground': '#FFFFFF',
            'lineColor': '#0000FF',
            'mainBkg': '#FFFFFF',
            'primaryBorderColor': '#0000FF',
            'primaryTextColor': '#000000',
            'tertiaryColor': '#FFFED9'
        }
    }
}%%

flowchart LR
    Repository(Code repository)

        CMS[(DatoCMS)]
        Hosting(Cloudflare Pages)
        CMS -- publish --> Hosting

    Repository -- git commit --> Hosting

    Repository -. migrate .-> CMS

%% you can edit this diagram via https://mermaid.live/edit

Getting started

Follow the step-by-step getting started instructions.

Documentation

All documentation is located in docs/:

Commands

All commands are run from the root of the project, from a terminal:

Command (`npm run ...`)	Action
`dev`	Starts local dev server at `localhost:4323` (head in T9)
`build`	Build your production site to `./dist/`
`preview`	Preview your build locally, before deploying
`astro ...`	Run commands like `astro add` (see `astro -- --help`)
`create`	Scaffold new Block, Component, API or Page route
`lint`	Check code style and valide HTML output
`test`	Runs the test suite, individual tests are available using `test:...`

Contributing

Head Start welcomes contributions of any size and skill level. See our contribution guidelines.

License

Head Start is made with ❤️ by De Voorhoede. Released under ISC License.

voorhoede / head-start

readme