Website

From CoMakingSpace Wiki

ProjectInfoBox

Website

CoMS Website.png
Status: Released
Release Date: June or July 2019
Initiator: Martin
Team: Kim,Martin
Software Used: Jekyll, GitHub Pages


Since April 2021, our website is hosted on Github Pages.

The old version has been hosted by one.com on https://comakingspace.org. Since the website was developed in a rush when the CoMakingSpace was founded, it did not seem to represent our community approach in an ideal way.

GitHub Pages

In order to account for our community based approach, we wanted to enable our members to participate in the website development.

Therefore, the website is hosted on GitHub Pages. GitHub pages basically takes static files from your GitHub repository and serves them to people browsing your page.

In order to generate the static files, you have different options:

  • Just write good old HTML, CSS and JavaScript
  • Use one of these WYSIWYG editors which led to those "awesome" 90s websites
  • Use a static site generator of your choice (Jekyll, Hugo, etc.)

For us, we opted to use a static site generator. Since GitHub pages supports the upload of a Jekyll project and generates the files for you, we decided to use jekyll.

With this, it is easy for non-IT people to edit the page: Just modify the markdown files and push them to the repository.

The Repository of our website can be found here.

Technological considerations

The website is supposed to be as accessible as possible while at the same time keeping an eye on the maintainability of the code.

During the implementation, the we focused on the following general guidance:

  • Prefer markdown over plain HTML
  • Prefer liquid over JavaScript
  • Implement design in CSS
  • Prefer plain CSS over JavaScript

Site Structure

In general, the website hosts a couple of pages which will most likely not change very often. These pages display general information about the CoMakingSpace, how to get there, etc.

From a more dynamic (not in a technical sense of course) point of view, the Website also displays the upcoming events. These get fed from our calendar.

Unfortunately, this is currently only an iframe, which looks pretty nasty and does not have any responsive features. Replacing this is one of the outstanding ToDos!

An additional feature is the blogging section. In this section we can provide news posts, announce some awesome projects or do anything else that counts as blogging.

Modifying the website

In order to modify the website, all you have to do is change the files in the repository over on GitHub. GitHub will automatically detect the changes and regenerate the site. Therefore, it should be available to the visitors within a few minutes (please wait for the CDN to update itself).

During the development phase please just go ahead and make the changes. After development we should possibly switch to a more workflow-oriented approach such as opening an issue and (possibly) providing a pull request which can be reviewed.

The different party of the website can be modified in different ways:

  • If you want to change the links in the header navigation bar: Please modify the file _data/header_nav.yml
  • Changing the middle footer content: Please modify the file _data/footer_nav.yml
  • Adding or removing supervisors: Please modify the file _data/supervisors.yml
  • Adding or removing sponsors: Please modify the file _data/sponsors.yml
  • Modifying blog posts: Please either modify the correspondent file in _posts or create a new file. Please be aware of the file name format: YYYY-MM-DD-title.md

The Website content itself is written in Markdown, HTML and liquid. In general, you will most likely only need markdown to make the desirable changes.


Files, Folders, explanations

Folder File explanation
/ Root folder, hosts all other files and folders
/ _config.yml contains the overall sites settings used for jekyll. This file also contains the social media links.
_data contains data files which can be accessed via liquid
_data footer_nav.yml hosts the links in the middle section of the footer
_data header_nav.yml contains the links in the header navigation bar
_data managers.yml contains the data about the managers for the about page
_data sponsors.yml contains the names, links and images of our sponsors for the sponsors page
_data supervisors.yml contains the data about the supervisors for the about page
_includes contains html files which can be included in the layouts
_includes footer.html contains the html and liuid code for the websites footer
_includes head.html contains the html code which builds the <head> section of all the other pages
_includes header.html contains the html and liquid code for the header navigation
_includes scripts.html contains the importing tags for the used javascript
_layouts contains html files which provide the page layout
_layouts default.html this is the default layout which is used for most pages
_layouts post.html this is the layout that is being used for blog posts
_posts contains the blog posts. Files have to be named in the following format:YYYY-MM-DD-title.md
_sass contains the Sass files used to style the page
assets contains images and other static files