Note: All the files here
- Website creation
- Code Editor and other (hopefully good) practices
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 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
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.
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.
What Jekyll does behind the scenes, is fairly simple in concept: some of the content htmls like
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.
Some of these variables come from the
_config.yml file, found on the webs main directory:
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:
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
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:
Some attention has to be paid for the
/ not to be duplicated.
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.
I already had generated a SSH key after having used my GitHub account, so the inclusion of the public key was fairly simple:
Commits and Push to GitLab
First step is to clone the remote repository found in:
Once the changes are done locally, using the desired framework, one can add, commit and push to the remote repository:
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:
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):
The more important source of space would be the images, so they must be edited in order to reduce their sizes.
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:
- Gif Creation: I use ImageMagick for the images in a folder (below example with all the .jpg in the current directory):
NB: imagemagick’s convert documentation can be found here