Launching our first completely static government platform
We recently partnered with Geoscience and to launch the new Digital Earth site. This project incorporated building an entirely new Geoscience Australia digital platform; a decoupled system that provides content as an API and allows for entirely static website builds that are lightning fast, lean and secure.
The platform provides content as an API via Drupal 9 (GovCMS) and compiles static websites using a standard, consistent design system with a Nuxt/Vue.js middleware. When content changes, the static artefacts are refreshed and pushed up to , a CDN engineered specifically for the static web.
This is our first entirely static government build, and marks a milestone in promoting static site generation within government as a viable alternative to traditional hosting. Read about the benefits of static
The new Geoscience Australia platform
Digital Earth Australia was the first site to launch on the new Geoscience Australia digital platform. This is a decoupled build that:
Uses Drupal 9 as a CMS and API, hosted on GovCMS
Leverages Vue.js frontend web components and page templates
Builds static artefacts via Nuxt.js/Vue.js middleware and continuous integration (CI)
Integrates with Algolia for search, both entire site and configurable search pages
Deploys to QuantCDN, a static web and Jamstack solution
How it works
Content is created and maintained in a Drupal 9 headless content management , hosted by , and exposed via an API using the JSON:API . This Drupal content maps to a frontend design created with and , which ultimately results in static web built with and triggered when content changes via GitHub . The decoupled static assets are deployed and served via along with the only dynamic element, Algolia .
Design system
collaborated with Geoscience Australia for more than two years to fully understand the myriad of program and user needs. To satisfy the broad and deep requirements, Today designed and built a very flexible and modern set of web components, while ensuring the design system is eye-catching, usable and accessible. The Today team was critical in thoughtfully analysing Geoscience Australia’s pain points and long-term goals to create a fantastic frontend design system and a cohesive communications strategy to boost each program’s digital presence.
For the design itself, Today leveraged the popular Figma interface design tool for seamless collaboration and useful revision management. Each web interface element and component was defined in Figma as well as key landing pages, and the UI was annotated with relevant details such as frontend and backend development specs. Ultimately, documentation was created to match the final design system in Figma, which will be an essential tool when iterating the decoupled system with future improvements.
GovCMS backend hosting
The headless Drupal CMS is hosted by GovCMS, which provides multiple environments for development, quality assurance (QA) and user acceptance testing (UAT). Salsa was fortunate to work with a few years ago to rebuild the whole-of-government GovCMS platform.
The decoupled system architecture allows the Drupal backend to run in a more secure environment, as it doesn’t need to be exposed to the general public and can be locked down with HTTP in addition to standard Drupal user authentication. We can idle Drupal when not in use, and even run the CMS on a single Kubernetes as the requirement to serve public traffic is removed, which greatly reduces the Drupal traffic. This also entirely removes the need for additional caching layers such as ElastiCache/Redis, and greatly reduces the burden on the database.
Drupal site architecture
To support the robust frontend design system, Drupal is configured to use the Paragraphs for highly-structured content that maps 22 paragraphs to more than 35 user interface elements and components. To simplify the content creation process, custom text were created, and useful Drupal modules were configured such as Allowed , Field , and Quick Node . Additionally, the content administration page was customised for finding content more easily.
The platform supports any number of sites within a single Drupal installation. This is achieved by a configurable sites taxonomy, which allows for sites to be added and configured directly via the Taxonomy UI. This approach means that new sites can be added with minimal effort, and allows for easy content sharing between sites.
Currently, only one Drupal content type, “Flexible page”, is used to build all site content. To create any flexible page, the content author adds internal metadata which is not shown on the page. Used for various purposes, content metadata includes page type, page name, content tagging, and which site(s) the content should display on. Taxonomy has been used extensively for content and site configuration such as colours, icons and product tagging.
If content will be shown as a page rather than just as a referenced content card, paragraph components can be added for simple things such as images, videos and lists, as well as more complex components like stories and highlights. For content reuse, a custom module provides a “component reference” paragraph for referencing other paragraphs. There was a concerted effort to limit the number of Drupal paragraphs while still supporting everything in the frontend design system, so several paragraphs are flexible enough to handle multiple web components.
Although GovCMS does provide several out-of-the-box content types, they were not needed for the initial Digital Earth Australia site launch. Some of the GovCMS functionality leveraged includes user roles, content workflows, security features and media tags. Due to the decoupled nature of the architecture, some common Drupal configuration is not currently used such as image , custom Views and the , Simple XML and modules.
Site creation
Additional sites can be created on the platform with minimal effort — a new Geoscience Australia site environment typically takes just a few hours to set up. Thus, most of the effort for spinning up new sites lies in the communications strategy and content creation rather than system programming or configuration.
Geoscience Australia partnered with Today to develop a robust communications strategy that will be applied to the new sites and adjusted, iteratively, as necessary. The Today strategy team carefully documented a digital strategy “playbook” for the GA communications teams to leverage. Coupled with the highly-flexible design system, each Geoscience Australia website is poised to create an impactful and unique digital presence.
Note that the platform architecture does not use a Drupal approach. Instead, separate sites are built with a combination of Drupal taxonomy site settings and content tagging as well as Vue.js middleware code that associates content with the appropriate site. The custom site configuration includes settings such as a site ID, logo, menus, social media accounts and Google Tag Manager IDs.
Nuxt.js frontend
Built by the Today team with Nuxt.js, Vue.js and TypeScript, the platform’s frontend is based on Atomic Design principles. The frontend system contains more than 80 Vue components to support small elements such as buttons and icons, more complex components such as testimonials and galleries, and page templates for generic and search landing pages.
Each frontend component has a corresponding TypeScript file with mock content that gets compiled into the design system’s storybook . For optimal performance and user experience, the Nuxt Image is used for mobile image optimisation and the module is used for lazy loading images. The Vue and Algolia Search modules support site-wide and customisable search functionality.
Middleware and Quant
The middleware is the glue between the Drupal backend and the Vue.js frontend. The middleware leverages Nuxt.js, the design system and GitHub to generate static output for the website data provided via the Drupal API. Website visitors interact with this static output, e.g. the compiled HTML/CSS/JavaScript, which represents the ultimate in security, performance and scalability.
To generate the web assets, the middleware and frontend code work together to map Drupal content to design system components. Leveraging the Drupal and Nuxt modules, a custom Nuxt module grabs the CMS content, makes adjustments such as adding metatags, and feeds it into the relevant frontend components. The static assets are then pushed to Quant — a global edge engineered for the static web. During the deployment process Quant provides information on current published content and media assets (via md5 hash). This means only content that has actually changed is pushed, which vastly reduces the deployment time over traditional static deployments.
When content changes in the Drupal CMS, it is automatically compiled and pushed to the static CDN, so it’s always up to date. A custom Quant module in Drupal initiates a build when any content is created, updated or deleted by triggering a custom GitHub deploy workflow. Using the site-specific settings, the deployment workflow in GitHub generates the static assets, runs automated tests, deploys assets to and purges the Quant to ensure fresh content for the site audience.
Algolia search
While all of the site content is static, Geoscience Australia required a site-wide content search as well as faceted, content-specific search functionality, particularly to highlight its products and . Flexible search capabilities were achieved with a combination of web components, content metadata, custom , Algolia JavaScript API and Quant-hosted Algolia .
In Drupal, content metadata is added to any “flexible page” such as a “title”, “summary” and “image”. This same metadata feeds search but also internal content references to ensure content cards are consistent across both rendered web components and search results. To communicate this metadata to Algolia, the Vue.js middleware adds custom metatags to each web page such as “search_title”, “search_summary” and “search_image”. Quant is configured to pull out the custom metadata from the pages to populate the search index in Algolia for the particular site.
The benefit this has over traditional static search implementations is content accuracy in search. The search index is updated at the exact same time as it becomes available to the site visitors, meaning there is no latency or delay between content visibility and search results.
To support configurable search pages, Drupal paragraphs are used to specify the page types and vocabularies that will filter the content. These search filters can be both hidden filters or visible facets within the search component. This powerful functionality allows Geoscience Australia to easily create landing pages that, for example, display only products or some combination of content such as news and events. As this is part of the design system, additional components can be coupled with search results for a very flexible and robust user experience.
Decoupled architectures and Quant
The new Digital Earth Australia site is an excellent example of Quant delivering public traffic for a high-profile government agency, using Quant Search, and demonstrating how the solution can equally suit static site generators as well as traditional Drupal installations.
Unlike other static hosting solutions this cohesive solution adapts to all use-cases. Quant provides integrated search, incremental build support, threaded deployment, infinite content revisions and a global edge deployed to more than 100 regions globally — and much more.
The benefits of the Geoscience platform
The new Geoscience Australia platform demonstrates a low-cost, highly-secure Drupal installation with the ability to add additional sites with relative ease. The use of decoupled architecture and static web technologies represents a modern take on government web platforms.
As we see increasing threats in the cybersecurity space we see increasing cost and complexity in building traditional web hosting platforms to stem the tide. This decoupled, static solution does more to secure Drupal, costs less, and performs better to boot.
The future of the Geoscience Australia platform
With support from Salsa, Geoscience Australia is currently building two more websites on the new platform, slated to launch in December, with more to follow. A number of new components, features and improvements will be rolled out in the coming months. This next-generation decoupled web system is part of a broader objective to generate efficiencies and savings for Geoscience Australia via rollout of the architecture to all of its digital assets.
About Geoscience Australia and Digital Earth Australia
Founded in 2001, Geoscience Australia (GA) is the leading public sector geoscience organisation in Australia with a focus on diverse topics such as natural hazards, climate change, environmental issues, groundwater research and vegetation monitoring. Geoscience Australia's geographical scope includes marine areas in addition to Australia’s landmass, and the organisation aims to gather geoscience research and data for the benefit of Australia.
Digital Earth Australia (DEA) is a program of Geoscience Australia that collects satellite imagery and provides this data to the Australian public via downloads, interactive maps and web services. DEA’s mission is to “embed satellite imagery and data into decisions that support a sustainable Australian environment, a resilient society and a strong economy.”