Prologue

Introduction Core concepts Fast by default Deployment

Basic Gridmix

Directory structure Project configuration Pages Collections Templates Layouts Components Linking Dynamic Routing Image processing Populating <head> Environment Variables

Working with data

GraphQL data layer Importing data Querying data Filtering data Taxonomy pages Paginate data Global metadata Client-side data

Styles and Assets

Use CSS in Gridmix Add custom fonts Add external scripts Add SVG icons

Guides

Add a form Add a search Add comments Add Netlify CMS Overriding index.html Overriding App.vue Page transitions body & html attributes

API Reference

Gridmix CLI Server API Data store API Schema API Pages API Client API Transformer API

Deploy

Netlify AWS Amplify Vercel Amazon S3 GitLab Pages GitHub Pages Google Cloud Platform Surge.sh 21YunBox Azure Static Web Apps IONOS Deploy Now

Contribute

How to contribute How to create a plugin Code of conduct

Help

Prerequisites How to upgrade Troubleshooting Dev tools FAQ

Overriding Index.html

Occasionally you will need to override the base HTML template that Gridmix uses to generate your pages from. For example, adding CDN scripts to the footer of your markup can't be accomplished with Vue-Meta, so you would need to put these into the template yourself.

Thankfully, Gridmix makes this really easy. All you have to do is create a new index.html file in your src directory, and Gridmix will automatically detect it and use that index.html file for your site.

The following code is the base HTML template structure that Gridmix uses by default and which you can use as a starting point for your own:

<!DOCTYPE html>
<html ${htmlAttrs}>
  <head>
    ${head}
  </head>
  <body ${bodyAttrs}>
    ${app}
    ${scripts}
  </body>
</html>

Edit this page on GitHub