<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>Hilfe: Gitlab-Pages</title>
<link rel="stylesheet" href="/css/bootstrap.min.css">
<link rel="stylesheet" href="/css/m4lab.css">
<link rel="stylesheet" href="/fonts/font-awesome.min.css">
<link rel="stylesheet" href="/fonts/ionicons.min.css">
<link rel="stylesheet" href="/css/Testimonials.css">
<link rel="stylesheet" href="/css/help.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
</head>
<body>
<div style="background-color: #dadada;">
<div class="container" style="background-color: #ffffff;margin-bottom: 30px;">
<div class="row">
</div>
</div>
<div id="Gitlab_Text" style="margin-top: 40px;margin-bottom: 30px;">
<div class="container" style="background-color: #ffffff;">
<div style="margin-bottom: 0;padding-top: 20px;padding-bottom: 20px;">
<div class="col-lg-12">
<h2 class="d-flex flex-column flex-shrink-1 justify-content-lg-start text-center" style="padding-top: 15px;color: #708090;"><strong>Gitlab-pages</strong></h2>
</div>
<div class="col-auto flex-row flex-grow-1 flex-fill" style="background-color: #ffffff;">
<p><a href="https://de.wikipedia.org/wiki/GitLab">GitLab</a> ist eine umfangreiche Webanwendung zur Versionsverwaltung für Softwareprojekte auf Basis von <a href="https://de.wikipedia.org/wiki/Git">Git</a> die auch Wiki-Funktionen und Issue Tracking bietet. Das Transferportal der HFT-Stuttgart betreibt eine eigene GitLab-Instanz für die Hochschule für Technik Stuttgart und ihre Kooperationspartner unter einer Open-Access-Lizenz. Mit <a href="https://docs.gitlab.com/ee/user/project/pages/">GitLab Pages </a> besteht für Angehörige der HFT die Möglichkeit, eine öffentliche statische Projektwebsite aus einem GitLab-Projekt heraus zu erzeugen.
</p><p>
Die URL, unter der die Seite dann zu finden ist, lautet: <br/> <br/>
<p class="justify-content-lg-start text-center">https://transfer.hft-stuttgart.de/pages/PROJEKTNAME/</p>
</p>
</div>
<a class="btn btn-primary text-center d-inline-flex d-lg-flex flex-column flex-grow-1 flex-shrink-1 flex-fill justify-content-between align-items-baseline align-content-center align-self-baseline flex-wrap order-3 mb-auto justify-content-md-center align-items-md-end align-items-lg-center justify-content-xl-center mx-auto"
role="button" style="background-color: #E0001B;" href="https://transfer.hft-stuttgart.de/gitlab/explore/projects"><strong>Zugriff auf Gitlab</strong></a>
</div>
</div>
</div>
<div id="create_Text" style="margin-top: 10px;margin-bottom: 30px;">
<div class="container" style="background-color: #ffffff;">
<div style="margin-bottom: 0;padding-top: 20px;padding-bottom: 20px;">
<div class="col-lg-12">
<h2 class="d-flex flex-column order-1 justify-content-lg-start text-center" style="padding-top: 15px;color: #708090;"><strong>Gitlab-pages Projekte</strong></h2>
</div>
<div class="col-auto" style="background-color: #ffffff;">
<div class="help">
<div class="card">
<div class="card-header">
<h3 class="card-title">
<a class="collapsed" data-toggle="collapse" href="#collapse1" aria-expanded="false" aria-controls="collapse1">
<small>Gitlab-pages Projekt erstellen</small></a>
</h3>
</div>
<div id="collapse1" class="card-body collapse" style="">
<p>
Um ein eigenes Gitlab-pages Projekt zu erstellen und damit eine eigene Projektseite zu erstellen, führen Sie folgende Schritte aus:
</p>
<ol>
<li> Legen Sie sich auf <a href="https://transfer.hft-stuttgart.de"> https://transfer.hft-stuttgart.de</a> ein Benutzerkonto an bzw. loggen Sie sich mit Ihren HFT-Nutzerdaten in das Transferportal ein.</li>
<li> Besuchen Sie die Website <a href="https://transfer.hft-stuttgart.de/gitlab/explore/projects">https://transfer.hft-stuttgart.de/gitlab/explore/projects</a></li>
<li> Loggen Sie sich mit ihren Anmeldedaten ein </li>
<li> Legen Sie ein neues Projekt an, indem Sie auf den Button <em> New Project </em> klicken
<img src="/img/help/newproject.png" width="95%"/>
</li>
<li> Wählen Sie <em> Create from template </em> aus und nutzen Sie das Template <em> </em> aus dem Bereich <em> Instance </em>, Klicken Sie dort auf <em> Use template</em> <img src="/img/help/fromtemplate.png" width="95%"/> <img src="/img/help/choosetemplate.png" width="95%"/> </li>
<li> Nun können Sie ihr Projekt befüllen. Tragen Sie mindestens die Grundinformationen wie <em> Project name </em> und <em> Project description </em> ein.<img src="/img/help/createproject.png" width="95%"/> </li>
<li> Klicken Sie auf <em> Create project</em></li>
<li>
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 <em> Public </em> angelegt. <img src="/img/help/folderpublic.png" width="95%"/> <br/>
In diesem Ordner befinden sich die Dateien <em> index.html, aktuelles.html </em>, <em> style.css </em> und <em>settings.js</em>. Diese sorgen für Inhalt (aktuelles.html, index.html) und Aussehen (style.css) der statischen Webseite und enthalten allgemeine Projektinformationen (settings.js). Direkt nach Projekterstellung enthalten sie zunächst nur allgemeine, grundsätzliche Informationen aus dem Template. <img src="/img/help/content_public.png" width="95%"/>
</li>
<li>
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 <a href="#template_Text">Gitlab-pages Template benutzen</a>
</li>
<li>
Sobald Sie mit dem Inhalt der Seite zufrieden sind, und diese veröffentlichen wollen, informieren Sie den Administrator unter <a href="mailto:support-transfer@hft-stuttgart.de">support-transfer@hft-stuttgart.de</a>. Dieser wird dann Ihr Projekt das erste Mal auf den Server hochladen, für weitere Schritte gehen Sie zum nächsten Abschnitt.
</li>
</ol>
<a class="btn btn-primary text-center d-inline-flex d-lg-flex flex-column flex-grow-1 flex-shrink-1 flex-fill justify-content-between align-items-baseline align-content-center align-self-baseline flex-wrap order-3 mb-auto justify-content-md-center align-items-md-end align-items-lg-center justify-content-xl-center mx-auto"
role="button" style="background-color: #E0001B;" href="mailto:support-transfer@hft-stuttgart.de"><strong>Administratorkontakt</strong></a>
</div>
</div>
<br/>
<div class="card">
<div class="card-header">
<h3 class="card-title">
<a class="collapsed" data-toggle="collapse" href="#collapse2" aria-expanded="false" aria-controls="collapse2">
<small>Gitlab-pages Projekt ändern</small></a>
</h3>
</div>
<div id="collapse2" class="card-body collapse" style="">
<p>
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:
<ol>
<li>
Klicken Sie die Datei, die Sie ändern wollen, in der Projektübersicht an <img src="/img/help/content_index_marked.png" width="95%"/>
</li>
<li>
Klicken Sie in der sich nun öffnenden Dateiansicht auf <em> Edit </em> <img src="/img/help/file_view.png" width="95%"/>
</li>
<li>
Bearbeiten Sie ihre Datei
</li>
<li>
Um die Änderungen zu speichern und auf ihrer Seite sofort zu übernehmen, klicken Sie auf <em> Commit changes </em>
<img src="/img/help/save_file.png" width="95%"/>
</li>
<li>
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.
<img src="/img/help/pipeline_pending.png" width="95%"/><br/>
Durch Klick auf eine Pipeline wird Ihnen eine Erklärung zum aktuellen Status angezeigt, der Sie auch eventuelle Probleme entnehmen können.
<img src="/img/help/overview_pipelines.png" width="95%"/><br/>
Eine fehlerfrei durchgelaufene Pipeline liefert etwa ein solches Ergebnis:
<img src="/img/help/output.png" width="95%"/><br/>
Für eine Übersicht über häufig auftretende Fehler und was man dagegen tun kann, siehe <a href="#error_Text"> hier </a>.
</li>
<li> Wenn die Änderungen an Ihrer Homepage ohne Probleme übernommen wurden, sehen Sie dies an einem grünen Haken in der Projektübersicht
<img src="/img/help/pipeline_good.png" width="95%"/>
</li>
</ol>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="error_Text" style="margin-top: 10px;margin-bottom: 30px;">
<div class="container" style="background-color: #ffffff;">
<div style="margin-bottom: 0;padding-top: 20px;padding-bottom: 20px;">
<div class="col-lg-12">
<h2 class="d-flex flex-column order-1 justify-content-lg-start text-center" style="padding-top: 15px;color: #708090;"><strong>Häufige Fehlermeldungen und deren Korrektur</strong></h2>
</div>
<div class="col-auto" style="background-color: #ffffff;">
<p>
<ul>
<li>
<h6> This job is stuck because you don't have any active runners online or available with any of these tags assigned to them: production </h6>
<p> In diesem Fall ist Ihr Projekt höchstwahrscheinlich noch nicht registriert oder es liegt ein anderes Problem vor. Kontaktieren Sie den Administrator </p>
</li>
</ul>
</p>
</div>
<a class="btn btn-primary text-center d-inline-flex d-lg-flex flex-column flex-grow-1 flex-shrink-1 flex-fill justify-content-between align-items-baseline align-content-center align-self-baseline flex-wrap order-3 mb-auto justify-content-md-center align-items-md-end align-items-lg-center justify-content-xl-center mx-auto"
role="button" style="background-color: #E0001B;" href="mailto:support-transfer@hft-stuttgart.de"><strong>Administratorkontakt</strong></a>
</div>
</div>
</div>
<div id="template_Text" style="margin-top: 10px;margin-bottom: 30px;">
<div class="container" style="background-color: #ffffff;">
<div style="margin-bottom: 0;padding-top: 20px;padding-bottom: 20px;">
<div class="col-lg-12">
<h2 class="d-flex flex-column order-1 justify-content-lg-start text-center" style="padding-top: 15px;color: #708090;"><strong>Gitlab-pages Template benutzen</strong></h2>
</div>
<div class="col-auto" style="background-color: #ffffff;">
<p>
Wir stellen eine Vorlage für Projektwebseiten zur Verfügung.
</p>
<div class="help">
<div class="card">
<div class="card-header">
<h3 class="card-title">
<a class="collapsed" data-toggle="collapse" href="#collapse7" aria-expanded="false" aria-controls="collapse7">
<small>Erste Schritte</small></a>
</h3>
</div>
<div id="collapse7" class="card-body collapse" style="">
<p>
Um unsere Vorlage zu benutzen, müssen Sie folgende Schritte ausführen:
</p>
<ol>
<li> Anpassen der Standardwerte in settings.js
<p><b> Wichtig: </b> Werden diese Werte nicht angepasst, wird das Projekt nicht auf unseren Servern ausgerollt und die deployment-Pipeline wirft einen Fehler
</p>
<p>
Klicken Sie dazu im Ordner <em> public </em> auf die Datei <em> settings.js </em> und editieren Sie die Datei.
</p>
<img src="/img/help/select_settings.png" width="95%"/>
<p>
Passen Sie die Werte für projektname und projektseitenlink an, indem Sie die entsprechenden Werte in die Anführungszeichen schreiben.
</p>
<img src="/img/help/edit_settings.png" width="95%"/>
<p>
Klicken Sie anschließend auf <em> commit changes </em>, um die Änderungen zu speichern.
</p>
</li>
<li> Anpassen der Kontaktperson in <em> kontakt.html </em>
<p><b> Wichtig: </b> Wird die Kontaktperson nicht angepasst, wird das Projekt nicht auf unseren Servern ausgerollt und die deployment-Pipeline wirft einen Fehler
</p>
<p>
Klicken Sie dazu im Ordner <em> public </em> auf die Datei <em> kontakt.html </em> und editieren Sie die Datei.
</p>
<img src="/img/help/select_contact.png" width="95%"/>
<p>
Passen Sie die Kontaktperson und die Mailadresse an, indem Sie alle Vorkommen von Max Mustermann und die Mailadresse durch Ihre Werte ersetzen.
</p>
<img src="/img/help/edit_contact.png" width="95%"/>
<p>
Klicken Sie anschließend auf <em> commit changes </em>, um die Änderungen zu speichern.
</p>
</li>
<li>
Nun können Sie den Administrator kontaktieren, der Ihr Projekt am Runner registriert, um das Projekt auf unserem Server auszurollen.
</li>
</ol>
<a class="btn btn-primary text-center d-inline-flex d-lg-flex flex-column flex-grow-1 flex-shrink-1 flex-fill justify-content-between align-items-baseline align-content-center align-self-baseline flex-wrap order-3 mb-auto justify-content-md-center align-items-md-end align-items-lg-center justify-content-xl-center mx-auto"
role="button" style="background-color: #E0001B;" href="mailto:support-transfer@hft-stuttgart.de"><strong>Administratorkontakt</strong></a>
</div>
</div>
<br/>
<div class="card">
<div class="card-header">
<h3 class="card-title">
<a class="collapsed" data-toggle="collapse" href="#collapse3" aria-expanded="false" aria-controls="collapse3">
<small>Logo hinzufügen</small></a>
</h3>
</div>
<div id="collapse3" class="card-body collapse" style="">
<p> Um ein eigenes Projektlogo zum Projekt hinzuzufügen, müssen Sie folgende Schritte ausführen:
<ol>
<li>
Öffnen Sie den Ordner <em> public </em>
</li>
<li>
Klicken Sie auf das + im Oberen Bereich, und anschließend auf <em> Upload File </em>
<img src="/img/help/publicplus.png" width="95%"/>
</li>
<li>
Fügen Sie die gewünschte Datei hinzu und klicken Sie auf <em> Upload File </em>
<img src="/img/help/upload_logo.png" width="95%"/>
</li>
<li>
Öffnen Sie nun im Ordner <em> public </em> die Datei <em> settings.js </em> und editieren diese.
<p>
In der Zeile mit <em>projektlogourl</em> schreiben Sie nun ./DATEINAME in die Anführungszeichen, um den Pfad zum Logo anzugeben. Ein Klick auf <em> Commit changes </em> speichert die Datei.
</p>
<img src="/img/help/settings_logo.png" width="95%"/>
</li>
<li>
Nun erscheint auf all Ihren Seiten das Projektlogo neben dem Logo der Hochschule.
</li>
</ol>
</p>
</div>
</div>
<br/>
<div class="card">
<div class="card-header">
<h3 class="card-title">
<a class="collapsed" data-toggle="collapse" href="#collapse4" aria-expanded="false" aria-controls="collapse4">
<small>Neue Seite hinzufügen</small></a>
</h3>
</div>
<div id="collapse4" class="card-body collapse" style="">
<p>
Um Ihrem Projekt neue Seiten hinzuzufügen, führen Sie folgende Schritte aus:
<ol>
<li>
Klicken Sie im Ordner <em> public </em> auf das +, das sich oben neben dem Pfad befindet
<img src="/img/help/publicplus.png" width="95%"/>
</li>
<li>
Klicken Sie dort auf <em> New File </em>
</li>
<li>
Geben Sie einen Dateinamen (<b> wichtig: </b> Endung .html) an und fügen Sie folgenden Standardtext ein:
<textarea rows="28" cols="64" disabled="true">
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="generator" content="GitLab Pages">
<title>Neue Seite</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="topbar">
<div id="menu" class="navbar"></div>
</div>
<div class="content">
<h1 id='projectname'></h1> <!--Projektname kommt aus settings.js, hier nichts einfügen-->
<!-- ÄNDERUNGEN NUR NACH DIESER ZEILE -->
<h2> Seitentitel: </h2>
<p>
Content
</p>
<!-- KEINE ÄNDERUNGEN NACH DIESER ZEILE -->
</div>
<script src="settings.js"> </script>
</body>
</html>
</textarea>
<img src="/img/help/editnewpage.png" width="95%"/>
</li>
<li>
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 <em> Commit changes </em>
</li>
<li>
Ihre Seite wird nun automatisch auf den Server übertragen und ist unter folgender Adresse erreichbar:
<p>https://transfer.hft-stuttgart.de/pages/PROJEKTNAME/DATEINAME</p>
</li>
</ol>
</p>
</div>
</div>
<br/>
<div class="card">
<div class="card-header">
<h3 class="card-title">
<a class="collapsed" data-toggle="collapse" href="#collapse5" aria-expanded="false" aria-controls="collapse5">
<small>Menü bearbeiten</small></a>
</h3>
</div>
<div id="collapse5" class="card-body collapse" style="">
<p>
Wenn Sie das Menü am oberen Seitenrand bearbeiten wollen, führen Sie folgende Schritte durch:
<ol>
<li>
Öffnen Sie im Ordner <em> public </em> die Datei <em>settings.js</em> und editieren Sie diese.
</li>
<li>
Im Menüblock kopieren Sie einen bereits bestehenden Teil und fügen diesen im Anschluss ein. Ein solcher Block besteht dabei aus folgenden Anweisungen:
<img src="/img/help/settingmenublock.png" width="95%"/>
<ul>
<li>
<em>//Link 4: Kontakt </em> Dies ist ein Kommentar, der der Ordnung und Verständlichkeit des Codes dient
</li>
<li>
<em>let NAME = document.createElement("a") </em> Dies legt einen neuen Eintrag fest
</li>
<li>
<em>NAME.href = "addresse" </em> Dies legt die Adresse fest, auf die der neue Menüeintrag verweist. Dies kann zum Beispiel eine neu angelegte Seite sein.
</li>
<li>
<em>NAME.innerHTML="" </em> Dies legt den Text des Eintrags fest, also was später im Menü angezeigt wird
</li>
<li>
<em> menu.appendChild(NAME); </em> Dies fügt letztlich den Eintrag dem Menü hinzu.
</li>
</ul>
</li>
<li>
Nachdem Sie den Block entsprechend Ihrer Wünsche bearbeitet haben, klicken Sie auf <em> Commit changes </em>, um Ihre Änderungen zu speichern.
<img src="/img/help/settingsnewmenublock.png" width="95%"/>
</li>
</ol>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container" style="background-color: #ffffff;margin-bottom: 30px;">
<div class="row">
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>-->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="/js/headfoot.js"></script>
</body>
</html>