gitlab-pages.html

<!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.
                            
                            
                        
<!--                 content: basic setup. adding logo to pages, adding new links to menu (or change existing), adding new pages-->
                        </p>
                        <ol>
                        
                        </ol>
                    </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>