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 |
