Week 2

Poject Management

How I built the Site

Using PaperKit2 by Creative Tim

PaperKit2

Using the Template is not that hard.

PaperKit 2 By Creative Tim

Paper Kit 2

Build you're Own Website

Our first assignment is to build our own blog. I could have used the MKDocs or Jekyll to build my website, but I chose to go with a Bootstrap 4 template from Creative Tim.
The PaperKit template looked right to me and I wanted it to be simple yet elegant. I chose VS code for my editing (which is based on Atom ), mainly because it has wonderful integration with Git Bash . For experimental purposes I also tried out GitKraken, which has a nice GUI and I used this to generate my SSH key, but more on that later.


The structure of my Fabacademy site

The file structure of my site, is actually pretty much the structure of the Paperkit template and it is nicely organised in subfolders.

File structure layout

The Root folder of the template

Do not mind the "documentation" folder, this is just for the Paperkit template. The most important ones are the assignments and assets folder

All the HTML pages are stored in the assignments folder and all CSS, JS, SASS and media are stored in the assets folder. In the assets folder, I created subfolders per week, giving me a better overview of my media.


HTML code snippet, used in this web page
<div class="class-content-center">
                <div class="class-wrapper">
                <div class="section-white">
                <div class="container">
                <div class="row">
                <div class="col-md-10 mal-auto mr-auto text-center title">
                <h2>How I built the Site</h2>

Explaining the code

This little sample of code is written in HTML, using the CSS layout of the Bootstrap 4 front-end toolkit. I have used this snippet as the starting point of this web page.

HTML elements usually consits of a start tag and end tag, with the content inserted in between. For example the whole div and /div is an element

HTML attributes provide additional information about an element and are always spceified in the start tag.

The div tag defines a division or a section in an HTML document and is often uset together with the Cascading Style Sheet, to layout a web page.

The class attribute is used to define equal styles for elements with the same class name.
So, all HTML elements with the same class attribute will have the same format and style.

HTML headings are defined with the h4 or h6 tags and are most often used for headings in the web page. I used the h6 for this sections heading.


GIT, VSCODE GitKraken Install:
In order to integrate Git into VSCode, the best way is to first install VSCODE from here. After the installation of VSCode you can install GIT for Windows. Here you will have the option to select VSCode as you’re default editor.
Choosing VSCode as Git's default Editor

Choosing VSCode as Git's default Editor

Now we enable git bash in VSCode. WE run the program and select terminal or press Ctrl+` if you do not see the terminal.
Once there the dropdown select bash (will select powershell by default). Change directory to you’re git folder, i.e. C:/user/Desktop/username.
Now that the installation for GIT is finished, we need to open VSCode and install a few GIT extensions from the extensions marketplace.

This can be accessed either by the extenstions button on the left sidebar or by Shift+ctrl+X

The ones I found most useful are GitLens and Git History . These can be obtained by installing the Git Extension Pack. Reload the software when prompted or if they do not work.
What they do: GitLens: GitLens supercharges the built-in Visual Studio Code Git capabilities. It helps you to visualize code authorship at a glance via inline Git blame annotations and code lens, seamlessly navigate and explore the history of a file or branch, gain valuable insights via powerful comparision commands, and so much more. Git History: View git log, file or line history.


Choosing VSCode as Git's default Editor

GIT Expension Pack

And if done right this is what we get in VSCode. And can now focues on gitting Git to work. Choosing VSCode as Git's default Editor

GIT Expension Pack layout

Connecting to Gilab.Fabacademy

First Things First

Generate it

Prepare Git with Gitkraken

In order to use git bash, I first had to connect to gitlab.fabcloud.org. There are 2 choices. SSH and HTTPS. HTTPS makes a connection with you're username and password from gitlab. SSH is a secure generated key that only requires the key with every login.
This saves the user a lot of time. I wanted to try it with Gitkraken.

Open Gitkraken and press Ctrl+N.
This will open a repository management window. Here you can enter the ssh url, which can be found on your gitlab.fabcloud page.
Copy this link and paste it in the repo management window in GitKraken. You can use GitKraken to generate you're RSA Key

Copy URL


You can use GitKraken to generate you're RSA Key

Gitkraken Clone
paste and connect. It will ask you for you're credentials. Once entered you can either pull or create an SSH key.
I chose the latter.
Press Ctrl+comma and go to Authentication. Press Generate and a new key will be added to where you pointed you're Git repo.
Go to your local repo and copy both the public key as well as the private key. (you will need to have the view hidden folders enabled)
Go to the .ssh folder in youre Windows users folder and paste the keys. The directory path should look something like this C:\Users\username\.ssh.

You can use GitKraken to generate you're RSA Key

Gitkraken RSA

Great!
Now we need to add our public SSH key to our fabcloud repo on gitlab and we are good to go.
( you can copy the public key in the Authentication section of Gitkraken)

Global Profile settings Gitlab

GitLab Profile settings

 Add SSH Keys to Gitlab

Add SSH Keys

 You can use GitKraken to upload changes now

You can now use Gitkraken upload changes or pull from you're repo

However, it is, in my opinion, important to know what the commands, used to download and upload content, for GIt are

And these are as following:

    For checking if the ssh agent is up and running

  • eval $(ssh-agent -s)

    • To add the SSH key

  • ssh-add ~/.ssh/nameofkey_rsa

    • Get the repository locally

  • git pull

    • For every file change, This command stages all of them

  • git add -A

    • If you want to double check all the changes before staging.

  • git add -p

    • To commit those changes

  • git commit -m (the -m indicates that a commit message follows) "commit message" -a (for committing all changes)

    • And to upload the content

  • git push origin master (to push to the master branch of your git repo)

For a nice git turorial on the setup and connection, please look at this link: Git Cheat Sheet



Student Agreement
Fab Academy Student Agreement
                  
The Fab Academy is responsible for:
Teaching principles and practices of digital fabrication
Arranging lectures, recitations, meetings, and events for the class
Evaluating and providing feedback on student work
Offering clear standards for completing assignments
Certifying and archiving student progress
Supervising class preparation
Reviewing prospective students, instructors, and labs
Providing central staff and infrastructure for students, instructors, and labs
Fund-raising for costs not covered by student tuition
Managing and reporting on the program's finances, results, and impacts
Publicizing the program
Promoting a respectful environment free of harassment and discrimination
                              
I am a Fab Academy student, responsible for:
                              
Attending class lectures and participating in reviews
Developing and documenting projects assigned to introduce and demonstrate skills
Honestly reporting on my work
Working safely
Leaving workspaces in the same (or better) condition than I found them
Participating in the upkeep of my lab
Ensuring that my tuition to cover local and central class costs is covered
Promoting a respectful environment free of harassment and discrimination
                              
Signed by committing this file in my repository,
                                
Pascal van Lierop

Assignment Complete