Um ein eigenes Gitlab-pages Projekt zu erstellen und damit eine eigene Projektseite zu erstellen, führen Sie folgende Schritte aus:

1. Legen Sie sich auf https://transfer.hft-stuttgart.de ein Benutzerkonto an bzw. loggen Sie sich mit Ihren HFT-Nutzerdaten in das Transferportal ein.
2. Besuchen Sie die Website https://transfer.hft-stuttgart.de/gitlab/explore/projects
3. Loggen Sie sich mit ihren Anmeldedaten ein
4. Standardmäßig wird Ihr Projekt als persönliches Projekt veröffentlicht, es wird also an Ihren persönlichen Benutzernamen gekoppelt, der dann auch in der URL auftaucht. Wenn Sie dies nicht wünschen, erstellen Sie eine neue Gruppe, unter der Sie das Projekt erstellen. Klicken Sie dazu auf Groups, Your Groups und wählen New group aus. Hier können Sie nun der Gruppe einen entsprechenden Namen geben.

   Wichtig: Dieser Name wird später auch in der URL auftauchen, unter der Ihre Seite aufrufbar ist.

   Nach Klick auf create group wird Ihre Gruppe angelegt, und Sie werden automatisch zur Gruppenseite weitergeleitet.
5. Legen Sie ein neues Projekt an, indem Sie auf den Button New Project klicken
6. Wählen Sie Create from template aus und nutzen Sie ein Template aus dem Bereich Instance , Klicken Sie dort auf Use template
7. Nun können Sie ihr Projekt befüllen. Tragen Sie mindestens die Grundinformationen wie Project name und Project description ein.
8. Klicken Sie auf Create project
9. Ihr Projekt wird nun erstellt und enthält automatisch die notwendigen Grundeinstellungen für das Publizieren einer Website über die Funktion Pages. Vor allem wird im Repositorium der Ordner Public angelegt.
   

   This is the structure of a simple template.

   assets folder: You place in this folder files that should be common for all the subpages of your gitlab page. E.g. you should place any personal avatars or partner logos in the corresponding folders (images, logos).

   home folder: This is the default folder where you place your main template.

   settings.js: This is the file where you select the settings for your gitlab page.

   

   You should not make changes to some of the files.

   Red: Those files should not be changed.

   Orange: Those files should be replaced by your own files. The filename should remain the same.

   Green: Those files you can edit.

   Blue: In those folders you can add your additional files. In case of assets, images, logos etc. In case of a template folder, your custom css, javascript or any other files.

   
10. Um Ihre eigenen Projektinhalte zu veröffentlichen, können Sie entweder eine komplett eigene HTML-Seite erzeugen oder sich an unseren Vorgaben aus dem Template orientieren. Eine Anleitung zur Verwendung unserer Vorlage finden Sie im Bereich Gitlab-pages Template benutzen
11. Sobald Sie Änderungen an Ihrer Seite vornehmen und diese in den Master-Branch eintragen (der Standard-Branch ihres Projektes), wird das Projekt veröffentlicht. Um den Link zu sehen, unter dem Sie Ihre Seite finden, gehen Sie in der Sitebar auf der linken Seite unter CI / CD auf Jobs und wählen den obersten Job mit den Namen pages aus. Im nun angezeigten Log finden Sie die Adresse, unter der Ihr Projekt ausgerollt wurde.
12. Für weitere Schritte gehen Sie zum nächsten Abschnitt.

Nachdem Ihr Projekt das erste Mal veröffentlicht wurde, möchten Sie sicherlich Änderungen an der Seite vornehmen. Dafür gehen Sie wie folgt vor:

1. Klicken Sie die Datei, die Sie ändern wollen, in der Projektübersicht an
2. Klicken Sie in der sich nun öffnenden Dateiansicht auf Edit
3. Bearbeiten Sie ihre Datei
4. Um die Änderungen zu speichern und auf ihrer Seite sofort zu übernehmen, klicken Sie auf Commit changes
5. In der Projektübersicht sehen Sie nun den Status der Deployment-Pipeline, die ihre Webseite auf unserem Server veröffentlicht. Durch Klick auf das Symbol gelangen Sie zu einer Übersicht aller für Ihr Projekt angelaufenen Pipelines.
   Durch Klick auf eine Pipeline wird Ihnen eine Erklärung zum aktuellen Status angezeigt, der Sie auch eventuelle Probleme entnehmen können.
   Eine fehlerfrei durchgelaufene Pipeline liefert etwa ein solches Ergebnis:
   Für eine Übersicht über häufig auftretende Fehler und was man dagegen tun kann, siehe hier .
6. Wenn die Änderungen an Ihrer Homepage ohne Probleme übernommen wurden, sehen Sie dies an einem grünen Haken in der Projektübersicht

Um Ihre gitlab-pages Seite zu entfernen, gibt es zwei Möglichkeiten. Sie können entweder das gesamte Projekt löschen, oder aber nur die öffentliche Seite, das Projekt aber behalten, um daran Änderungen vorzunehmen. Um nur die Seite, nicht aber das Projekt an sich zu löschen, gehen Sie wie folgt vor:

1. Klicken Sie in der linken Sitebar auf Settings und pages .
2. Klicken Sie in der sich nun öffnenden Konfigurationsansicht auf Remove pages . Dies entfernt die Seite von unserem Server, das Projekt an sich bleibt aber erhalten.

Um unsere Vorlage zu benutzen, müssen Sie folgende Schritte ausführen:

1. Anpassen der Standardwerte in settings.js

   Wichtig: Werden diese Werte nicht angepasst, wird das Projekt nicht auf unseren Servern ausgerollt und die deployment-Pipeline wirft einen Fehler

   Klicken Sie dazu im Ordner public auf die Datei settings.js und editieren Sie die Datei.

   

   Those are the default values for the social networks/personal website of a participant and the default avatar. It is recommended not to change them, but you can add another social network if you want.

   

   The switches control which parts of you gitlab page should turn on or off. E.g. if you want a single page and not a menu then you change the menu value to OFF.

   

   Here you change the project name. If the switch for the project name is OFF then it will not be visible.

   

   Here you change the menu of your gitlab page. A menu can be linked with a folder/template or with an external link, e.g. a demo. You can add or remove menu entries. You hide the menu when the switch is OFF. Don't forget to add the forward slash at the end of a menu link if it is pointing to a folder.

   

   Here you change the participants. You can use default values for a social network (They point to HFT's social networks) or you can use your own profiles. You can also add your personal webpage. You can add or remove a social network. You can also use a personal avatar or the default one (DEFAULT.avatar).

   

   Here is an example of two participants.

   

   Here you change the footer logos of a project's partners. If you don't want a logo to link to an external website then use the href value EMPTY_LINK. The title will appear when you hover the mouse over a logo.

   

   When you use the generic template there is an additional folder called templates. Inside this folder you will find all the available templates. In order to use a template, you have to copy the folder from templates/<template name> and paste it (when you edit your pages locally) in the root folder. Then it’s a good practice to rename this folder with the menu text you want to link it. Notice that the home page always points to the home folder. That means if you want to use a template as home page then you have to rename the folder to home.

   

   Klicken Sie anschließend auf commit changes , um die Änderungen zu speichern.

   

To add a personal avatar:

1. Öffnen Sie den Ordner public/assets/images
2. Klicken Sie auf das + im Oberen Bereich, und anschließend auf Upload File
3. It is recommended the avatar to be square or portrait oriented. Also, better do not upload large avatars (>500px).

Um ein eigenes Projektlogo zum Projekt hinzuzufügen, müssen Sie folgende Schritte ausführen:

1. Öffnen Sie den Ordner public
2. Klicken Sie auf das + im Oberen Bereich, und anschließend auf Upload File
3. Fügen Sie die gewünschte Datei hinzu und klicken Sie auf Upload File
4. Öffnen Sie nun im Ordner public die Datei settings.js und editieren diese.

   In der Zeile mit projektlogourl schreiben Sie nun ./DATEINAME in die Anführungszeichen, um den Pfad zum Logo anzugeben. Ein Klick auf Commit changes speichert die Datei.

   
5. Nun erscheint auf all Ihren Seiten das Projektlogo neben dem Logo der Hochschule.

Um Ihrem Projekt neue Seiten hinzuzufügen, führen Sie folgende Schritte aus:

1. Visit the templates folder and edit the index.html file. Select all the text inside this file and copy it. Then click the button cancel.
2. Klicken Sie im Ordner public auf das +, das sich oben neben dem Pfad befindet
3. Klicken Sie dort auf New File
4. Paste the text you copied from the template
5. Geben Sie die Dateinamen index.html ( wichtig: Endung .html)
6. Nun können Sie noch den Inhalt der Seite anpassen. Wenn Sie mit dem Inhalt der Seite zufrieden sind, speichern Sie sie durch Klick auf Commit changes
7. Ihre Seite wird nun automatisch auf den Server übertragen und ist unter folgender Adresse erreichbar:

   https://transfer.hft-stuttgart.de/pages/EIGENTUEMER/PROJEKTNAME/DATEINAME