Assignments Goals

• Build a personal site in the class archive describing you and your final project
• Set up the version control system Git, and make a simple tutorial

Week's Lectures

HTML and CSS coding

This is not my first time developing a website, and I usually use proprietary tools with payed license such as Dreamweaver, NetObject or KomodIDE, but since the FabAcademy philosophy is to lean on free and open-source resources, I decided to put on use the opportunity of learning a new tool. My choice came down to Brackets because, as the websites states, it is a modern, open source code editor with a primary focus on Web Development. Moreover, there are a lot of free extensions that can provide additional functionality to the basic editor.

These extensions can be found and installed using the built-in extension manager, that's a neat feature! According to me, one of the most useful extension I added to Brackets is Beautify: using it, it's possible to format the code, in a tidy, well-organized structure.

To start the web site development I downloaded a template with a layout structure that seemed clean and simple, Bootstrap Biz 1. It is based on Bootstrap, a popular JS framework for responsive pages, and it's very well documented. After looking inside the code, to understand the inner structure, I started modifying it to tailor it to my needs.

Useful links

Software Version Control and GIT

At my workplace we already use GIT, and in particular BitBucket, as a software version control, so it was quite simple to create a new repository, initialize it and push everything. For the sake of everyone not accustomed to such system, I'll recap which command I used, and how I generated the SSH key. If you are using Windows, you'll need to download Git for Windows.

In order to connect to GIT server, you need to be authenticated, by means of a ssh-rsa key. The command to generate the key and to add it to the ssh-agent are:

user@work-pc:~$
ssh-keygen -t rsa -b 4096 -C "your_email@example.com"
ssh-add ~/.ssh/id_rsa

id_rsa should be the name of the file where you earlier saved the key.

• 
• 

After adding the public key to GitLab portal site, we are ready to clone everything from the remote origin, using the command:

user@work-pc:~$
git clone git@git.fabacademy.org:fabacademy2016/fablabtorino.git DirName

Now we have a working local copy of the repository, in folder "DirName".

Whenever we create a new file in the folder, we have to add it to the local repository using the command

user@work-pc:~$
git add fileName

and to be sure that the files have been added, and the repo is changed, we can issue the command git status, to see a list of added or modified files. In the image above you can see the difference of status before and after the jpg have been added.

user@work-pc:~$
git status

• 
• 

In my case, I needed to add the whole website. After that, we need to commit the changes with a descriptive message, using the command:

user@work-pc:~$
git commit -m "My first commit"

Remember that changes are always committed to the local copy of the repository, because Git doesn't force you to interact with the central repository until you're ready. So when we want to save the changes to the remote side, we have to use the command:

user@work-pc:~$
git push origin master #master is the name of the main branch on the repo

That's it! Our site is now correctly committed and pushed on the remote server, as we can see from GitLab portal.

• 
• 

Here's a neat concise guide to help you remember Git functionality GUIDE, and below you can find a quick recap of the most used and useful git commands:

user@work-pc:DirName;$
git add . #Add file contents to the index
git commit #Record changes to the repository
git status #Show the working tree status
git clone #Clone a repository into a new directory
git pull #Fetch from and integrate with another repository or a local branch
git push #Update remote refs along with associated objects
git merge #Join two or more development histories together
git remote #manage set of tracked repositories
git branch #List, create, or delete branches
git checkout #Switch branches or restore working tree files

Useful links

Assignments Outcomes

• Explore and use website development tools
• Identify version control protocols

Have you:

made a website and described how you did it
introduced yourself
pushed to the class archive
documented steps for uploading files to archive