A corporate-free website starter project that gets you up to zero.

ZeroPoint is a free and open-source website starter project that helps you get your website project up and running quickly.

Focusing on simplicity, version control, and native web technology, ZeroPoint provides a solid foundation for your website without the bloat of unnecessary databases, server-side languages, frameworks or monolithic content management systems.

Features

• 🏗️ Static site generation with Eleventy
• 🧩 Reusable components with Eleventy Reusable Components
• 🔍 Full-text search with Pagefind
• 🌐 No frameworks, unless you add them. All native web code: HTML, CSS, and JavaScript
• 📄 Example content types and site data
• ⚙️ Custom fields built in!
• 🎨 Sass and Javascript asset pipelines
• 🔧 Extensible to add content management, e-commerce, contact forms, and more.
• 🆓 Free from corporate ownership and tracking

Get Started with ZeroPoint

1. You have to start somewhere

   Generate a new GitHub repository using the ZeroPoint template (click here) or using GitHub CLI:

   gh repo create my-new-site --template MWDelaney/ZeroPoint

   Install dependencies:

   npm install

   Start your local development server:

   npm dev

   Next steps

   • Edit the home page: src/content/pages/index.md
   • Add or edit navigation: src/data/navigation.json
   • Change colors and styles: src/assets/styles/

   See the complete ZeroPoint Starter documentation to keep going!

2. Build with Components

   Create reusable HTML components, patterns, and templates using Eleventy Reusable Components.

   Install the Eleventy Reusable Components plugin:

   npm install --save-dev eleventy-plugin-reusable-components

   Uncomment the plugin's configuration in src/config/plugins.js:

   import reusableComponents from "eleventy-plugin-reusable-components";
   
   /**
     * ZeroPoint Reusable Components plugin
     * https://github.com/MWDelaney/eleventy-plugin-reusable-components
     */
   async reusableComponents (eleventyConfig) {
     // Add plugin to eleventyConfig
     eleventyConfig.addPlugin(reusableComponents, {
       componentsDir: "src/assets/components/*.njk"
     });
   
     // Register CSS and JS component bundles
     eleventyConfig.addBundle("componentCss", {
       toFileDirectory: "assets/styles/",
     });
   
     eleventyConfig.addBundle("componentJs", {
       toFileDirectory: "assets/scripts/",
     });
   }

   See the Building with Blocks for details on creating and using your first component.

3. Deploy to the web

   Deploy your site to the web using Netlify, Cloudflare Pages, GitHub Pages, or your favorite hosting provider.

   We maintain a set of example GitHub Actions and Workflows along with documentation to help you get your site online using a variety of hosting types.

Next Steps

1. Enable the blog

   Blogging functionality is included in ZeroPoint Starter, but not enabled by default.

   To enable the blog:

   1. Uncomment the blog collection in src/config/collections.js

      src/config/collections.js

      /**
        * All Posts (includes all languages)
        */
      posts(eleventyConfig) {
        eleventyConfig.addCollection('posts', (collectionApi) => {
          return collectionApi.getFilteredByGlob(['src/content/posts/**/*.md', 'src/content/*/posts/**/*.md']);
        });
      }

   2. Uncomment the blog index page's content in src/content/blog.njk

      src/content/blog.njk

      ---
      layout: base.njk
      permalink: /blog/{% if pagination.pageNumber > 0 %}/page/{{ pagination.pageNumber + 1 }}{% endif %}/index.html
      pagination:
        data: collections.posts
        size: 10
        alias: posts
        reverse: true
      eleventyComputed:
        title: Blog {% if pagination.pageNumber > 0 %}(Page {{ pagination.pageNumber + 1 }}) {% endif %}
      ---
      <section class="blog">
        {%- for post in posts -%}
          <article class="blog-post">
            <header>
              <h2><a href="{{ post.url }}">{{ post.data.title }}</a></h2>
              <datetime datetime="{{ post.date }}">{{ post.date }}</datetime>
              {%- if post.data.tags -%}
                <ul class="tags">
                  {%- for tag in post.data.tags -%}
                    <li class="tag">{{ tag }}</li>
                  {%- endfor -%}
                </ul>
              {%- endif -%}
            </header>
            {{- post.templateContent | safe -}}
          </article>
        {%- endfor -%}
      
        <nav class="pagination">
        {%- if pagination.href.previous -%}
          <a href="{{ pagination.href.previous }}">Previous</a>
        {%- else -%}
          <span class="previous">Previous</span>
        {%- endif -%}
      
        {%- if pagination.href.next -%}
          <a href="{{ pagination.href.next }}">Next</a>
        {%- else -%}
          <span class="next">Next</span>
        {%- endif -%}
        </nav>
      
      </section>

   3. Create a new blog post in src/content/posts/

      src/content/posts/

      Each post should be a [Markdown](https://www.markdownguide.org/) file with frontmatter metadata.

      For example:

      ---
      title: My First Blog Post
      date: 2023-01-01
      ---
      # My First Blog Post
      Welcome to my blog!

   4. Add a link to the blog in your navigation by editing src/data/navigation.json

      src/data/navigation.json

      {
        "items": [
          {
            "text": "Home",
            "url": "/",
            "external": false
          },
          {
            "text": "Blog",
            "url": "/blog/",
            "external": false
          }
        ]
      }

• Next: Adding a CMS