Back to templates

Template details

PixelsMatter Holding

Holding page template for pixelsmatter.io built with Gatsby and SCSS, ready for Netlify deployment.

About this template

PixelsMatter Holding is a closed-source Gatsby-based holding page template created for pixelsmatter.io, built on the PixelsMatter Gatsby Starter and deployed through Netlify CI/CD.

What is PixelsMatter Holding?

PixelsMatter Holding is a static, single-purpose website that displays a placeholder page for a domain while the main site is under construction. It takes Gatsby page content written in React components and SCSS stylesheets as input, and outputs a fully static HTML, JavaScript, and CSS site that Netlify serves. The template requires Node v14.17.4 and Gatsby CLI v3.12.0, and its project status is listed as Closed, meaning active development has ended.

Key Features

  • Gatsby static site generator — Produces a prerendered static site with React under the hood, optimized for Jamstack hosting and performance.
  • SCSS styling with BEM methodology — Styles are written in SCSS using a 7-1 architecture pattern and BEM naming, making classes modular and maintainable.
  • Netlify CI/CD deployment — The repository is wired for continuous deployment on Netlify, with the production environment set to https://pixelsmatter.io.
  • Standard npm scripts — Includes build, develop, start, serve, and clean scripts; the clean script removes the .cache and public directories to reset the build.
  • Prettier code formatting — The format script runs Prettier to keep the codebase consistently styled.
  • Local development environment — Running gatsby develop serves the site at http://localhost:8000 for immediate preview.

Who is it for?

  • Developers launching a placeholder site — They can clone the repository, run npm i and gatsby develop, and have a branded holding page locally within minutes.
  • Agencies managing domain rollouts — Agencies can use the template as a starting point to quickly deploy a coming-soon page on Netlify for clients before the full website is ready.
  • Developers learning Gatsby architecture — The codebase demonstrates Gatsby combined with BEM, SCSS 7-1 structure, and Netlify integration, useful as a reference.

What can you do with PixelsMatter Holding?

  • Set up a holding page quickly: Install dependencies with npm i, then run gatsby develop to preview at localhost:8000, and gatsby build && gatsby serve for a production build.
  • Deploy to production automatically: Connect the repository to Netlify with CI/CD; every push rebuilds and publishes the site to the configured custom domain.
  • Customize the visual identity: Edit the SCSS files, organized by BEM and 7-1 architecture, to match the brand's colors, typography, and layout.

How does PixelsMatter Holding work?

The template runs as a standard Gatsby project. After npm i, developers use gatsby develop to start a local development server with hot reloading. For deployment, gatsby build generates a production-ready static site into a public directory, and Netlify CI/CD automatically builds and serves it at the production URL whenever the repository is updated.

Pros and cons

Pros: minimal and focused (only a holding page), static site speed, SCSS with BEM for structured styling, free and open source, Netlify integration out of the box. Cons: project status is closed, so no ongoing updates; requires specific Node and Gatsby versions; staging environment is not configured (marked N/A); it serves only a holding page, not a full website.

Pricing

The template itself is free and open source, with no license or purchase requirement visible in the repository. Ongoing costs are limited to hosting; Netlify offers a free tier that is sufficient for a lightweight holding page.

FAQ

Is PixelsMatter Holding free to use?

Yes, the source code is available publicly on GitHub with no pricing or license restrictions mentioned. You can clone and use it freely for personal or commercial holding pages.

What Node and Gatsby versions are required?

The repository specifies Node v14.17.4 and Gatsby CLI v3.12.0. Using different versions may cause installation errors or build failures, so matching these versions is recommended.

How do I run the site locally?

From the project root, run npm i to install dependencies, then gatsby develop to start the local server at http://localhost:8000. Alternatively, gatsby build && gatsby serve creates and serves a production build.

What is the production domain for this template?

The production environment is configured for Netlify CI/CD at https://pixelsmatter.io, the website of the repository owner. For your own deployment, you would connect the repo to your own Netlify site and set your custom domain.

Can I use this template for a client's website?

Yes, since there is no license restriction, you can customize the SCSS and content to fit a client's brand. The template is designed to be a starting point that can be replaced by a full site later.

screenshot of PixelsMatter Holding on template0.com