Lesson 1 | Project Management

Assignment for the week:

- make an HTML website using some HTML tags and a CSS file

- create an about page to present yourself

- create a page to document your progress of week 1, what did you do, in which order, what are your experiences (problems, solutions, etc.)

- publish, modify and re-publish the pages using git workflow (it is mandatory to use the bash commands to do it)

Used Software:

     - Intellji IDEA

     - Git Bash

Downloads:

    Software:
             - Intellji IDEA

            - Git Bash

Creating the website

I already learned HTML and CSS in my second semester, so it was not that difficult to build a simple webpage on my own. To edit files, I use the software Intellji IDEA . Because I use the Materialize Framework, i have to download some files from https://materializecss.com/ . After this I have to unzip the file. The Framework gives a bunch of preselect Javascript and CSS Files. Below you see my simple HTML-Code.

I use some link-Tags, an Image-Tag and some div-Tags.

Some lines of HTML-Code for my page-footer

Some lines of HTML-Code for my page-footer


I linked my CSS file to the website wih this link-tag "<link type="text/css" rel="stylesheet" href="css/style.css">"

With the help of style.css I can make changes to the appearance of the website. So i change the color of my font to grey.

My stlye.css file

My style.css file


Git

After finishing the website, I will upload it to gitlab.

First I start the Git Shell on my computer.

At first we have to enter our username and our email-adress.

I use this two commands for this:

"git config --global user.name "Your Usename"

and

"git config --global user.email Your Email"

Set up the git bash

Set up the git bash


After this we have to create our ssh-key.

With "ssh-keygen -t rsa -C "your Email" " we create your personal ssh-key.

Now you have to copy the content from "id_rsa.pub" to https://gitlab.com/profile/keys/.

Now it's time to create a new project on gitlab.com Startpage.

For this we have to click on "Create a new project"

Startscreen of gitlab.com

Startscreen of gitlab.com


Creating the new project

Creating the new project


We have to choose a name and change the visibility level to public.

Afterwards we have to change to the git bash again. With "cd Path/to/your/Files" we move to our files.

Then we have to typ the following commands

    git init
    git remote add origin git@gitlab.com:j4n5s1/fodf.git
    git add .
    git commit -m "Initial commit"
    git push -u origin master
    

The workflow of uploading files to gitlab

The workflow of uploading files to gitlab


Gitlab Pages

Before we can publish a gitlab Page, we have to create a file named ".gitlab-ci.yml"

Copy this inside the file:

    pages:
    stage:
    script:
        - mkdir .public
        - cp -r * .public
        - mv .public public
    artifacts:
    paths:
        - public
    only:
        - master

Now we have to push the new file and the changed files to the remote repository. For this we have to use this bunch of commands:

    git add .
    git commit -m "Add gitlab pages"
    git push -u origin master
    

Right after the push, gitlab create in the background your static site. This needs some time.

After this CI/CD Process is finish, you can visit your site.

You can find your page under this link "yourNamesspace.gitlab.io"

My page can find with this link

Issues:

- no problems during this lesson