Gridsome Portfolio Starter
A simple portfolio starter theme for Gridsome
- Clean and minimal design
- Tailwind CSS v1 (with PurgeCSS). Using this gridsome plugin.
- Scroll to sections using vue-scrollto
- Blog with markdown content for posts
- Documentation type that shows how to use Vue components in Markdown (click Docs)
- Theme Switcher with Dark Mode
- Search posts with Fuse.js and vue-fuse
- Tags for posts
- Basic pagination
- Syntax highlighting with Shiki (using this gridsome plugin)
- 404 Page
- RSS Feed
- Sitemap in XML
- Install Gridsome CLI tool if you don't have it:
npm install --global @gridsome/cli
- Clone the repo:
git clone https://github.com/drehimself/gridsome-portfolio-starter.git
npm install(This can be a long download because of Cypress. If you don't care about testing with Cypress, remove it from
gridsome developto start a local dev server at
I have some basic end-to-end tests using Cypress. You can find them in
To run tests, first make sure your dev server is running with
gridsome develop. I'm assuming you're using the default port of 8080. If not, change the
baseUrl key in the
After your dev server is running, you can run
npm run test or
./node_modules/.bin/cypress open to start Cypress. The Cypress electron app will run. Click the
tests.js file and the tests will run in an automated browser.
- Based on my personal portfolio website. I wanted to create an open source version with more features.
- Check out a screencast I did where I go through the process of building my website.
- Illustrations from unDraw
- Search is based on Fuse.js and vue-fuse. It only searches the title and summary of posts for now. Some tweaking may be necessary to get it to search to your liking. Check out the fuse documentation for search settings. This PR added the ability to search both "Post" and "Documentation" types.
- Check out these other Gridsome Starters where I got some ideas from:
- Nuxt version: https://github.com/drehimself/nuxt-portfolio-starter
- Saber version: https://github.com/drehimself/saber-portfolio-starter