Skip to content
Website for Krashna Musika - Student Society for Classical Music in Delft
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.
static Schedule bug fix May 8, 2019
.editorconfig Initial commit Feb 7, 2018
_redirects Update _redirects Jun 12, 2019
gatsby-config.js Move to different internationalization framework Apr 13, 2019
package.json Pin Gatsby version to temporarily fix issue Jun 26, 2019

Krashna Musika
Krashna Musika Website

Static site generator for the site of Delft's student music association Krashna Musika, built with React and Gatsby.js.


To get started, you'll need the Node.js environment and the Yarn package manager. Once you have those installed, run the following commands from the root directory of this repo:

yarn global add gatsby-cli



To start a development server (with live-reloading), run:

yarn develop

There will now be a server listening on localhost:8000!


To build a production bundle, run:

yarn build

Changes to the master branch are automatically deployed to the live site (at, through the Netlify build service.


Overall Structure

In general, this project follows the common Gatsby.js folder structure:

  • Pages are defined in /src/pages. The file name base of each JS file (excluding the .js extension) is used as the URL of the corresponding page.
  • Page templates (boilerplate structures for how different types of pages should look) are located in /src/templates.
  • Components which these pages and templates use are contained in the /src/components folder.

However, there are some ways in which it differs, to offer internationalization and other features:

  • All translations are contained in the YAML files of the /src/locales folder. Each sub-folder contains a copy of each translation definition file, in a specific language. These translation files are compiled down to JSON, which is served alongside the rest of the content and dynamically inserted into the page at runtime. We use the react-intl library, integrated by gatsby-plugin-intl, for translation.
  • All data on which page generation is based, such as the list of concerts, is contained in /src/data.

Adding a Page

To add a page...

  1. Add a JS file in /src/pages with as name the URL you want to put that page on. When in doubt on how to structure this file, have a look at the other existing pages in that folder.
  2. Add the needed translations for any translation keys you use, in /src/locales. Refer to existing pages and translations for examples of how one can access such a translation key in the page file, and how this can be defined in the translation file.

Adding a Concert

To add a concert...

  1. Add an entry to the /src/data/concerts.yaml list, following the same format as the other entries.
  2. Add language-dependent texts to the concerts.yaml files in the /src/locales folder, in both languages.
You can’t perform that action at this time.