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.

* 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/:

• Getting Started
• Accessibility (a11y)
• Blocks and Components
• CMS Content Modelling
• CMS Data Loading
• Internationalization (i18n)
• Project Structure
• Preview Mode
• Routing
• Search
• Search Engine Optimisation (SEO)

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

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.