Skip to content

2. Project management

This week I worked on defining my final project idea and started to getting used to the documentation process.

Survival Kit for FabAcademy on Windows OS

Some times ago I wrote a Tutorial to install FabModules and Antimony, but pratically to execute whole FabAcademy Porgram, on Widows PC trough Developer features on Windows 10.

Tutorial: Fabmodules-for-Windows-10-Users

I’ve choose to use Atom and nano (installed directly in Windows10 path) to address the FabAcademy program.

For the web developing I’ve skills in HTML/CSS, PHP, but I find it interesting for this session, for practicality and speed of use, to document all my journey using CI and MkDocs static site generator, and only to develop FabLab Napoli site I’ve used HTML/CSS/JS to code it.

MkDocs Local

the following steps assume that you know and have installed Python and PIP on your computer.

sudo pip install mkdocs
And theming it …
sudo pip install mkdocs-material
Run a local server inside a repo directory …

PS C:\Users\ntngr> bash
ntngrl@DESKTOP-SJT4DAT:/mnt/c/Users/ntngr$ mkdocs --version
mkdocs, version 1.0.4 from /usr/local/lib/python2.7/dist-packages/mkdocs (Python 2.7)
ntngrl@DESKTOP-SJT4DAT:/mnt/c/Users/ntngr$ cd FabAcademy2019/repo/ntngrillo/
ntngrl@DESKTOP-SJT4DAT:/mnt/c/Users/ntngr/FabAcademy2019/repo/ntngrillo$ mkdocs serve
INFO    -  Building documentation...
INFO    -  Cleaning site directory
[I 190127 11:08:43 server:298] Serving on http://127.0.0.1:8000
[I 190127 11:08:43 handlers:59] Start watching changes
[I 190127 11:08:43 handlers:61] Start detecting changes
[I 190130 11:09:12 handlers:132] Browser Connected: http://localhost:8000/assignments/week01/

Some changes to the material theme, configuring YML file mkdocs.yml: colors, favicon, logo and “voilĂ ”.

site_name: Fab Academy 2019 - Antonio Grillo
site_description: My Fabacademy 2019 site

site_author: Antonio Grillo
docs_dir: docs
site_dir: _site
copyright: Creative Commons Attribution Non Commercial
theme:
  logo: 'images/logo.svg' #Here I've changed the .svg logo
  favicon: 'images/favicon.ico' #and Add a new favicon
  name: material

  palette:
    primary: "yellow" #Here I've changed the primary color
    accent: "indigo"
  font:
    false

  feature:
    tabs: true
extra:
  social: #Here I've added my social channel
    - type: "github"
      link: "https://github.com/antoniogrillo"
    - type: "twitter"
      link: "https://twitter.com/ntngrillo"
    - type: "linkedin"
      link: "https://www.linkedin.com/in/grilloantonio"
    - type: "instagram"
      link: "https://www.instagram.com/ntngrillo80/"

markdown_extensions:
  - extra
  - smarty
  - admonition
  - codehilite:
      guess_lang: false
  - toc:
      permalink: true

Learn this Week

At first, when I added an image smaller than the width of the DIV, it aligned to the left. To solve this problem I inserted a div with the style css, as follows:

# About me
<div style="text-align:center; margin-bottom:20px;">
![myFamily](../images/myFamily.jpg "myFamily")
</div>
I later solved using a <center> tag directly.
# About me
<center>
![myFamily](../images/myFamily.jpg "myFamily")
</center>

Git

If you don’t have installed Linux subsystem on Windows 10, a good way to access to git from your computer is Git Bash. To install it, go to the GitforWindows.

Here the main operations to do when you want to push your work:

git pull in order to get an updated version of everything

git add for selecting a specific file

or git add . for selecting all files

or git add -u for selecting already tracked files that are modified

git commit -m “message” for saving a commit in the local repository. Please write a meaningful message.

git pull in order to be sure that you have everything updated

git push in order to send everything you commited to github

My img and video screenshot