FreeST Website Complete
Motivation
FreeST’s old page is just a simple information page at FCUL’s RSS page (it has since been updated with more modern styles). FreeST had already grown beyond a single page website, for example with its separate TryIt website where visitors could program using FreeST in their browser.
Taking advantage of the fact that we wanted to transition to GitHub instead of the faculty’s self-hosted GitLab, we decided to create a better and more complete website using GitHub pages. Since it was hosted by GitHub itself, availability is near permanent and its easier for any one from the project to edit and change whatever is needed.
For this new website we envisioned the following contents:
- Download page with every FreeST version (complete with release date and release notes)
- FreeST tutorial
- Documentation for FreeST’s standard libraries
- Team page
- Online FreeST editor and runner
For inspiration we looked at other websites and how they organized their content:
Implementation with Jekyll
FreeST’s new website wasn’t something complex, most of its content would be static in fact. After searching for some options, Jekyll seemed to be the better one for its simplicity, integration with GitHub Pages and, above all, because it uses Markdown for its pages’ content.
Using Markdown is great because most (if not all) programmers are used to its syntax and frequently write with it in a programming context. FreeST developers could easily write documentation or just add note about some new feature and they would be indirectly writing for the website at the same time.
Alongside Jekyll, we were just missing a theme that already had some base styles that we could further customize or add if needed. We ended up using Just the Docs which has a lot of features for documentation - the main aspect of FreeST’s website.
TryIt integration
We were able to implement an fresh TryIt editor similar to the old one using Ace as an editor. However, there was an issue with our backend running in HTTP while the frontend was HTTPS. You can read all about it in this post.