drehimself / Gridsome Portfolio Starter
Licence: mit
A simple portfolio theme for Gridsome powered by Tailwind CSS v1
Stars: ✭ 329
Projects that are alternatives of or similar to Gridsome Portfolio Starter
Headlesscms.org
Source for headlesscms.org
Stars: ✭ 628 (+90.88%)
Mutual labels: static-site-generator, static-site, jamstack
Hugo Boilerplate
A Hugo boilerplate for building modern websites
Stars: ✭ 58 (-82.37%)
Mutual labels: static-site-generator, static-site, jamstack
Gridsome Starter Bleda
Gridsome blog starter, built with Tailwind CSS
Stars: ✭ 179 (-45.59%)
Mutual labels: static-site, jamstack, tailwindcss
Skeleventy
A skeleton boilerplate built with Eleventy.
Stars: ✭ 318 (-3.34%)
Mutual labels: static-site-generator, static-site, jamstack
contentful-hugo
A CLI tool that pulls data from Contentful and turns it into markdown files for Hugo and other static site generators. It also includes an express server that can be used for local development and content previews
Stars: ✭ 31 (-90.58%)
Mutual labels: static-site-generator, static-site, jamstack
Next Js Blog Boilerplate
🚀 Nextjs Blog Boilerplate is starter code for your blog based on Next framework. ⚡️ Made with Nextjs, TypeScript, ESLint, Prettier, PostCSS, Tailwind CSS.
Stars: ✭ 134 (-59.27%)
Mutual labels: static-site-generator, static-site, jamstack
Awesome Jamstack
Carefully curated list of awesome Jamstack resources
Stars: ✭ 1,012 (+207.6%)
Mutual labels: static-site-generator, static-site, jamstack
jigsaw-docs-template
Starter template for a documentation site, using Jigsaw by Tighten
Stars: ✭ 39 (-88.15%)
Mutual labels: static-site-generator, static-site, tailwindcss
Statiq.framework
A flexible and extensible static content generation framework for .NET.
Stars: ✭ 251 (-23.71%)
Mutual labels: static-site-generator, static-site, jamstack
Eleventy Starter Boilerplate
🚀 Eleventy Starter is production-ready with SEO-friendly for quickly starting a blog. ⚡ Built with Eleventy, ESLint, Prettier, Webpack, PostCSS, Tailwind CSS and Netlify CMS (optional).
Stars: ✭ 139 (-57.75%)
Mutual labels: static-site-generator, static-site, jamstack
sutanlab.id
☕️ My Personal Homepage & Blog site with NextJS. 🇺🇸 🇮🇩
Stars: ✭ 39 (-88.15%)
Mutual labels: static-site-generator, static-site, jamstack
jigsaw-blog-template
Starter template for a blog, using Jigsaw by Tighten
Stars: ✭ 75 (-77.2%)
Mutual labels: static-site-generator, static-site, tailwindcss
hugo-initio
Hugo Theme port of Initio bootstrap template by GetTemplate
Stars: ✭ 58 (-82.37%)
Mutual labels: static-site-generator, static-site
nuxt-starter-netlify-cms
Example nuxt + netlify cms project. Nuxt port of Gatsby starter app.
Stars: ✭ 13 (-96.05%)
Mutual labels: static-site-generator, jamstack
nera
A lightweight static site generator
Stars: ✭ 12 (-96.35%)
Mutual labels: static-site-generator, static-site
voldemort
A simple static site generator using Jinja2 and Markdown templates.
Stars: ✭ 48 (-85.41%)
Mutual labels: static-site-generator, static-site
snipcart-hugo-integration
Hugo Website Tutorial with a Live Static E-Commerce Example
Stars: ✭ 38 (-88.45%)
Mutual labels: static-site-generator, jamstack
jekyll-skeleton
Scaffolding to start with a Jekyll website
Stars: ✭ 27 (-91.79%)
Mutual labels: static-site-generator, static-site
contentz
Create Content, Get a Highly Optimized Website
Stars: ✭ 57 (-82.67%)
Mutual labels: static-site-generator, static-site
tinystatic
A tiny static website generator which is flexible and easy to use
Stars: ✭ 36 (-89.06%)
Mutual labels: static-site-generator, static-site
Gridsome Portfolio Starter
A simple portfolio starter theme for Gridsome
Demo URL
https://gridsome-portfolio-starter.netlify.com
Features
- 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
Installation
- 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 cd gridsome-portfolio-starter-
npm install(This can be a long download because of Cypress. If you don't care about testing with Cypress, remove it frompackage.json) -
gridsome developto start a local dev server athttp://localhost:8080
Testing
I have some basic end-to-end tests using Cypress. You can find them in /cypress/integration/tests.js.
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 cypress.json file.
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.
Notes
- 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:
- Gridsome Starter Blog
- Gridsome Starter Bleda
- Jigsaw Starter Blog - I got a lot of design inspiration from this starter theme.
Other versions
- Nuxt version: https://github.com/drehimself/nuxt-portfolio-starter
- Saber version: https://github.com/drehimself/saber-portfolio-starter
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].