Gridsome detector

Gridsome logo

Detecting whether a website is built with Gridsome involves looking for specific indicators in the website’s source code.

Gridsome is a static site generator that leverages Vue.js, and there are various markers that can help identify its usage.

Here’s a step-by-step guide on how to do it:

  1. Open the Page Source: Right-click on the webpage and select “View Page Source” or press Ctrl+U (Windows) or Cmd+Option+U (Mac) to open the page source code.
  2. Look for Gridsome-Specific Meta Generator Tag: Search for a meta tag that indicates Gridsome. Use Ctrl+F (Windows) or Cmd+F (Mac) to search for:
    • <meta name="generator" content="Gridsome">
  3. Check for Gridsome Path Structure: In the source code, look for the presence of generated paths that may include /__graphql, which is indicative of GraphQL usage, often featured in Gridsome sites.
  4. Look for Vue.js and Gridsome Components: Search for Vue.js components or Gridsome-specific elements. You might see JavaScript references like import statements for Gridsome components such as:
    • import Layout from "~/layouts/Default.vue"
    • import PageLayout from "~/layouts/Page.vue"
  5. Find Gridsome Build Tags: Sometimes you can find tags associated with Gridsome during the build process in the HTML comments, like:
    • <!-- Built with Gridsome -->
  6. Inspect JavaScript Libraries: Check for the presence of certain JavaScript libraries that are often used alongside Gridsome. You can look for:
    • <script src="/gridsome.app.js"></script>
    • <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  7. Examine the Sitemap: If the website has a sitemap available, usually located at /sitemap.xml, it may provide hints of Gridsome routes and structure. This can give insights into how the content is organized.