Week 01
Project Management
For me it was a bit of a delayed start of the first official fab week, had a great work project that kept me busy till saturday but catching up as we speak. Lucky for me we managed to get through a lot of the basics during Bootcamp week. The assignment of this week is to plan and sketch a potential final project plus build a personal site in the class archive describing you and your final project.
- plan and sketch a potential final project, build a personal site in the class archive
- find the limits and uses for the pill box
- check the formerstudents pages
- create a solid base
There is a basic template using MarkDown set up in Gitlab for us by Fab Academany
which looked like this in folderstructure on gitlab:
and like this in webside view
But my eyes needed some more comfort i decided to use a bit more complicated way using HUGO, which is new for me so figuring it out as we go.
I found online that Hugo is made up from
- JavaScript
- HTML
- CSS
which i also found back in the folder structure, which i am puzzling to understand as we speak.
one thing i learned already during Bootcamp week was to start the local website in the terminal:
cd /Users/loes/Documents/FABLab/Fabuloes
hugo server -D
ofcourse i did it wrong first
I use Visual Code to create the website locally so i am not depending on the internet. How to push, pull and merge to Gitlab is something i need to learn. Git tutorial is on the todo list for this week.
Luckily enough Nadieh, one of my fellow students shared her notes with me which gave me something to start with in combination with watching the video from last year and this year i feel like i am catching up.
Most of the trying out with finding a theme and with copy and pasting the HTTP version of the http://fabacademy.org/2021/labs/waag/students/loes-schakenbos i started to look in how MarkDown functions.
Setting up a SSH KEY
I used this guide from the Fab Academany https://gitlab.fabcloud.org/help/ssh/README#generating-a-new-ssh-key-pair
checking Open SSH version
ssh -V i have LibreSSL 2.7.3
to create a SSH account
ssh-keygen -t ed25519 -C “loes_sch@me.com”
press enter for the default placing otherwise the key will not be used automatic
I had to do this a few times because i made the mistake off not looking what the number where for and just copy past the codes.. this lead to me unintentionally trying to create a ED25519 and an RSA key at the same time but not correctly. So after some coffee i got here:
Generating public/private rsa key pair.
Created directory '/Users/loes/.ssh'.
Enter passphrase (empty for no passphrase):
code
I did it without a passphrase to make my life less complicated but if needed i can add it later (when i understand better) I i want to change it later this would be the code, although i should read the guide again by then.
ssh-keygen -p -f /path/to/ssh_key
I copied my SSH with the following code:
pbcopy < ~/.ssh/id_ed25519.pub
copied this into my setting/ssh key in my gitlab account
to add my gitlab account to my hosts i ran this code:
ssh -T git@gitlab.fabcloud.org with the answer yes it got confirmed
Welcome to GitLab, @loes.schakenbos!
I ended up doing this whole process twice to understand better what i was doing then i was ready for the status pull push moment .. at least thats what i thought..
one important note: make sure you are in the right directory - its adds everything underneath
git add .
Gives you the status on your git
git status
to pull changes from the site
git pull
to merge changes if needed
git merge
then finally tell git that you wanna commit
git commit -m ‘test’
4 files changed, 51 insertions(+), 7 deletions(-)
git push
here it all went wrong.. git asked me for a password, which i don’t have for gitlab and i was pretty sure the whole without passphrases for the SSH key worked..
remote: HTTP Basic: Access denied
fatal: Authentication failed for 'https:/'...
it took a smart remark from a fellow student and a bit of help from Henk to made me realize the clone on my computer was HTTP based.. which i also could have read from the message Terminal gave me.. :)
git clone git@gitlab.fabcloud.org:academany/fabacademy/2021/…"
and then from git add . again and it worked
a day later i decide to throw away my ‘nederburg-hugo’ and change it for ‘hugo future imperfect slim’ - doing this came with a whole set of new challenges i followed the Hugo site https://gohugo.io/templates/homepage/ amd the gitlab page info from the theme itself.
it brought me very far although in the end i still had a bit of a fight to get it online with gitlab, first because of the wrong base URL in de config file, which was easy enough to change into the Fab Academy site. which gave me an error message:
But once that was fixed more problems came to the surface, apparently my side used absolute url absURL and not relURL.. with the help of a fellow student who is more familiar with code it is working again, took a bit of juggling and if i understood correctly some unorthodox coding but we got there.
First we changed relative URLs into TRUE in the config file but that didn’t fix the whole problem.
So Nadieh told me to also change this line in the featured.html
var path = "{{ .Site.Params.fullURL }}"
Which if i understand correctly she found out in the main.js file where it states:
var lang = document.documentElement.lang;
var path = "/index.json";;
if (lang != "{{ .Site.Language }}") {
path = "/"+lang+"/"+"index.json";
}
On the last hours of before the week was over i was pushing my site again and realized it still used some of my older images, i named another file as placeholder but it still took the old file which was renamed and place on gitlab.. this confused me a bit but i guess it stayed in the cache? renewing the site didn’t help so i used an simple way. Renamed the placeholder in to something else and with find and replace replaced them all in my md documents. As you would guess this did the trick, although i am pretty sure there is a more elegant way to do this.
For now i think the base of my site works fine for me but i am sure the coming 6 months i will learn more on how to adjust and code a bit. HTML tutorial is on the list.
Resizing Images
a tool recommended to downsize images for the site was ImageMagick which on mac can be installed via HomeBrew
brew install imagemagick
brew install ghostscript
magick convert About.jpg AboutLoes.png
that went smooth.. now how to downsize..
magick convert About.jpg -resize 50% AboutLoes.png
more ways to do this to explore
Student Agreement
another thing to do this week was to download the student agreement and put it into your site Student Agreement
this was the easiest thing that i had to do this week
cmd C and cmd V
Although funny enough on this easy point i realized i couldn’t even make another page appear at the top menu of my site, time to do some tuturials and realize that i wanted to make a cleaner start hence the changing of theme (see above)
Some terminal code to remember
tells you the size of the directory where you are in
du -sh *
- Learned to work with GIT and Terminal
- Document more links and screenshots as the week progresses
- find ways to make my site more how i want it to be.