Assignments

Build a personal site describing you and your final project.

Upload it to the class archive. Work through a git tutorial.

During the personal site building process, what I leanrt most was that you have to listen to the lecture carefully, don't rush to the assignments. When I begin to build the website , I was way behind the other students, and it was a hard time for me to figure out what the git is and how can I use git.

So I followed other students' website to registerd to Gitlab, signed up to Fablabs.io, and I can't find the right Gitlab at the first time, cause I already had a git account , but didn't have relation with fab academy 2018. Then I put the right website which I need to login in on my evernote like the picture below.

My failure making progress

Try to use Jeky II

I read a Chinese version instruciton How to build Jekyll Blog to strengthen my understanding.And then followed an instruciton Run Jekyll on Windows , the instruciton website is pretty nice and helped me a lot.

And also I stucked on the first step to install ruby.

I tried several times but all failed. And I used the keyword "ruby config.yml" to search and follow the link's instruction How do I configure config.yml so that I can install devkit?

But failed. So I decided to try hexo.

Failed again.

"The Most Valuable Inspiration"

After all the time wasting, I browsed fab academy 2018 students' page. I found my favourite website. And I started to use her template , I took her website building frame and modified the color and background pictures.

Thanks a lot KATI PITKÄNEN from Fablab Oulu

Git Setup - GitLab and Git Bash

I signed up to FabLabs.io using certain email address "my.email@example.com".

Then login git.fabacademy.org with fablabs.io account.

Gitlab is a distributed version control system, which enables me to work locally but also push my changes to other servers, after that I can clone the files to local storage. So I can work on any computers and it's easy to track back.

Then I installed latest version of Git for Windows. Installation brought me Git Bash, which is the terminal for writing commands to contact Fab Cloud repository.

Add SSH key in 「Profile Settings」following this instruction:SSH Key

Use git clone to pull the project files down.

Git Commands

For updating new or modified content to my Git repository (archive - GitLab~fabacademy/2018/labs/fablabszoil/students/lingyu-yue), I used the basic commands as follows:

Navigate to the workingspace repository:

cd [path of the folder] (e.g. Documents/fabacademy/lingyu-yue)

Dowload the latest version from the remote repository by synchronizing the local repository with the remote repository. This command updates the local repository by copying the content in the remote repository to the local repository:

git pull origin master

Check the changes and list new or modified, but not uploaded content(red color):

git status

Add new content to the temporary repository (Git storage area):

git add . // for all files

git add [file name], (e.g. week2.html) // for one spesific file

Check the files in the temporary repository area (green color):

git status 

Move the files from my stage (index) area to local repository, which makes a record (screenshot) of the current version to store it in the local repository:

git commit -m "add appropriate title"

Merge and synchronize the local repository version with the remote repository version by uploading the content from local repository to the remote repository (Git):

git push origin master

After learning and setting , I use Souretree to do the after work.

The website

The video HOW TO MAKE A WEB PAGE IN A DAY, lead me to the webstie Codeacademy ,I leant basic html there and use W3school as "cheating list".

What I used most is as following:

And I use Atom to edit the page.

I found the first theme on the Html 5 ,it's free to download and use.

After that I used the template from KATI PITKÄNEN , I kept the frame of her website , I like the frame a lot.

I use notepad to modified the css of Kati's template.

I use colors picker from w3school to choose my favourite colors. And I use my favourite galaxy picture as background.

After all the work, I got a website like this.

What I learnt most is that you can't rush to the result , you have to learn step by step.