And so it begins! The Week 1 assignments are split into two pages since the Project Management/Website Setup/Documentation part feels separate from the Final Project reflections.
Assignments
Our tasks for this week are:
- Do a git tutorial
- Make a website and describe how you did it
- Introduce yourself
- Document the steps for uploading files to repository
- Push the website to the class archive
- Sign and upload the Student Agreement
Working with Git
Git is a popular version control system on which an innumerable words have been written. I will write a few more now. Lots of documentation, as well as tutorials, are available on the official Git website linked previously.
Git is a system which is:
- Free and Open Source
- Fast
- Scalable
- Reliable
- Distributed Development environment
It has a local/remote structure as shown below:
Installing Git
Many versions of Git are available for download on the website. I’m running Windows on my machine so I grabbed the appropriate version:
I clicked through the default installation settings to complete the Setup Wizard.
Of note, installing Git also installs a command line shell called Git Bash which can be used to interact with Git rather than the native Windows command line
Setting up local Git repository
In the Git Bash terminal, I entered my Git username and email:
git config --global user.name "your_username"
git config --global user.email "your_email@mail.com"
I created a folder in my Documents for my Fab Academy work to live.
Generating my SSH Key
To check if I already had an SSH Key on this computer:
cat ~/.ssh/id_rsa.pub
To generate my SSH key:
ssh-keygen -t rsa -C "your_email@mail.com"
To see the key that was just generated:
cat ~/.ssh/id_rsa.pub
To copy my key (Windows):
clip < ~/.ssh/id_rsa.pub
I opted not to enter a passphrase for pushing & pulling because it would become tedious to enter the password each time.
Setting up my Gitlab repository
As part of taking Fab Academy, each sudent recieves a Project / Repository on GitLab to be used to host our websites, where we document our work throughout the course. What’s more, the Powers That Be at Fab Academy have committed to hosting these sites indefinitely! So there is a rich and ever-growing repository of data composed of all the previous Fab Academy students. A beautiful thing.
My Gitlab repository can be found here. You’ll note that my repository links to 2018 rather than 2024- that’s because this is actually my second round with Fab Academy! I enrolled previously in 2018 but never ended up graduating (but I did get a job…which was my goal in enrolling in the first place!). I’ve always had it in the back of my mind to enroll again and this time, graduate. So here we are.
Linking local Git repository to remote Gitlab repository using SSH
I entered the SSH key generated by git into my Gitlab repository (under User Settings –> SSH Keys and then pasting the key that I copied in the Generating my SSH Key step):
Once my SSH key was added to my Gitlab page, I was able to use clone my Gitlab repository locally onto my computer using the SSH key. It was a little different for me because I already had a version of my website from 2018 in my Gitlab repository. I decided to copy that work into another folder on my laptop to keep some record of it, but to move in another direction with my website.
Git Workflow: Pull-Add-Commit-Push
When running Git in the command line (Git Bash), the first thing I like to do is git status to see where I am in terms of the state of my local repository in comparision to my GitLab repo. If there are any updates in the remote repository which are not propagated to my local repo yet, the git pull command would ensure that my local repo is now up-to-date. I can then happily go about making updates and edits in my local repo. Once I’m satisfied with my local changes, running git add . (or git add [filename] can be used to add a specific file or set of files) will add all or a selection of files to the staging area. I think about this step as writing in pencil. Running git commit -m "[descriptive commit message]"moves those staged changes from pencil to pen, but the commit is reflected only locally. To push the committed changes to the remote repo hosted on GitLab, the final step is to run a git push command. At any point I can run git status to see where I am in the workflow.
Main git commands are:
$ git status
$ git add .
$ git commit -m "descriptive message"
$ git push
$ git status
Setting up my website
There are three main options available to Fab Academy students in terms of website strategies.
- Use the default student template (HTML)
- Use a fancier HTML template
- Use a Static Site Generator (written in Markdown)
Because (a) time is at a premium to me over this course (I am also working on top of Fab academy), (b) I am not a web developer, and (c) I want to have a website which is aesthetically pleasing, easy to navigate, and that I’m proud of to showcase my work, I opted to for a static site generator for my website. Even more specifically, I opted to stand on the shoulders of a notable Fab Academy giant and work from the website of previous Fab Academy student Nadieh Bremer who did an outstanding job of documenting her work and also built a site which is beautiful and intuitive. Working in Markdown rather than editing the raw HTML will hopefully allow me to document more efficiently and quickly, so I can spend more time on the projects and my work and less time wrestling with HTML.
As the course progresses I’ll figure out how to customize her site further to make it mine. Nadieh used a Static Site Generator called Hugo to create her website.
Installing Hugo
I followed the instructions on the website to install Hugo and all the prerequisites.
Go is one of the prerequisites listed to use Hugo, as is Git (but of course I already had Git installed).
Using Hugo
I looked through the quick start guide to Hugo but found that it didn’t necessarily apply to me because I was going to clone and work from an existing website rather than start with a fresh instance of a Hugo template to fill in.
I cloned Nadieh’s fab academy page into my local Git repository (emily-eickhoff) and then had to try to figure out how everything was structured. Nadieh has been highlighted as a student who documented her work incredibly thoroughly which meant it was easy to follow along in her process. But also that her website has quite a lot of content it it to sift through. Jury is still out whether working from her website was the right call rather than building up my own from an out-of-the-box Hugo theme..but for now, I’m here in Nadieh-flavored Hugo land. There are still some styling (font and accent color, icons) as well as some aspects of the navigation (and updating the footer…) that I haven’t figured out yet. I’ll need to go through more of Nadieh and Hugo’s documentation to learn where to change all of these things, but for now it’s good enough.
Since I’m using Hugo for my website, I have to spin up a local server in order to generate the HTML code to preview my website locally before pushing to the remote server. This is done with the following command in the Git Bash window:
$ hugo serve -D -F
Where the -D makes sure to include pages marked as draft, and the -F will include any page with a date set in the future. You can find all the options possible for hugo on the “Basic Usage” page, which also explains a little more about using Hugo in general.
Code Editor: Visual Studio Code
I used a popular code editor called Visual Studio Code to write the content for my website in markdown. VSC also has GitLab integration which allows you to make Commits to git right from the VSC GUI.
Markdown
The content of each page and documentation post is written in markdown rather than raw HTML. Thank you Nadieh for the following cheatsheet on writing with Markdown:
## H2 header
### H3 header
#### H4 header
_italics_
**bold**
`inline code`
```html
<!-- syntax highlighting in longer code blocks -->
\```
- list item
- list item
[link](https://www.url.com)
There’s a bigger Markdown Cheatsheet. Here are the possible language options for the syntax highlighting.
Optimizing Images
To make the images smaller I planned to use ImageMagick. However, I wasn’t able to successfully run it from the command line this week so I’m pushing that off until I have the ear of an instructor to figure out what I’m doing wrong.
As a workaround I used the Resize Image option in the default Image viewing software in Windows to decrease the size of each image, and then ran each batch of images through tinypng.com to compress them. Not the fastest nor most efficient way of doing it, but it got the job done and hopefully by next week I’ll have figured out how to get ImageMagick up and running to do bulk image optimization.
Reflections
Interestingly, I found myself procrastinating on Fab Academy work with other work-related tasks that kept coming up during the week. Time management is definitely going to be a challenge for me during this course.
Continued Musings..
My website will be a a living work of documentation. In it’s current incarnation it is a clone of previous Fab Academy student Nadieh Bremer, documentation extraordinaire. :D
However, I’ve been daydreaming more about what I want my website to capture if I could do anything (aka was not limited by my technical web development skills (or lack thereof)). What do I want it to elicit in visitors to the site? I’m imagining it, in its full realization, as almost a work of art beyond just a place to host my portfolio. This inspiration struck me as I was standing next to the sea, contemplating life after a quick dip in the chilly Mediterranean.
There’s this idea in Barcelona, a Catalan expression, of “Seny i Rauxa.” “Seny” means common sense, rationality, reason. Order. “Rauxa”, in contrast, refers to a creative, wild, implusive burst of activity or chaos; unapologetic, raw energy. They are linked together as a sort of Catalan version of yin & yang - a tension from which balance arises. I’ve been thinking about this expression both in terms of the city of Barcelona itself, but also in terms of the Fab Academy. My mission in Fab Academy is to combine the rational, calculated world of machines with the messy, mysterious, organic world of biology and anatomy- specifically, hearts. Seny i Rauxa.
I was describing this idea to a friend and he started entering my words into a generative AI console just for fun. I also imagined some Gaudi influences, maybe a lot of black and white, with vibrant splashes of color for the “rauxa,” and curves rather than straight lines. Something that defies/goes beyond the standard framework of a website: text that doesn’t just track horizontally, but curves or winds or meanders. The combination of organic structures with the digital world.
These are some of the AI generated concepts (Thank you @Scott Gilroy and ChatGPT (with DALLE-3)!):
Interactive Dual-Themed Layout:
Prompt: A website mockup in portrait orientation, illustrating the theme ‘seny i rauxa’ with a dual-themed design. One side of the website represents ‘seny’ with a structured, grid-like layout in monochrome tones, showcasing rationality and order. The other side embodies ‘rauxa’ with abstract, free-flowing designs in vibrant colors, representing creativity and chaos. The navigation allows users to switch between ‘seny’ and ‘rauxa’ modes, altering the site’s layout and color scheme. The landing page features a central interactive heart, split into two halves - one half is structured and orderly, the other is chaotic and vibrant, symbolizing the duality of the theme. The design should elegantly combine these contrasting styles, reflecting the balance between rationality and spontaneity, and the integration of order with creative expression.
I’m not sure what I’ll do with these moving forward with my website but I certainly found the exercise and just brief exploration with generative AI exciting!