Week | 2
Project Management
How I’m making this very basic website.
25 January 2018 12:41:
This week’s task is to build a personal site, hosted in the class archive, describing you and your final project.
We should use git to build the site and also, in the future, collaborate at gitlab (as a repository manager, issue tracker, etc). I’ve only used all-in-one solutions, such as Squarespace or Wordpress, to build previous websites and though I’ve been able to successfully adapt some templates with a tiny bit of programming, this will be my very fist time on writing/building a website from scratch.
If you are reading this, it means I have succeeded, ate least minimally.
Even though we are only going to have an actual class about it today, I realised most of the other students had previous experiences in programming and it would’t be a good motivation to fall behind on the very first week, so, just like everyone else, I started on my own.
The beginner’s challenge begun shortly after searching online on how to do it and I realised I had to: update my MAC Operating System; so that I could install Xcode Developer Tools; so that I could run and configure Git; so that it would generate an SSH key for the Fab Academy repository created for me at gitlab.
Done all of the above and, then, had to run Ruby and install Ruby Gems, so that I could install Jekyll (a framework to help manage different sets of pages) to finally be able to start creating my webpage. I decided to use jekyll because it looked less complex than HTML5 or CSS, specially taking into account the purpose of this website which is primarily to store blog posts.
I started going through several installation errors that I managed to overcome by googling for their specific fixes on forums online, which ultimately generated plenty of other errors that had to be researched on how to be fixed too. But I think that’s part of the learning and, in a way, a normal process even the most experienced go through. I’ve also installed Atom as a text editor and created this webpage from a template (minima) at Jekyll.
I wanted to add some images to this post but didn’t manage to yet. Well, it worked by copying and pasting the lines from this cheatlist, but I couldn’t replace the image by one of my own. So, for now, this is the only image I have here:
I’ve done the whole site locally, since I don’t know how to push the files to the git repository yet.
A am also very interested in changing the overall design of this page, but the most important thing now is to have it up and running and start documenting the process.
Will hopefully learn how to do it all later today in class.
25 January 2018 17:53:
In today’s class we’ve learned the basics of HTML and CSS programming. It’s useful to understand how the structuring goes, but, since I had decided previously to use Jekyll / Markdown on my documentation website, I am already working with jekyll’s preset template and most of the learnings cannot be applied to it. Our Jekyll / Markdown class will be only next Monday, and I’m busy developing the ideation of the final project, so, I just have to wait I guess.
Good news is that I managed to push the website and the files to the gitlab page, so, it should be easier to solve the problem with the images, since I expect to be able to link images that are on my repository via their url.
29 January 2018 16:42
I’ve made it! Managed to finally upload images and now I’m able to focus on developing the project rather than the project’s website : ) The problem is that I was copying the images for a folder outside my project’s preset folder (created automatically by the template). For some reason the template isn’t recognising any other file location, even if I provide the full address. Had a great help from our instructors Santi and Xavi and today’s help from my colleague Ilias Bartolini.
So, basically, if I need to summarise how did I do this website, these would be the steps:
1 Updated my OS
2 Installed Ruby and RubyGems
3 Installed Jekyll
4 Created a (local) website using the following commands:
$ jekyll new fabacademy2018
$ cd fabacademy2018
$ jekyll serve
5 Downloaded Atom to edit the template from Jekyll. Started writing and monitored the results locally at http://localhost:4000
6 Installed and configured Git
7 Generated my SSH Key
8 Copied SSH Key to Gitlab: $ pbcopy < ~/.ssh/id_rsa.pub
9 Copied my local website to the previously created student repository at Gitlab by doing:
a) a pull from Git repository to my computer $ git pull
b) copied all files to the local folder created by my pull;
c) did a status check $ git status
d) added all files $ git add .
e) committed $ git commit -m "a message to describe the commit here"
e) pushed files to repo $ git push
et Voilà!
P.S.: A very helpful tutorial I’ve used throughout the installation and customisation of jekyll was the one from Giraffe Academy.
02 February 2018 16:34:
I’ve decided to change a bit the overall design of the website and installed a new theme from jeckyll (Prologue). Made some design adjustments and pushed to the repo.
30 April 2018 15:01:
Here are some updates on this page:
The structure of the website was made in a way that the assessment from the instructors and Fab Academy in general could be easily reached. The plan was to have a simple structure where info about me, the final project and the weekly assignments would be always in a fixed menu, and it would be updated on a week-basis, just like a blog. As explained earlier, I decided to use jekyll because it looked less complex than HTML5 or CSS, specially taking into account the purpose of this website which is primarily to store blog posts.
By using GitLab and adding a .gitlab-ci.yml file to the root directory of my repository, and configuring it to use a Runner, each commit or push I do, triggers my CI pipeline, which is a sequence of jobs to publish an updated website according to the layouts configuration on the YML file (which in this case, comes from the prologue template I’ve used from Jekyll).
Here’s the current YML file I’m using:
Here’s a screenshot of the process I usually do for the push:
For managing the size of my files and, ultimately, not using lots of storage on Gitlab, I’m simply using photoshop to open the and (quick) export the pictures I take as PNGs. I do not convert my screenshots as they are already small (less than 1mb).
Some links I’ve used:
Creating a .gitlab-ci.yml Job’s configuration on Gitlab Jekyll’s Front Matter
03 June 2018 22:01:
Update : My repository was too big, and I had to batch-resize all images. I did so by using ImageMagick, installed through Homebrew.
I have also included the _SITE folder (which is a local copy of all my files, meant to be used for local preview only) in the .gitigonre file, so that it would be uploaded to my Git repository. After doing that, I have removed the cached files by typing
git rm -r --cached _site\*