path: root/content/index.erb

---
title: GitLab Documentation
---
<!-- Render the front page only if CI_PROJECT_NAME is gitlab-docs or is not set -->
<% if ENV['CI_PROJECT_NAME'] == 'gitlab-docs' or ENV['CI_PROJECT_NAME'].nil? %>
  <!-- Hero-->
  <section class="hero text-center">
    <!-- Feedback Banner-->
    <%= render '/banner.*' %>
    <div class="container gl-mt-11">
      <div class="row">
        <div class="col d-flex justify-content-center">
          <div class="card search gl-py-2">
            <div class="card-body">
              <h5 class="card-title gl-pb-4">Search the docs</h5>
              <% if @item[:searchbar].nil? %>
                <% unless @item.identifier.to_s.split('/')[1] == 'search' %>
                  <% if @config[:search_backend] == "google" %>
                    <div class="js-google-search-form gl-spinner-container">
                      <span aria-label="Loading" class="gl-vertical-align-text-bottom! gl-spinner gl-spinner-dark gl-spinner-md"></span>
                    </div>
                  <% elsif @config[:search_backend] == "lunr" %>
                    <div class="js-search-form gl-spinner-container">
                      <span aria-label="Loading" class="gl-vertical-align-text-bottom! gl-spinner gl-spinner-dark gl-spinner-md"></span>
                    </div>
                  <% end %>
                <% end %>
              <% end %>
            </div>
          </div>
        </div>
      </div>
      <div class="row pb-4 pt-7">
        <div class="col">
          <h2>
            Get started with...
          </h2>
        </div>
      </div>
      <!-- Topics Cards-->
      <div class="oval"></div>
      <div class="row text-left">
        <% @items['/_data/landing.yaml'][:heros].each do |hero| %>
          <div class="col-lg-4 col-md-6 col-12 pb-4">
            <div class="card topic h-100">
              <div class="card-body">
                <img class="card-img-top" src="<%= hero[:img] %>" alt="<%= hero[:alt] %>" aria-hidden="true" role="img">
                <h5 class="card-title py-2 m-0"><%= hero[:title] %></h5>
                <p class="card-text mb-2"><%= hero[:description] %></p>
                <ul class="pl-0">
                  <% hero[:links].each do |link| %>
                    <li>
                      <a href="<%= link[:url] %>" class="card-link"><%= link[:title] %></a>
                    </li>
                  <% end %>
                </ul>
              </div>
            </div>
          </div>
        <% end %>
      </div>
      <!-- Topics CTA-->
      <div class="row gl-pt-5 gl-pb-7">
        <div class="col">
          <a href="/ee/tutorials/" class="btn">
            Explore tutorials
          </a>
        </div>
      </div>
    </div>
  </section>

  <!-- Popular Topics-->
  <section class="popular text-center">
    <div class="container">
      <div class="row pt-7">
        <div class="col">
          <h2 class="m-0 pb-4">
            Popular topics
          </h2>
        </div>
      </div>
      <% @items['/_data/popular_topics.yaml'][:developer].each do |topic| %>
        <div class="row">
          <div class="col-md-3 col-12">
            <h5 class="align-top mt-0 text-left">
              <%= topic[:title] %>
            </h5>
          </div>
          <div class="col-md-9 col-12">
            <ul class="text-left">
              <% topic[:links].each do |link| %>
                <li>
                  <a href="<%= link[:url] %>">
                    <strong><%= link[:title] %>: </strong>
                    <%= link[:description] %>
                  </a>
                </li>
              <% end %>
            </ul>
          </div>
        </div>
      <% end %>
      <div class="row">
        <div class="col-md-3 col-12">
          <h5 class="align-top mt-0 text-left">
            Omnibus
          </h5>
        </div>
        <div class="col-md-9 col-12">
          <ul class="text-left">
            <% @items['/_data/popular_topics.yaml'][:topics].each do |topic| %>
              <% product = topic[:url].split('/')[1] %>
              <% if topic[:description].include? "Omnibus" %>
                <li>
                  <span>
                    <a href="<%= topic[:url] %>">
                      <strong><%= topic[:title] %>: </strong>
                      <%= topic[:description] %>
                    </a>
                  </span>
                </li>
              <% end %>
            <% end %>
          </ul>
        </div>
      </div>
      <div class="row pb-6">
        <div class="col-md-3 col-12">
          <h5 class="align-top mt-0 text-left">
            General <br class="d-none d-md-block">topics
          </h5>
        </div>
        <div class="col-md-9 col-12">
          <ul class="text-left">
            <% @items['/_data/popular_topics.yaml'][:topics].each do |topic| %>
              <% product = topic[:url].split('/')[1] %>
                <% unless topic[:description].include? "Omnibus" %>
                  <li>
                    <span>
                      <a href="<%= topic[:url] %>">
                      <strong><%= topic[:title] %>: </strong>
                      <%= topic[:description] %>
                    </a>
                  </span>
                </li>
              <% end %>
            <% end %>
          </ul>
        </div>
      </div>
    </div>
  </section>

  <!-- Self Managed-->
  <section class="self-managed text-center py-6">
    <div class="container">
      <div class="row">
        <div class="col-12">
          <h2>Install self-managed GitLab</h2>
        </div>
        <div class="col-12 options">
          <p>You’ve got options. <a href="/ee/install/install_methods.html">See them all <img src="/assets/images/collapse.svg" class="mt-n1" alt="" role="img" /></a></p>
        </div>
      </div>

      <div class="row">
        <div class="col-md-6 col-12 py-3">
          <div class="card card-large h-100">
            <div class="card-body">
              <img class="card-img-top" src="/assets/images/docs-omnibus.svg" alt="" role="img" />
              <h5 class="card-title mb-0 pb-1">Install on Linux</h5>
              <p class="card-text">The Omnibus package includes services and tools to install GitLab without laborious configuration.</p>
              <a href="/omnibus/installation/" class="card-link">Use the Omnibus package <img src="/assets/images/collapse.svg" class="mt-n1" alt="" role="img" /></a>
            </div>
          </div>
        </div>
        <div class="col-md-6 col-12 py-3">
          <div class="card card-large h-100">
            <div class="card-body">
              <img class="card-img-top" src="/assets/images/docs-charts.svg" alt="" role="img" />
              <h5 class="card-title mb-0 pb-1">Install on Kubernetes</h5>
              <p class="card-text">If you're using cluster management, we recommend the Helm chart or the Operator for installing cloud-native GitLab.</p>
              <a href="https://docs.gitlab.com/charts/" class="card-link">Use the Helm chart <img src="/assets/images/collapse.svg" class="mt-n1" alt="" role="img" /></a>
              <a href="https://docs.gitlab.com/operator/" class="card-link">Use the Operator <img src="/assets/images/collapse.svg" class="mt-n1" alt="" role="img" /></a>
            </div>
          </div>
        </div>
      </div>

      <div class="row">
        <% @items['/_data/landing.yaml'][:cards].each do |card| %>
          <div class="col-lg-4 col-12 py-3">
            <div class="card transparent text-left h-100">
              <div class="p-3">
                <h5 class="card-title">
                  <img src="/assets/images/download.svg" class="mr-2" alt="" role="img" />
                  <a href="<%= card[:url] %>"><%= card[:title] %></a>
                </h5>
                <p class="card-text pl-6">
                  <%= card[:description] %>
                </p>
              </div>
            </div>
          </div>
        <% end %>
      </div>

      <div class="row">
        <div class="col related pt-3">
          <p>
            <strong>Related topic:</strong> <a href="/runner/install/">Install GitLab Runner,</a> an application that works with GitLab CI/CD to run jobs in a pipeline.
          </p>
        </div>
      </div>
    </div>
  </section>

  <!-- Reference -->
  <section class="reference text-center py-5">
    <div class="container">
      <div class="row">
        <div class="col-12">
          <h2 class="text-white pt-2 pb-0">
            Reference architectures
          </h2>
        </div>
        <div class="col-12 pb-2">
          <p>
            Scale your GitLab installation by using the recommended configurations.
          </p>
        </div>
      </div>
      <div class="row">
        <% @items['/_data/landing.yaml'][:referenceSmall].each do |ref| %>
          <div class="col-md-3 col-6 d-flex align-items-center justify-content-center py-2 my-1 py-md-0 my-md-0">
            <div class="circle rounded-circle">
              <a class="text-white text-decoration-none" href="<%= ref[:url] %>">
                <span class="d-block title pt-5"><%= ref[:title] %></span>
                <span class="d-block sub-title mt-n3">users</span>
                <span class="d-block">
                  <img src="/assets/images/arrow-right.svg" alt="" role="img" />
                </span>
              </a>
            </div>
          </div>
        <% end %>
      </div>
      <div class="row pt-md-4 pb-5">
        <% @items['/_data/landing.yaml'][:referenceLarge].each do |ref| %>
          <div class="col-md-4 col-6 d-flex align-items-center justify-content-center py-2 my-1 py-md-0 my-md-0 <%= ref[:class] %>">
            <div class="circle rounded-circle">
              <a class="text-white text-decoration-none" href="<%= ref[:url] %>">
                <span class="d-block title pt-5"><%= ref[:title] %></span>
                <span class="d-block sub-title mt-n3">users</span>
                <span class="d-block">
                  <img src="/assets/images/arrow-right.svg" alt="" role="img" />
                </span>
              </a>
            </div>
          </div>
        <% end %>
      </div>
    </div>
  </section>

  <!-- Support-->
  <section class="support py-9">
    <div class="container">
      <div class="row">
        <div class="col d-flex justify-content-center">
          <div class="card text-center h-100">
            <div class="card-body">
              <h5 class="card-title">
                Get support
              </h5>
              <p class="card-text mb-4 pb-2">
                If you need additional help and you're on a paid tier, you can request support.
              </p>
              <a href="https://about.gitlab.com/support/" class="btn btn-outline-primary">
                Request support
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- Footer-->
  <footer class="landing-footer d-xl-flex align-items-xl-center">
    <div class="container">
      <div class="row">
        <div class="col d-xl-flex align-items-xl-center justify-content-xl-center">
          <a href="https://about.gitlab.com/company/">About GitLab</a>
          <a href="<%= edit_on_gitlab(@item) %>" target="_blank" rel="noopener noreferrer">View page source</a>
          <a href="<%= edit_on_gitlab(@item, editor: :webide) %>" target="_blank" rel="noopener noreferrer">Edit in Web IDE</a>
          <a href="https://about.gitlab.com/privacy/">Privacy Statement</a>
          <% if production? %>
          <!-- OneTrust Cookies Settings button -->
          <button id="ot-sdk-btn" class="ot-sdk-show-settings">Cookie Settings</button>
          <% end %>
          <a href="https://about.gitlab.com/community/contribute/">Please contribute</a>
          <a href="https://creativecommons.org/licenses/by-sa/4.0/" target="_blank" rel="license noopener noreferrer" class="ml-xl-3 no-attachment-icon mt-3 mt-xl-0 gl-hover-text-decoration-none!">
            <img src="./assets/images/by-sa.svg" alt="Creative Commons License"/>
          </a>
        </div>
      </div>
    </div>
  </footer>
<% end %>