Skip to content

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

License

Notifications You must be signed in to change notification settings

hunsalz/gridsome-starter-wikidata

Repository files navigation

Gridsome Starter Wikidata

Actions Status License Project Status: Active – The project has reached a stable, usable state and is being actively developed. GitHub forks GitHub stars

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