Gridsome Starter Wikidata

This is a boilerplate starter, aiming to showcase how Gridsome and an external data source (e.g. Wikidata) can nicely work together.

Demo URL

https://hunsalz.github.io/gridsome-starter-wikidata

Features

• Uses Wikidata as external data source
• Enables downloads of external media data
• Make use of GitHub actions / CI/CD pipeline
• Shows a waterfall grid / aka masonary grid
• Shows tagging capabilities
• Shows favorite filter function
• Enables dark & light mode
• Uses CSS variables, SCSS & BEM for styling
• Shows PWA capabilities

Install

1. Install Gridsome CLI tool if you don't have already

npm install --global @gridsome/cli

2. Install starter

1. gridsome create my-gridsome-site https://github.com/hunsalz/gridsome-starter-wikidata.git
2. cd my-gridsome-site to open folder
3. gridsome develop to start local dev server at http://localhost:8080

GitHub Actions

Project includes GitHub Actions by default.

skip ci

GitHub Actions run automatically whenever you push to your Git repo. Add skip ci to commit header to skip a CI run.

GitHub Pages

GitHub Actions workflow contains GitHub Pages as deployment target. By default GitHub Pages deploy is skipped until GH_TOKEN is set as repository secret var. Prerequisite is that you have created a corresponding token.

Development support

If you want to verify your local build, you can easily mount your dist folder into a nginx container.

docker run --rm --name nginx-stage -p 8080:80 -v ${PWD}/dist/:/usr/share/nginx/html/:ro -d nginx:latest

Afterwards visit http://127.0.0.1:8080/

If you set PATH_PREFIX=/gridsome-starter-wikidata just run:

docker run --rm --name nginx-stage -p 8080:80 -v ${PWD}/dist/:/usr/share/nginx/html/gridsome-starter-wikidata:ro -d nginx:latest

Afterwards visit http://127.0.0.1:8080/gridsome-starter-wikidata