1. Week 1: Project Management¶
The main learning outcomes for this week were to create and edit a website based on MkDocs using Gitlab and Visual Studio Code. The website will be used to document everything I have learned on a weekly bases during the FabLab course.
Important Definitions¶
MkDocs¶
MkDocs is a fast and simple static site generator that is geared towards building project documentation. Documentation source files are written in Markdown, and configured with a single YAML configuration file
Git¶
Git is a distributed version control system that is used to track changes created to a file or code. Furthermore, it acts as a historical backup which can be useful in the case that you did a mistake, see who made what changes and collaborate with other people to create website.
Gitlab¶
Gitlab is web-based platform that uses Git and provides graphical interface for Git commands and functionality. Gitlab provides developers the ability to store their code in remote repositories (repos), collaborate on projects, track changes, issues, and manage development workflow.
Git bash¶
Git Bash is an application for Microsoft Windows environments which provides an emulation layer for a Git command line experience.
Microsoft Visual Studio Code¶
Visual Studio code or VS Code, is a software that is used to write and edit code. It can be integrated with Git to allow you to track any changes created to the code, work with other people and revert to previous versions if necessary.
Markdown¶
Markdown is a lightweight markup language that you can use to add formatting elements to plaintext text documents. Created by John Gruber in 2004, Markdown is now one of the world’s most popular markup languages. The website I will create will be utilizing Markdown as the coding language.
Creating the Website¶
After creating an account and logging in to Gitlab, I proceeded to build the website by going to the build tab, selecting pipelines and pressing the run pipeline button.
Then, I went to the deploy section, selected the pages tab, pressed the use unique domain button, and saved the changes to create a unique domain for my website.
Creating a Local Copy of My Repository¶
The first thing to do when creating a local copy of your repository is to download Git Bash and create a file so that you can create the repository copy in it.
After that, while inside the folder, press the right mouse button and select “Open Git Bash here”.
Then, clone the code URL from Gitlab and use the command git clone * URL* to clone the repository.
After entering the Git clone command, I was redirected to a page to sign in with my account. After signing in, the cloning process started.
Then, i used the git config command to enter my username and email so that I can edit the code and pull and push changes to Gitlab.
After the cloning process was over, a local copy of the website was created on my computer.
Opening the Local Repository in VS Code¶
While it is possible to edit the website code directly on Gitlab, it is more convenient to edit the code on the local repository copy that was created previously and then pushing and syncing the changes to Gitlab. This will allow you to add images and files much faster than uploading them one by one to the Gitlab website. To be able to edit the local copy, the Microsoft Visual Studio Code software will be used. Using this software will make the coding process more manageable due to it combining the simplicity of a source code editor with powerful developer tooling, like IntelliSense code completion and debugging. Furthermore, it allows you to add extensions that can aid in the coding process.
After installing VS Code on my computer, I went to the file tab and selected open file so I can open the local copy of my repository in the software to edit it.
To make the coding process easier, I have downloaded two extension by going to the extensions tab and writing the name of the extensions I want to edit.
1-Markdown Preview Enchanced: used to create a preview of the code by pressing Ctrl shift v.
2-Code Spell Checker: used to spell check the text in the code.
Editing the Website¶
To edit the website colors, font and icons, I went to the mkdocs.yml file and starting changing the existing code.
Colors¶
To change the colors of my website, I used Materials for MKDocs. You can use this website to see in realtime how will the website will look when the colors are changed.
Furthermore, it has many instructions on how to edit MkDocs based websites. To edit the colors of the website, simply write the name of the color in the following code.
palette:
primary: color name
accent: color name
Fonts¶
To change the font of the text, I used Google Fonts. This website has a range of fonts that can be used to change the text font of the website.
To edit the text font of the website, simply write the name of the font in the following code.
font:
text: font name
code: font name
Icons¶
To change the website logo and favicon (Favorite Icon), I used the website Fonts Awesome. This website has a large range of different icons that can be used for the website.
To edit the text font of the website, simply write the name of the icon file with the file it is saved at in the following code.
logo: images/user-astronaut-solid.svg
favicon: images/user-astronaut-solid.svg
To change the icons, I downloaded the icon from the website and added it to the repository by going to the docs file.
Then, i entered the images and week 1 folders.
To upload the file, I pressed the + button, selected upload file and dragged the photo to upload it.
Alternatively, you can upload the image by going to the local copy of the repository and uploading the image in the same path as previously mentioned (docs->images->week01).
After editing the code, save it and then go to the source control tab, add a commit message, and press on the commit message box and add a message about what exactly you changed so that if you want to go back to this version of the code later, you can do it easily.
After that, press the sync button to sync the changes between the local repository and the one on Gitlab.
The two previous steps (commit and sync) must be done every time you add anything to the local repository or change any of the code.
The look of the website after editing its theme, color, font and icons etc.
About Me Page¶
After editing the website format, I moved on to editing the about me page with my personal information and adding relevant photos and videos.
To add headings:
# heading 1
## heading 2
### heading 3
To add images, I used html code so that I can center the image in the website:
<div align="center">
<img src=../../images/week01/image.png>
</div>
To link a website:
[text you want to display](website link)
To link a video, I copied the embedded video link and used html to be able to center it in the website.
<center> embedded link </center>
About me page after editing:
Furthermore, I edited the home page as well as signed the student agreement page.
home page code:
home page after editing
