{% extends "ceph/base_ceph.html" %}

{% block title %}Install Ceph on Ubuntu{% endblock %}

{% block meta_description %}
  A step-by-step installation guide to Ceph on your software defined infrastructure.
{% endblock %}

{% block meta_copydoc %}
  https://docs.google.com/document/d/1EmOtHjuEMKhVLQA7GwyrKfCzOKfc8UCEyh-p04-PxzA/edit#
{% endblock meta_copydoc %}

{% from "_macros/vf_hero.jinja" import vf_hero %}

{% block body_class %}
  is-paper
{% endblock body_class %}

{% block content %}

  {% call(slot) vf_hero(
    title_text="Install Ceph on Ubuntu",
    layout="50/50",
    is_split_on_medium=true
    ) -%}
    {%- if slot == "description" -%}
      <p>
        Ceph is a storage system designed for excellent performance, reliability, and scalability. However, the installation and management of Ceph can be challenging. The Ceph-on-Ubuntu solution takes the administration minutiae out of the equation through the use of snaps and Juju charms. With either approach, the deployment of a Ceph cluster becomes trivial as does the scaling of the cluster's storage capacity.
      </p>
      <p>Looking for help running Ceph?</p>
    {%- endif -%}
    {%- if slot == "cta" -%}
      <a href="/ceph/contact-us" class="p-button--positive js-invoke-modal">Get in touch</a>
    {%- endif -%}
    {%- if slot == "image" -%}

      <div class="p-image-container--3-2 is-highlighted u-hide--small">
        {{ image(url="https://assets.ubuntu.com/v1/b2b015d3-install-ceph-on-ubuntu.png",
                alt="",
                width="1800",
                height="1128",
                hi_def=True,
                loading="auto",
                attrs={"class": "p-image-container__image"}) | safe
        }}

      </div>
    {%- endif -%}

  {% endcall -%}

  <section class="p-section">
    <div class="u-fixed-width">
      <hr class="p-rule" />
      <div class="p-section--shallow">
        <h2>Choose the Ceph installation option for your deployment:</h2>
      </div>
      <div class="js-tabbed-content">
        <div class="p-tabs">
          <div class="p-tabs__list"
                role="tablist"
                aria-label="Ceph installation instructions">
            <div class="p-tabs__item">
              <button class="p-tabs__link"
                      role="tab"
                      aria-selected="true"
                      aria-controls="single-node-tab"
                      id="single-node"
                      data-maintain-hash="single-node">Single-node</button>
            </div>
            <div class="p-tabs__item">
              <button class="p-tabs__link"
                      role="tab"
                      aria-selected="false"
                      aria-controls="multi-node-tab"
                      id="multi-node"
                      data-maintain-hash="multi-node"
                      tabindex="-1">Multi-node</button>
            </div>
            <div class="p-tabs__item">
              <button class="p-tabs__link"
                      role="tab"
                      aria-selected="false"
                      aria-controls="containerised-tab"
                      id="containerised"
                      data-maintain-hash="Containerised"
                      tabindex="-1">Containerized</button>
            </div>
            <div class="p-tabs__item">
              <button class="p-tabs__link"
                      role="tab"
                      aria-selected="false"
                      aria-controls="large-scale-tab"
                      id="large-scale"
                      data-maintain-hash="large-scale"
                      tabindex="-1">Large-scale</button>
            </div>
          </div>
        </div>
        <!-- tab content -->
        {% include "/ceph/shared/_single-node-deployment.html" %}
        {% include "/ceph/shared/_multi-node-deployment.html" %}
        {% include "/ceph/shared/_containerized-deployment.html" %}
        {% include "/ceph/shared/_large-scale-deployment.html" %}
      </div>
    </div>
  </section>

  <section class="p-section">
    <div class="row--50-50">
      <hr class="p-rule" />
      <div class="col">
        <h2>Need more help with Ceph?</h2>
      </div>
      <div class="col">
        <p>Let our Ceph experts help you take the next step.</p>
        <div class="p-cta-block">
          <a class="p-button--positive js-invoke-modal" href="/ceph/contact-us">Get in touch</a>
        </div>
      </div>
    </div>
  </section>

  {% with title_link="/blog/tag/ceph", tag_id="1780" %}
    {% include "ceph/shared/_latest-news-ceph.html" %}
  {% endwith %}

  <script src="{{ versioned_static('js/dist/tabbedContent.js') }}"></script>

{% endblock content %}