WEEK 1¶

This Week I tried to plan my final project Idea and create my Website. I finally did that! defining idea of my final project

PRINCIPLES AND PRACTICES¶

Assignment:¶

- Principles and Practices :

Plan and sketch a potential final project.

- Project Management

• Build a personal site describing you and your final project.
• Upload it to the class archive.
• Work through a git tutorial.

How I made my Website¶

I create my Website with Mkdocs and markdown that is a fabulous tool for editing my website very simply. I use brackets as text editor.

1. Creating a MKDOCS PROJECT¶

To create a Mkdocs project you need to do some previous things

*** Install python new version ***

Step 1 : this is link to Download python

Step 2 : Run the installer after Downloading

you should see that :

When installing python do not forget to check the box Add python.exe to Path before installation as shown in the image above.

step 3 : After the installation of python, we can move to the installation of Mkdocs itself. Open the command prompt of your PC and type the following command line:

pip install mkdocs

Normally if all goes well you should have the following display in your command prompt.

links:

• https://www.mkdocs.org/user-guide/installation/
• https://www.mkdocs.org/getting-started/

step 3 : Now create a new mkdocs project with your command prompt to do that type this commands :

    mkdocs new _name of your project_

you created a new mkdocs project Now enter the following command line to launch the mkdocs local server

mkdocs serve

2. ** Using an mkdocs template **¶

For the design of our website we used the template available at the following link: https://gitlab.fabcloud.org/academany/fabacademy/2022/labs/testlab/students/julian-henk

After downloading the template as a file (.zip), unzip it in the folder of your choice. To be able to modify the template locally you need some prerequisites:

• installation of the Material for MkDocs theme But we have also install cinder theme for mkdocs server so if you want you can install and use this theme instead. enter the following command line in your command prompt: pip install mkdocs-materialfor material theme, or pip install mkdocs-cinder for cinder theme . NB : change the theme in the mkdocs.yml file with text editor (brackets for example) Now you should have the display below.

• installation of the plugin mkdocs-git-revision-date-localized-plugin. enter the following command line in your command prompt: pip install mkdocs-git-revision-date-localized-plugin.

Now the prerequisites have been installed we can launch the site locally. Open your command prompt and type the command cd "location path of your project". then enter the following command line mkdocs serve to launch the mkdocs server locally. you should have the image below copy the url underlined in red and paste it in the browser of your choice.

For the modification of the code of our site we have used the software Brackets. It’s a source code editor with a primary focus on web development.

• After installing Brackets go to your project folder right click on your mouse and select the option open as Brackets project as shown below

• You should have the display below. Select the file mkdocs.yml. For the realization of our web site we started by modifying some line of code of the file mkdocs.yml.
  For more details refer to Material for MkDocs theme or cinder theme for mkdocs server

• For the programming of our web pages we have chosen to use markdown.
  Markdown is a lightweight markup language to add formatting elements to plaintext text documents.
  These are the files with the extension *.md
  Some Basic Markdown syntaxes we used to edit our web pages:

Element	Markdown Syntax
Heading	# H1 ## H2 ### H3
Bold	**bold text**
Italic	*italicized text*
Blockquote	>blockquote
Image	
Link	[text](https://www.example.com)
Ordered List	1. First item 2. Second item 3. Third item
Unordered List	- First item - Second item - Third item
Code	code

GIT Tutorial¶

1. Installation of git on Windows PC¶

To install git go to https://git-scm.com/downloads and select the Windows option.

2. Clone your gitlab repository¶

• Create an empty folder in the location of your choice “avoid long paths ”
• Open GitBash on your PC and type the command line :

cd "path of the folder created below" 

• Initialize a new Git repository

git init 

• Add your Git username and set your email

git config --global user.name "Your_username"

• Configure you email address for uploading

git config --global user.email "your_email@exemple.com"

• Generate your SSH key

ssh-keygen -t rsa -C "your_email"

• Now let´s see your keygen

cat ~/.ssh/id_rsa.pub

• Copy your ssh key to paste in your gitlab account

• Open GitLab > Account > Preferences > SSH Keys > in the key area paste the ssh key that you have copied in gitbash.

• Open the folder on the PC where you will work Right click> Git Bash here

• use the command

git clone <repository path to clone>.  

To get the path(link): open the Git repository to clone > Clone :

3. Upload your repository online¶

• Add the new files you added to git

git add index.html to upload file by file (the index.html file)
git add . to upload all the files at once

• Now name your update, so you know what you changed with this push

git commit -m ‘change you did’

• Upload to the Repository

git push

links :

https://www.atlassian.com/fr/git/tutorials/setting-up-a-repository

http://pub.fabcloud.io/tutorials/week01_principles_practices_project_management/git_simple.html