Going online!

Note: All the files here

Contents

Website creation

For the website creation process I explored some different ideas, ranging from just using a HTML from scratch, using Bootstrap templates or others. Finally, I decided to use the Jekyll Framework for it’s creation due to the simplicity of the process and the clean results you can get.

Jekyll Installation

Jekyll is basicly a static site generator. Using a template, it converts raw text files that can be written using Markdown or even HTML and renders the content using it’s own process called Liquid.

The process to install jekyll goes through a ruby based gem installation:

 # Install Jekyll and Bundler gems through RubyGems
gem install jekyll bundler

Once the jekyll bundler is installed, the process of creating a website is fairly simple. Either one can use an existing template or create it’s own. I chose the Jekyll-Pithy and tweaked some items in order understand the way sites are done in this way and personalise mine.

Jekyll Usage

On the website’s local directory, in order to edit the website content one can execute the commands below to create a localhost which will render it’s content.

 # Build the site on the preview server
bundle exec jekyll serve

# Now browse to http://localhost:4000

What Jekyll does behind the scenes, is fairly simple in concept: some of the content htmls like index.html, about.html have a relational sintax which refers to internal variables in the environment and are used by the renderer in order to generate the static site.

for post in site.posts 
    unless post.next 
        <h2></h2>
        <ul>
    else
    	...
    <li><span></span>» <a href="/2018/labs/barcelona/students/oscar-gonzalezfernandez/"></a></li>
endfor

Some of these variables come from the _config.yml file, found on the webs main directory:

# Site settings
title: OGF - Fabacademy 2018
motto: Óscar González Fernández - Fabacademy 2018 Website
email: your-email@domain.com
description: > # this means to ignore newlines until "baseurl:"
  Write an awesome description for your new site here. 
baseurl: "/2018/labs/barcelona/students/oscar-gonzalezfernandez/" # the subpath of your site, e.g. /blog/
url: "http://archive.fabacademy.org"
github_username: oscgonfer

# Build settings
markdown: kramdown

Some others are generated internally by the code depending on the number of posts published and some other variables.

Finally, the website includes plain text mainly-content files into the site if they are properly referenced by the code. These are normally called posts and have a header called Front Matter, which definesx the layout and some items for titles, variables and so on:

---
layout: post
title:  "Week 01 - Principles and practices"
date:   2018-01-23
---
In this week's assignment I will describe my **initial** thoughts for the course's final project.

The way the formatting is done is via .scss files, which are extensions of css files that use variables and extended functionality that normal .css lacks from. Some of the formatting of this website has been modified from the original in _layout.scss.

Pipeline Configuration

The results are built either in the local server, located the _site folder (not synced by git) or using a pipeline in places such as GitLab or GitHub. For Gitlab, the pipeline’s job is triggered by the .gitlab-ci.yml available in the jekyll’s repo itself, by setting the urls in the ._config.yml to be:

baseurl: "/2018/labs/barcelona/students/oscar-gonzalezfernandez/" 
url: "http://archive.fabacademy.org"

Some attention has to be paid for the / not to be duplicated.

Git

Git is a free and open source DVCS (distributed version control system) designed for handling versions and collaboration in projects. It’s organised in repositories (projects) in which several collaborators can make modifications, containing branches for different tasks, being normally the main branch called master. Part of the fun using Git is that one can return to previous files status by reverting the HEAD position (the version we see) in the git log.

Image credit: Git

Git’s usage is fairly simple via command line, and my experience is reduced to this and the interfacing with GitHub.

SSH key

I already had generated a SSH key after having used my GitHub account, so the inclusion of the public key was fairly simple:

➜ ~ cd .ssh
➜  .ssh ls
id_rsa      id_rsa.pub  known_hosts
➜  .ssh cat id_rsa.pub
ssh-rsa AAAAB...oscgonfer@gmail.com

Commits and Push to GitLab

First step is to clone the remote repository found in:

 ➜ git clone git@gitlab.fabcloud.org:academany/fabacademy/2018/labs/barcelona/students/oscar-gonzalezfernandez.git

Once the changes are done locally, using the desired framework, one can add, commit and push to the remote repository:

➜ git add .
➜ git commit -am 'Changes here and there'
➜ git push origin master

Finally, since the website is going to be built using the gems on GitLab, some tweaking had to be done in the site.urls, and resulted in a list of commits that could not be rebased and pushed using git to the master branch, since it’s protected against git push -f:

➜ git lg
* 4e38ee0 (HEAD -> master, origin/master, origin/HEAD) First week assignment: Principles and practices
* 79a9c20 (tag: 1.0.0) External links on new windows - 2
* 482f116 External links on new windows
*   4b3ad24 Merge commit '3c66a9b'
|\
| * 3c66a9b Fix merge conflict
| * aea5197 Fix links
| * f780f77 Fix links
| * 23d7b8a Fix links
| * aeaab89 Fix links
| * 5e97a13 Fix links
| * 34e7951 Fix link
* | 1114d33 Fix link
|/
* 9424e36 Add Gemfile

Code Editor and other (hopefully good) practices

For the edition of the website, I will be using Sublime Text in combination with the command line tools that Jekyll provides in order to build the website. Below, a screen capture of this post and how it looks in my editing environment:


In order to check the size of the website, I use disk utility in the command line and verify that each push won’t hold more than 2MiB of content (I compare before and after sizes):

➜  Gitlab Repo cd oscar-gonzalezfernandez/
➜  oscar-gonzalezfernandez git:(master) ✗ du -sh *
4.0K	Gemfile
4.0K	Gemfile.lock
4.0K	README.md
4.0K	_config.yml
 12K	_includes
 12K	_layouts
124K	_posts
 16K	_sass
 14M	_site
4.0K	about.html
4.0K	archive.html
8.0K	css
 20K	favicon.ico
4.0K	feed.xml
8.0K	finalproject.html
 15M	images
4.0K	index.html
100K	scripts
 12K	semi-finalproject.html

The more important source of space would be the images, so they must be edited in order to reduce their sizes.

Image edition

  • Screen Captures: Mac has an integrated image capture facility by pressing Cmd+Ctrl+Shift+4, which will copy the screen capture over to the clipboard. Then, I open Preview (Cmd+Space + Preview) and Paste the image, saving it normally with .jpg format in a very low size.

  • Images composition: I use Photoshop for the image composition and saving them as jgeg.

  • Image resizing: I use ImageMagick to resize images in bulk (when needed in the process, for example with actual pictures taken from a camera), using for instance691200px limit:

➜  oscar-gonzalezfernandez cd images/gif
➜  gif git:(master) convert 09Week_MillingInProcess.jpg -resize 691200@ pixel_09Week_MillingInProcess.jpg
  • Gif Creation: I use ImageMagick for the images in a folder (below example with all the .jpg in the current directory):
➜  oscar-gonzalezfernandez cd images/gif
➜  gif git:(master) convert -resize 500 -delay 50 -loop 0 *.jpg animation.gif

NB: imagemagick’s convert documentation can be found here