Week 01. Principles and Practices / Project Management

The first week of Fab Academy! I did a sketch of my project and added it to the Final Project page.

Assignments for this week

  • plan and sketch a potential final project
  • work through a git tutorial
  • build a personal site in the class archive describing you and your final project

What I've done this week

  1. Setting up PC enviroments
    • Visual Studio Code (VScode)
    • Git
    • MkDocs
  2. Create a website
  3. Sign up Student Agreements
  4. Plan a final project

1. Setting up PC enviroments

The First thing I did this week was Setting up my PC enviroment.

Here are the version of tools I use.

  • MacBook Air (M1, 2020)
  • macOS Monterey 12.3.1
  • VSCode 1.74.3
  • zsh 5.8 (x86_64-apple-darwin21.0)
  • Homebrew 3.6.20
  • python 3.10.8 / pip 22.3.1
  • git 2.39.1
  • mkdocs 1.4.2

I changed my mac screenshot setting from the default(PNG) to JPG with the following command.

defaults write com.apple.screencapture type jpg

Choose Text Editor

Text Editors are software where you write your codes in.

I chose VScode for my text editor.

VScode has wide range of extensions that help you code, debug and visualise your work. Here are the extensions I installed for Fab Academy:

  • Git History
  • HTML CSS Support
  • Markdown All in One

Getting started with Git

I followed this tutorial of Git.

Step 1. Download Git.

brew install git

Step 2. Identify user.

git config --global user.name "sosuke"
git config --global user.email "sosuke.kanegae@mat.eng.osaka-u.ac.jp"

Step 3. Check if there is any SSH-Key existing. If not generate SSH-Key.

(check)
cat ~/.ssh/id_rsa.pub

(generate)
ssh-keygen -t rsa -C "sosuke.kaneage@mat.eng.osaka-u.ac.jp"

Step 4. Check the public key you just created.

cat ~/.ssh/id_rsa.pub

Clone my repository from GitLab to a local workspace

Now so that I got Git ready, I prepaired a new directory to store everything I do with Fab Academy.

cd ~/FabAcademy/
mkdir workspace

In new workspace, I first cloned my repo on GitLab

git clone https://gitlab.fabcloud.org/academany/fabacademy/2023/labs/kitakagaya/students/sosuke-kanegae.git

Now, I have a newly cloned directory "sosuke-kaneage" in my workspace. And, I am ready to edit my website.

Setting up MkDocs

Using MkDocs, you can easily create documentatoin websites. You will have to code in HTML, CSS and JavaScript to create a website. However, in MkDocs all you have to edit is Markdowns, which is easy to use.

Step 1. Install MkDocs.

pip install mkdocs

Step 2. Create new Mkdocs project in workspace

cd ~/FabAcademy/workspace
mkdocs new fabacademy-docs

Step 3. Launch test server

mkdocs serve

Now, I have a MkDocs project with the default settings in ~/FabAcademy/workspace/fabacademy-docs. And, I can check how the website will look in my browser(http://127.0.0.1:8000/).

Build, Commit and Push

After editing MkDocs project, I have to convert the markdowns to HTML files.

cd ~/FabAcademy/workspace/fabacademy-docs
mkdocs build

The build commmand creates HTML files in ~/FabAcademy/workspace/fabacademy-docs/site/

To build directly into the git directory, add the following line to ~/FabAcademy/workspace/fabacademy-docs/mkdocs.yml

% mkdocs.yml
site_dir: ../sosuke-kanegae/public/

Finaly commit changes in local git repo and push to remote GitLab repo.

git add .
git commit -m 'Comments about changes'
git push

Instead of commit and push in the command line, you can also commit and push from the Git tab in VScode.