1. Project management¶
This week’s work revolved around creating and editing the website, and gaining skills that will later be utilized to document every step of my Fab Academy journey.
Research¶
Before going into any processes of how this website was achieved, some main definitions need to be highlighted.
MkDocs is a fast and simple tool built to aid the project documentation process.
Markdown is an easy markup language that is used to make writing for the internet easier. It aims to make the text documents readable, while still having a specific symbol for each text modifier. The syntax is linked below.
Gitlab is a web-based platform that allows team members to create free and private software. It allows collaboration and communication between developers in all phases of the project.
Atom is a text and code editor developed by GitHub. It allows the programmer to edit their product both online and offline.
Creating the website¶
The first step of this week was to create a website, and link it to the page given to us by the Fab Lab team.
Step 1 I had to log in to Gitlab with my email and password.
Step 2 Then I could see my project, which was shared by my Fab Academy instructor.
Step 3 Next, i access the space and all the folders that contain information about my project, and where i can directly edit it. The first thing we had to edit was the “about me” page, by following the steps shown below.
The same steps are followed when needing to access any folder for editing.
Website cloning¶
Since the gitlab website can only be used to edit the page online, we had to clone our website to be able to edit it even offline. For that, we had to download both atom and git.
Git¶
Step 1 I first had to download git from the website.
Step 2 I created a folder with my name, where I wanted to clone my website. Then, i right-click and choose “Git bash here”
Step 3 I go to my gitlab page, and click on the blue button labelled “Clone”. I then copy the HTTPS link, which is what i will be inserting into Gitbash.
Step 4 Then, i type “Git clone” into gitbash, and paste the link I copied.
Step 5 When the Cloning was done, a folder named as “roaya.alsaffaf” was created in the initial folder. Inside, all divisions available in my gitlab were available.
Atom¶
Step 1 Similarly to the previous section, I first had to download atom from its website
Step 2 After setting up atom, I import the documents I cloned with Gitbash into it.
Step 3 When that is completed, I can edit everything locally in the same way i did online.
Step 4 After editing, the changes need to be committed and pushed to my page, by following the sequence below.
Editing website theme¶
Step 1 To edit the website’s theme, first we access the folder called mkdocs.yml.
Step 2 First, i changed the title of the whole page, as well as the description showed in the home page of my website.
Step 3 I also changed the links of the social media icons from the fablab pages to my personal accounts.
Step 4 Then, i wanted to change the colors of my website. In order to see the colors available, i visited this website.
Step 5 After choosing the colors, I changed both the colors of the page accent and the color of any link used in the website.
Step 6 And lastly, I changed the fonts in my website by using this link as a reference.
Step 7 After all the changes were made, I committed the changes and this was the result.
Markdown commands¶
In the table below, you can see some of the basic markdown commands that can be used to edit the website.
| Command | Description |
|---|---|
| # | Heading |
| * | Bullet point |
| 1. | Numbered list |
| > | Blockquote |
| [text](url) | Link |
|  | Image |
| **bold** | Bold |
| _italic_ | Italic |
| ~~strikethrough~~ | Strikethrough |
| `code` | Inline code |
| ``` | Code block |
| --- | Horizontal rule |
| [TOC] | Table of contents |