This is a simple static site generated using Gridsome.
The following steps are the standard steps for building a Gridsome site. The should be run from the top level directory of this repo.
npm install --global @gridsome/clito install the Gridsome CLI.npm installto install all of the project dependencies.npm run developto run a local development server.npm run buildto generate the site for deployment (in the dist directory).
There are two environment variables that the build uses when generating the site.
- FONTAWESOME_NPM_AUTH_TOKEN - This is the token required to use the pro version of Fontawesome. You can get it from your account page after you've registered for a pro account.
- GTM_ENABLED - Set this variable to enable GTM in the build.
This section is intended to give a developer a high level view of how the site is constructed so they know where to start when making changes.
The site is generating using a standard Gridsome setup using the following additional tools/technologies.
- Tailwindcss for styles.
- Netlify CMS to manage pages/content from markdown files stored in /content (see CMS section below).
- Fontawesome for iconography. Note that the pro version is used for some icons and the site is using the license owned by Karl Kedrovsky.
- MailChimp for gathering email newsletter subscriptions.
- Google Fonts for the custom fonts.
The package.json file has all the details regarding the packages used to integrate all of the above technologies and resources.
The key goals for the site were simplicity and speed. The approach described below means that everything needed to generate and maintain the site can be kept in a single git repository. It also means that all of the content is available, and can be maintained, without using the CMS at all - just edit the markdown and/or yaml files directly.
The Netlify CMS is used to manage markdown files containing site content stored in /content and site settings (navigation) stored in /data. It's important to note that not all content is managed by the CMS, to get things done quickly some pages (e.g. home page) are implemented using .vue files in the /src/pages directory.
The Netlify CMS files are stored under /src/admin, the config.yml file in the that directory contains all of the configuration imformation.
The following content types are used to manage content on the site.
- Page - "Plain" pages such as the privacy policy and terms and conditions pages.
- FAQ - FAQs listed on the home page.
- Update - Pages under /news-updates
- Resource - Pages under /covid-19-resources
- Gallery - Documents for downloads
There are also two yaml files under /data/settings that are used to define the main and footer navigation links.
Hosting is assumed to be Netlify which also handles the automated build and deployment process. The only Netlify specific functionality used is for redirects which looks for a "_redirects" file at the root of the site. This file can be found at /static/_redirects.
An important thing to note is that while the site can be viewed in IE11 the experience isn't as good as other browsers. Primarily the lazy loading of images provided by Gridsome is broken by the MailChimp integration library. That library, and its supporting libraries, do not support IE11 and their authors have no intention of doing so. This library was used to get the site up and running quickly and if official support of IE11 is desired the MailChimp integration will need to be reworked, at a minimum.