Project: Sustainica
This project consists of a static website built on top of the Zeppelin template. The system generates HTML, CSS and optimized images by running a program called Jekyll which is written in Ruby.
The project’s deployed files are compiled through Grunt tasks. The front-end code applies Bower, SCSS and various other web tools to construct a fast and modern web site. The content of the site is structured and managed using Markdown and Yaml (yml) files. The layout engine uses Liquid Template (by Shopify) syntax and engine to compile simple HTML and display logic into powerfull HTML structures from simple text files.
The template was heavily modified to adjust to the requirements of the Sustainica event site, but the major building blocks, Grunt scripts, components and file organisation, were kept.
Initially the site code was privately hosted on git.geekli.st, but after a couple of authentication issues and a better offer of Atlassian’s BitBucket we moved the project to a private Git repo on Bitbucket.org.
BitBucket’s web editor allows us to make changes to the content and data files. We plan releases of the site in Trello.
The Template Features
- Once you get the hang of Jekyll it is easy to setup and make changes
- Modern and responsive design
- Integrated speakers and sessions management
- i18n (internationalization)
- SVG icons
- SEO friendly
- Optimized for quick delivery and rendering
Using BitBucket’s Git code repository
- Introduction on the code repository
- Issues: creating, editing, emojies, assigning to users
- Commenting
- Commit annotation and comparison
- Milestones
- Labels: bug, content, feature, installation, layout, major, minor, patch, tweaks, not doing
- Commits
- Branching & merging
- RSS feed to e-mail through IFTTT integration.
- Tags and releases
- Not possible to upload files through the GitLab interface GitLab issue
Release Process
In the beginning the site was build locally after editing the content and layout files using Grunt. When the build process was done, the build folder contents was simply manually FTP-ed to the hosting server. We now can publish the site using Git hooks by pushing the Git changes to specific Git repositories which trigger the Grunt build process when a change is committed.
Software Used
- Adobe Brackets was my main code editor for a while before I switched to Microsoft’s Visual Studio Code after having issues with NodeJS.
- Paint.net for bitmap images (PNG, JPG) - the best free image editing software for Windows.
- Inkscape was used for SVG manipulation - the main site logos are SVG.
- FileZilla for uploading files until I switched to Beyond Compare.
- Beyond Compare for FTP synchronization.
- GitHub Desktop for it’s powerful and useful Git workflow gui.
Using Git
Windows PowerShell and Git for Windows; fixing some issues with dealing with Git in Github Git bash console Tagging: before I figured I can use NPM version I did manual git tag -a v1.4 -m "my version 1.4"
manual
git push origin master
- pushes the local changes to the “origin” git remote repo.
git push ci release
- triggers a “continuous integration” build.
Google Structured Data
The template introduces Schema.org tags which are detected by Google using https://developers.google.com/structured-data/rich-snippets/events.
Using Grunt and NPM
Building the site and execution the various optimizations: SVGMIN, Imagemin, Uglifier, etc. Deployment with grunt; running grunt tasks, …
NPM version: npm version [major|minor|patch] -m "Upgrade to version %s for ..."
Bower Components in this project
Bootstrap Sass Animate.css Sass Waves jquery.appear Sticky-kit superslides compass-mixins jquery-easing-original svg4everybody
NPM Bundles in this project
"bower": "~1.4.1",
"grunt": "~0.4.5",
"grunt-autoprefixer": "~2.2.0",
"grunt-browser-sync": "^2.0.0",
"grunt-build-control": "~0.3.0",
"grunt-contrib-clean": "~0.6.0",
"grunt-contrib-copy": "~0.8.0",
"grunt-contrib-cssmin": "~0.12.2",
"grunt-contrib-htmlmin": "~0.4.0",
"grunt-contrib-imagemin": "~0.9.4",
"grunt-contrib-uglify": "~0.8.0",
"grunt-contrib-watch": "~0.6.1",
"grunt-critical": "~0.1.2",
"grunt-jekyll": "~0.4.2",
"grunt-sass": "~0.18.1",
"grunt-svgmin": "~2.0.1",
"jit-grunt": "~0.9.1",
"time-grunt": "~1.1.0"
What I learned
- Project planning using Trello
- Gathered experience with building static websites using Jekyll
- Create multi-lingual Jekyll websites, with the “jekyll-multiple-languages-plugin”
- For loops, data lists and conditional statements in Shopify’s Liquid template syntax
- Bootstrap’s grid CSS layout system
- Improving my knowledge of the Grunt JavaScript Task runner and build system
- SCSS - “SASS” style sheets
- Working with NPM and Git “tags”
- Improving my Git command-line skills
- Setting up a secure VPS server with remote Git on Ubuntu 14.04 and SSH keys access
- Applying Git “post-receive” hooks in a bare git repository
- Using Schema.org tags