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
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 krashna.nl), through the Netlify build service.
In general, this project follows the common Gatsby.js folder structure:
- Pages are defined in
/src/pages
. The file name 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 thereact-intl
library, integrated bygatsby-plugin-intl
, for translation. - All data on which page generation is based, such as the list of concerts, is contained in
/src/data
.
Adding content can be done easily by adding text or some other data to predefined files, some examples are given below. All content is written in Markdown. If you are not familiar with Markdown, or need some help, check out this handy link
To add a page...
- 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. - 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.
To add a concert...
- Add an entry to the
/src/data/concerts.yaml
list following the same format as the other entries. - Add language-dependent texts to the
concerts.yaml
files in the/src/locales
folder, in both languages.
To add a news post...
- Add an entry to the
/src/data/news.yaml
list following the same format as the other entries. - Add language-dependent texts to the
news.yaml
files in the/src/locales
folder, in both languages.