Skip to content

2. Project management

Tasks for this week:

  • Make a website and described how you did it. Theprocess is described in following content on this page.
  • Introduce yourself. Link
  • Documente steps for uploading files to archive. Please see section 8 on this page.
  • Push to the class archive. Done.
  • Sign and upload Student Agreement. Link

The process of creation website for my final project.

1. GitLab registration

According to the requirements of FabAcademy, the website should be located on the official server fabacademy.org. Therefore, it was necessary to register an account on the platform GitLab that allows students to document and report the process of development of the project.

The registration link was sent by FabAcademy to my email. After I clicked the link, my account was created and activated.

With the active account on GitLab, I can develop my website. However, it is also necessary to prepare some tools for website development and uploading new versions.

The software that helps to establish the connection between my PC and GitLab and upload new versions of the website is Git Bash.

2. Git Bash installation and Git Tutorial

The next step was an installation of the Git Bash. The software was downloaded on the official website

The main purpose of the Git system is to track the changes in different versions of the applications and documents for developers. It is an open-source system that allows people to develop their interfaces to communicate with Git Servers. The main application that allows to do it in Git terminal. With the help of this terminal, the user can manage the files on local and remote repositories. There are also some Git applications that allow drag-and-drop files, just like in usual windows. However, it is suggested to use the standard terminal. First, it is simple to use. Second, the terminal is the standard interface for Git systems. Therefore, if the user is not familiar with it, in case he or she do not have the graphical terminal, it can be a problem to use the system.

The tutorial that I watched is here: Link

The basic commands that I have learned are:

  • git init //Initialize the local git repository
  • git add //Add files to index
  • git status //Check the status of working tree
  • git commit //Commit changes in the index
  • git push //Upload files to the repository
  • git pull //Download the latest version from the repository
  • git touch //Creates the file on the local repository
  • git config //Configure the user name and email of the user

More commads can be found here

3. Using the SSH to connect the workstation and the server

The communication between GitLab and my PC should be secured. Therefore, it is necessary to use the SSH protocol that helps GitLab establish an encrypted connection with two sides and avoid anyone else from affecting the website.

I followed the tutorial:

  • I created the SSH pair of keys on my working laptop.
  • I created the folder for my website on my computer.
  • I added SSH key linked to my computer to GitLab.
  • I connected the link to the project on GitLab with the local folder on my PC.

4. Website editor installation

The next step was to install the website editor. I downloaded the software named Brackets from the official website.

5. Design of the site structure

The website should consist following information: my brief bio and contacts, current progress with the final project and the contribution to the studying process. Therefore I have decided to create the following sections of the website:

  • Home page with greetings from me.
  • About me page with self-introduction.
  • Assignments page with the information that I have learned during the course and the documentation related to the work that I did.
  • The section is fully related to my Final Project, where I will share my ideas and the process of creation.

6. Selection of web programming language

I have chosen Markdown language for website creation as the format of this programming language is simple and allows to save time on website editing. Moreover, Markdown also allows developers to use HTML tags. Therefore, this combination looks the best for me as it is simple to edit and flexible.

For example, standard HTML code requires to highlight each difference in the text by tags. To add the paragraphs, the developer should input tag <p></p> to make browser move the text to next row in Markdown; the developer just needs to add a blank line between two parts of the text.

Therefore, I have learned some basic Markdown syntax to edit my website.

The source of information for me was the website www.markdownguide.org

The syntax is that I will use more often will be:

  • Heading. To highlight it I should use a different number of #, to create different levels of headings.
  • Bold text. Add two ** before and after the text.
  • Italic. Add two __ before and after the text.
  • Ordered lists. It is very simple to use in Markdown as the lists should be edited in the same way as it should be in Microsoft Word.
  • Images. Input by ![Description](source of image)
  • Horizontal rules. Separately use three or more ***, --- or ___.
  • Links. Input by [Text](link)
  • Urls and Emails. Input by <link> and <email>.
  • Linking images. Input by [![Descriptio](link)](source)
  • Escaping Characters. \ helps not to turn the symbols into MarkDown syntax.

7. Website creation

The template provided by the GitLab is based on Markdown language. Therefore, I have chosen this template for my website. I uploaded this template to my local folder using Git Bash. To do this, I used the command “git pull origin master” and the link to the project on GitLab.

Ones I got the template on my computer I opened a related folder with Brackets software. I slightly adjusted the structure and changed the color scheme of the template.

I created several web pages: Home page, About me, Student Agreement, Final Project, the page with the task for the first week of the course and current page.

8. Uploading the content

Ones the website was ready on my PC, I uploaded it on GitLab. The uploading of the website was made via Git Bash terminal. The uploading process takes several steps:

  • I checked if the system can locate the difference between the version on my computer and the website saved on GitLab. For this purpose, I used the function “git status.” We can see that the system recognized the difference between versions.

  • The next step was to choose the files that need to be uploaded on the server. I used the function “git add -A.” Where “-A” means all.

  • The next step was to save these new files to the local repository. I used the function “git commit -m” with the comment “Week 2 page update”.

  • The last step was to upload new files on GitLab. I used the function “git push.”