Website

ProjectInfoBox Website
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