1A - Project Management

This week we star to made us web

Project management with git is powerful for documenting progress during Fab Academy. For this we will make a web page, which we will update with our progress.

Assigments

Work through a git tutorial Build a personal site in the class archive describing you and your final project

The basics before getting started

Since Apple release MacOS X, I use a bit Termnial, for config the Mac´s, add other programs or repair permission files,…. Since the AmigaOS i never use command line in MacOS 7, 8 ,9…. In the work for sample my control version are duplicate folder or share with mates and merge files when a version is ok :)

Learn to work with the Terminal

According to our local instructor Nuria, the terminal is going to be our best friend. In MacOS open Spotlight Search and type ‘Terminal’ or you can find in Utilities into Applications folder. Here are a couple of commands to get started:

ls = list (to show the files/directories in that folder)
ls -a = list with invisible files
cd folder = change directory (to move to another folder)
cd .. = back to parent directory
pwd = print working directory (shows your current location)
~ = back to user folder // root
mkdir = make a new directory into current folder

Homebrew

For MacOS we need install this package manager to help install programs from command line. Can get here, or write this in Terminal and press Enter.

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

After this can install all you need with this commmand (see this list):

 brew install wget

Choose a text editor

The text editor is an environment to write your code in. The most basic option is Notepad (Windows) or TextEdit (macOSX), a pre-installed text editing tool.

In my work I use BBEdit, for edit or compare files fast text in html, code, or open any txt document.

Since time ago for made code with Arduino I use Visual Studio Code and Plaformio, but never try to add this apps for made a web, or other project. Visual Studio Code is a free source-code editor made by Microsoft. This is the one I’ll be working with and learning along the way.

I my work allways use for development web Adobe Dreamweaver, but since last years i use only WordPress for made webs, I just open the application to remember some html or css codes and do tests in local.

Git

Git is a mature and actively maintained open source project that was originally developed by Linus Torvalds, the famous creator of the Linux operating system kernel, in 2005.

Install and setup

I use MacOS, and for start I made installation Git from Terminal.

I have litle problems when install in my MacPro, for generate the SSH Key, i start in my project folder, but I need write before ~ for return to Home folder. After this I can made the SSH Key without problem.

git config user.name “CyberMODE”
git config user.email “cybermode@mac.com”
~
ssh-keygen -t rsa -C "cybermode@mac.com"
cat ~/.ssh/id_rsa.pub
~/.ssh/id_rsa.pub

For error I add a passphrase to SSH, any time than I need made a Push ask me for the pass. For remove the passphrase need type in Home directory:

ssh-keygen -p

And write the pass again and press Enter (empty) for remove the pass.

Clone my repo form GitLab

After add the SSH to Git on the web, I move in the Terminal to my folder (I use a external disk, for now) and clone all content.

cd '/Volumes/Trabajos M2/Fab Academy 2022/GitFabAcademy2022/luis-diazfaes'
git clone git@gitlab.fabcloud.org:academany/fabacademy/2022/labs/leon/students/luis-diazfaes.git

I think soon move from the MacPro to a MacBook Pro M1 Max, and use this external NVMe disk.

Upload the repo online

After clone my repo, i try the first command of Git.

For add the new files to Git need write (only necesary if made new files, add images… no if edit files)

git add .

It’s good practice to check if there are changes.

git status

After add files, need name the update with

git commit -m ‘change you did’

And for upload to the Repository

git push

Web of Fab Academy

After download the default repository content, I start to edit the files MkDocs template, for made my web. Try made new styles and structure but I see the first limits.

I see Hugo and Jekyll options, and themes, I chose use the Memoirs theme. Is a theme responsive with Bootstrap 4.

“Memoirs is a free minimalist Jekyll theme for those who love the beauty of simplicity.”

While I made my first page, I see what resources will use more, text, images, videos and show “code”. This theme have the feature of display the type of programming language in the upper right corner of a coding block and copy to code feature.

See the html sample:

<div class="title">
    <a href="http://www.triade.es" target="_blank">Triade</a>
</div>

… with Python:

x = 1
if x == 1:
    # indented four spaces
    print("x is 1.")

… or JavaScript:

// alertbar later
$(document).scroll(function () {
    var y = $(this).scrollTop();
    if (y > 280) {
        $('.alertbar').fadeIn();
    } else {
        $('.alertbar').fadeOut();
    }
});

Edit the web

After install Jekyll and the theme, i start edit the web. firts I made the “About me” and start to learn the web parts than have the theme. The title for sample only is a line of text in <h1> but i like add a new line with <h2> call “subtitle”.

---
layout: page
title: "Hi! I am Luis Díaz-Faes."
subtitle: "I am an multimedia producer based in Vigo (Spain) working on design, digital audio, video, 3d, web,... and maker."
---

I edit in “_layouts/page.html” and add the subtitle line:

<div class="page-single">
    <div class="entry-header">       
        <h1 class="posttitle">1A - Project Management</h1>      
        <h2 class="postsubtitle"></h2>     
    </div>
</div>

I add a new css class “postsubtitle”, then I add in “assets/css/theme.css” this code:

.postsubtitle {
    font-size:30px;
    font-weight:700;
    line-height:1.1;
}

Every time i update the git with git push, the CI/CD run over 2 minutes and 40 seconds, is a litle slow update.

Back to top