This repository contains the code and content of the SI's website. The website was developed using Gatsby by Ilias Trichopoulos in collaboration with Konrad Seifert and is hosted on Netlify.
NetlifyCMS was integrated to provide CMS features for easy content editing. It is available at https://simoninstitute.ch/admin
Changes in the main branch of this repository will be deployed on the production website.
| Page | Description |
|---|---|
| Home page | The page available at https://www.simoninstitute.ch/ |
| Blog overview page | The page available at https://www.simoninstitute.ch/blog/ listing all blog posts |
| Blog post page | The page displaying the actual blog post |
| Blog tag page | The page displaying all blog posts of a particular tag, available at https://www.simoninstitute.ch/blog/tag/[name-of-the-tag]/ |
| Member detail page | The page displaying information about a team member, available at https://www.simoninstitute.ch/about/member/[name-of-team-member]/ |
| Our work page | The page available at https://www.simoninstitute.ch/our-work/ listing areas of work with related blog posts. |
| Project detail page | |
| Projects category page | |
| Projects tag page | |
| Legal page | The page available at https://www.simoninstitute.ch/legal/ |
| Fundraising page | The page available at https://www.simoninstitute.ch/fundraising/ |
| About page | The page available at https://www.simoninstitute.ch/about/ |
| Contact page | The page available at https://www.simoninstitute.ch/contact/ |
| Thank you page | The page available at https://www.simoninstitute.ch/thank-you/, used as a redirect page for when someone contacts you through the contact form of the Contact page. |
| 404 page | The page someone lands to when the URL they are trying to load does not correspond to any page. |
All the content of the website lives in the /src/content folder. The content is grouped in subfolders that represent different content types. Do not change the names of these subfolders because the website will not know where to find the content. The subfolders are:
Each subfolder inside the blog folder represents a blog post.
The name of the folder defines the URL of the blog post. For example, the src/content/blog/review-of-inception folder corresponds to the https://www.simoninstitute.ch/blog/post/review-of-inception/ page. Changing the name of the blog post folder will change the URL.
Inside a blog post folder there is an index.md file which contains the content of the blog post. See the blog post documentation for more details about the content structure of a blog post.
Each subfolder inside the member folder represents a member of the team.
The name of the folder defines the URL of the member detail page. For example, the src/content/member/konrad-seifert folder correspnds to the https://www.simoninstitute.ch/about/member/konrad-seifert/ page. Changing the name of the member folder will change the URL.
Similarly to the blog folder, inside the member folder there is an index.md file which contains the content of the team member. See the member documentation for more details about the member content structure.
Same as above, but for the project content type. The name of the folder defines the URL and changing it will alter the URL. See the project documentation for more details about the project content structure.
The project content type has been archived.
The subpage content type allows you to create simple pages with the "standard" layout. The standard layout is the "side-by-side" title and content layout that the project pages also use. The subfolders of this folder represent different pages where the name of the subfolder is the URL of the page. For example, the src/content/subpage/legal folder corresponds to the https://www.simoninstitute.ch/legal/ page.
As above, each subpage folder contains an index.md file with the contents of the page. The content structure is a more simplified version of the project content structure. See the subpage documentation for more details.
Some pages need a customized layout. The files listed in this subfolder represent the content of each individual page.
For more details, see the documentation of the custom pages:
The _configuration folder includes different kinds of configuration options for the website:
- Texts of the 404 page
- List of blog posts tags that are featured in the blog overview and blog tag overview pages.
- The links of the footer
- Metadata including the default SEO title and description
- Navigation menu items
To display a blog posts in a section of the "Our work" page, a category needs to be assigned to it. To add/remove categories you'll need to edit this content type.
Each team member can have a group assigned to it. To add/remove groups you'll need to edit this content type.
All images can be found in the /src/images folder. The idea of grouping all images together is to enable the feature of an "image gallery" once a CMS is integrated. You can upload images here and reference them in the content of the website.
To update the content and preview the changes before publishing them, follow this procedure:
- Go to the
update-contentbranch of this GitHub repository. - Perform the changes that you want and "commit" your changes.
- Create a pull request against the
mainbranch. - Wait for Netlify to create a preview link.
- Check the preview link to visualize the changes you made.
- Make further changes if needed.
- Once happy with how the changes look like on the preview site, merge the pull request. This will trigger a production deployment and your changes will shortly become live.
The website relies on the following services:
- GitHub: Hosting of the contents and the code of the website
- Netlify: (Free) hosting of the actual website, connected to the GitHub repository.
- Basin: Backend of the contact form.
- Airtable: Application form.
Add the following at the top of the /static/admin/config.yml file:
local_backend: trueand run:
yarn start:cms