2. Project management

Assignment

Work through a git tutorial.

Build a personal site in the class archive describing you and your final project.

The process of building a website required the knowledge of using Git, Gitlab, Terminal, Brackets, Atom, Markdown and HTML.

Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency.

Terminal app is in the Utilities folder in Applications. To open it, either open your Applications folder, then open Utilities and double-click on Terminal

Next step after downloading Git and opening Terminal is creating a new account at GitLab, create a new project (harib-almarzooqi) and make it public.To identify myself that doesn’t require me to enter my username and password every time I had to generate SSH key.

in Terminal type:

sh-keygen -t rsa -b 4096 -C "almarzooqiharib@gmail.com"

most probably the file will be hidden (Press Command+Shift+Dot) to show hidden files. Open [id_rsa.pub] with Text Edit, copy the SSH key and paste it on gitlab > User Settings > SSH Keys.

Now the project on Gitlab can be “cloned” to Mac PC using the following commands on Terminal:

git config --global user.name "Harib Almarzooqi"
git config --global user.email "almarzooqiharib@gmail.com"
cd Desktop
cd harib-almarzooqi
git clone git@gitlab.com:almarzooqiharib/harib-almarzooqi.git

clone command: will make a project folder in the Desktop.

Website Template

Choosing a template was not that hard ,form Start Bootstrap.I chose a theme that fits me, and downloaded it. Moved all the files from the (startbootstrap) folder to the cloned folder (harib-almarzooqi). Next is Pushing all file to gitLab with following commands:

cd Desktop
cd harib-almarzooqi
git add .
git commit -m "any text"
git push

Next is the CI/CD configuration, which allows continuous deployment of the HTML file selected. Gitlab CI configuration Gitlab CI configuration OPTION A: GitLab CI for plain HTML websites. Copy and paste the commands to the CI/CD panel in my Gitlab.

Brackets is a source code editor with an instant live preview. Open “index.html” file to edit the website in html language.

Atom is another open source code editor with an ability to use Markdown language. Done by installing its package. Markdown tutorial.

Pandoc converts files from one markup format into another, in my case its from Markdown to HTML, by the following command:

pandoc markdownfile.md -f markdown -t html -c mycss.css -s -o markdownfile.html

copy the downloaded project path then:

href

On Brackets using href to add a new link in a new tab.

PreFab accomplishments

The first website I ever made

Unfortunately I faced some difficulties with such a template, it had only 6 in-site pages for the assignments. Adding an extra page was possible but choosing a different template was more efficient.

The second template I used

It was a simple template, it did not look that proficient. Using Pandoc every single time was a headache.

The final website

The process of building this website was fairly simple. Following the log-in instructions:

  1. Go to Gitlab.
  2. Your temporary password was generated randomly. Please use the “forgot password” option to reset the password.
  3. Use the same email you used for registering to Fab Academy when you filled the form.

Fab Academy provided a ready-to-use template uploaded on the site, based on mkdocs.

Right away after completing the above steps I had to connect the Terminal with Gitlab by copying the SSH key previously generated, then running git clone (detailed steps are above).

MkDocs is a fast, simple and downright gorgeous static site generator that’s geared towards building project documentation. To be able to edit and preview such template I had to follow these step.

  1. Installing python

  2. Installing Python package manager pip. Run:

     sudo easy_install pip

  3. Installing MkDocs. Run:

      sudo easy_install mkdocs

  4. Check the version, Run:

    python --version
# Python 2.7.16
pip --version
# pip 20.0.2
mkdocs --version
# mkdocs, version 1.0.4

  5. Finally I was able to edit the template in Atom and instantly previewing it by Running:

    mkdocs serve

copy the link http://127.0.0.1:8000 , this way I could edit and preview my work after saving it instantly.

Issues I Faced

  • I had a hard time figuring how to add links that opens in a new tab. Finally found the solution here.
  • As a Mac user I faced issues in installing softwares. Figured out by a classmate Shaikha when installing any software using the Terminal on Mac, it is always recommended to do it as admin using the sudo.