Building a Static Website w/ Blog Using Vue JS and Gridsome

Set up a gridsome project to build a static blog using Vue.js. Install gridsome with npm or yarn, create the boilerplate, and run the development server to preview locally.

Explore the Gridsome directory structure, including root package.json and gridsome.config.js, the source folder with pages, layouts, and assets for global styling, plus auto-generated routes and a default layout.

Configure a reusable header component in a gridsome vue app, loaded on every page via the default layout slot. Create navigation with home, about, and blog links, import the header as a component to avoid duplication, and fetch the site name with a static query.

set up sass with a global variables file to share color schemes across pages, enable nesting, and import fonts, so components access styles without repetitive imports.

Configure gridsome plugins to generate routes for blog posts from markdown files, organizing them in a blog folder and building a post template with title, author, and thumbnail.

Learn to load blog content from markdown files into a Vue.js Gridsome site, use GraphQL to fetch post data, and render title, content, author, date, image, and time to read.

Build a dynamic blog roll by creating a blog page that uses GraphQL to fetch all posts, showing titles, authors, thumbnails, and navigation to each post.

Learn to integrate disqus comments into blog posts using an external service, including setup steps, embedding code, and moderating comments, with ads shown unless you upgrade.

Explore using the grid and pages api to generate a page per product from a simulated api, passing product data via page context to render dynamic routes and static pages.