strapi-starter-gridsome-portfolio icon indicating copy to clipboard operation
strapi-starter-gridsome-portfolio copied to clipboard

Build portfolio sites using Strapi and Gridsome

:no_entry: DEPRECATED

This repository is no longer maintained and only works for Strapi v3. To find the newest Strapi v4 starters, check out the starters-and-templates monorepo.


Strapi Starter Gridsome Portfolio

Gridsome starter for creating a corporate site with Strapi.

View the live demoWatch the video tutorialRead the blog post

screen

This starter allows you to easily create a website to showcase your work. It also makes it easy to keep it up to date thanks to Strapi.

It relies on several Strapi features:

  • Collection types for projects and categories
  • Single types for the homepage, the about page and the global config
  • Components for reusable UI components and SEO metadata
  • Dynamic zones to have full control over your content

On the frontend, we're using Gridsome, a Vue.js framework for static sites. It uses GraphQL to query data and Tailwind CSS for styles.

This starter uses the Strapi portfolio template

Check out all of our starters here

Getting started

Use our create-strapi-starter CLI to create your project.

npx create-strapi-starter@3 my-project gridsome-portfolio

The CLI will create a monorepo, install dependencies, and run your project automatically.

The Gridsome frontend server will run here => http://localhost:8080

The Strapi backend server will run here => http://localhost:1337

Deploying to production

You will need to deploy the frontend and backend projects separately. Here are the docs to deploy each one:

Don't forget to setup the environment variables on your production app:

For the frontend the following environment variable is required:

  • GRIDSOME_STRAPI_URL: URL of your Strapi backend, without trailing slash

Enjoy this starter!