index.html.haml 8.69 KB
---
title: Websites for your GitLab projects, user account or group
---
%section.what-is
  .container
    %h2.what-is-title.text-center
      What is GitLab Pages?
    .row
      .col-md-10.col-md-push-1
        .what-is-row.clearfix
          = icon("what-is-icon-1", "what-is-icon", { label: "Create websites for your GitLab Projects" })
          %p.what-is-content
            Create websites for your GitLab projects, groups, or user account.
        .what-is-row.clearfix
          = icon("what-is-icon-3", "what-is-icon", { label: "Use any static website generator" })
          %p.what-is-content
            Use any static website generator: Jekyll, Middleman, Hexo, Hugo, Pelican, and more.
        .what-is-row.clearfix
          = icon("what-is-icon-2", "what-is-icon", { label: "Connect custom domains or SSL certificates" })
          %p.what-is-content
            Connect your custom domain(s) and TLS certificates.
        .what-is-row.clearfix
          = icon("what-is-icon-4", "what-is-icon", { label: "Host for free on GitLab.com" })
          %p.what-is-content
            Host your static websites on GitLab.com for free, or on your own GitLab instance.
    .text-center
      %a.get-started.js-scroll-to{ href: "#steps" }
        Let's get started
        %i.fa.fa-angle-down
%section#steps.steps
  .step.js-step
    .container
      .step-icon-container
        = icon("step-1-icon", "step-icon", { label: "Fork an example project" })
        %span.step-number.text-center
          [ step 01 ]
      .row
        .col-md-10.col-md-push-1.step-content-holder
          %h3.step-title.text-center
            Fork one of our example projects
          .lead.text-center.step-lead-text
            :markdown
              While you can create a project from scratch, let's keep it
              simple and fork one of your favorite
              [example projects](https://gitlab.com/groups/pages) to get a quick
              start. GitLab Pages works with any static site generator.
          .row.row-eq-height
            .col-md-12
              %a(href="https://gitlab.com/groups/pages" target="_blank")
                = image_tag "pages-group.png", class: "img-responsive"
  .step.js-step
    .container
      .step-icon-container
        = icon("step-2-icon", "step-icon", { label: "Enable shared runners" })
        %span.step-number.text-center
          [ step 02 ]
      .row
        .col-md-10.col-md-push-1.step-content-holder
          %h3.step-title.text-center
            Enable shared Runners
          .lead.text-center.step-lead-text
            :markdown
              You can take advantage of the
              [free shared Runners](https://about.gitlab.com/2016/04/05/shared-runners/)
              available on GitLab.com. All your builds will run on distinct
              Virtual Machines which use the latest [Docker Engine](https://www.docker.com).
              This will effectively eliminate any possible security issues, as
              there is no potential of breaking outside the container.
              However, you are free to
              [set up your own Runner for your project](http://doc.gitlab.com/ce/ci/runners/README.html#creating-and-registering-a-runner).
          .row.row-eq-height
            .col-md-6
              = image_tag "shared-runners.png", class: "img-responsive"
            .col-md-6.step-content
              :markdown
                Navigate to your project's **Settings > Runners** and click on
                "Enable shared runners." This combines the power of GitLab CI
                with GitLab Runner to deploy static sites based on any generator.
                On new projects this setting may be enabled by default.
  .step.js-step
    .container
      .step-icon-container
        = icon("step-3-icon", "step-icon step-icon-3", { label: "Configure your project" })
        %span.step-number.text-center
          [ step 03 ]
      .row
        .col-md-10.col-md-push-1.step-content-holder
          %h3.step-title.text-center
            Configure your project (optional)
          .lead.text-center.step-lead-text
            :markdown
              If you skip this step, your website will be available at
              **https://_username_.gitlab.io/_projectname_**, where _username_
              your username on GitLab and _projectname_ the name of the project
              you forked in the first step. This is what we call a
              [project Page](http://doc.gitlab.com/ee/pages/README.html#project-pages).
          .row.row-eq-height
            .col-md-6.col-md-push-6
              = image_tag "rename-repo.png", class: "img-responsive"
            .col-md-6.col-md-pull-6.step-content
              :markdown
                If you want the website to be available at **https://_username_.gitlab.io**,
                go to your project's **Settings** and rename your project to
                _username_.gitlab.io. This is what we call a
                [user Page](http://doc.gitlab.com/ee/pages/README.html#user-or-group-pages).

                ---

                _Depending on the static generator this may require some
                additional steps. Make sure to read the `README.md` file of
                the project you chose._
  .step.js-step
    .container
      .step-icon-container
        = icon("step-4-icon", "step-icon", { label: "Edit your site" })
        %span.step-number.text-center
          [ step 04 ]
      .row
        .col-md-10.col-md-push-1.step-content-holder
          %h3.step-title.text-center
            Edit your site
          .lead.text-center.step-lead-text
            :markdown
              Commit & push at least one change in order to trigger the build
              process. You can edit your site files
              [right from the browser](http://doc.gitlab.com/ce/workflow/web_editor.html),
              or use Git from the command line.
          .row.row-eq-height
            .col-md-6
              = image_tag "edit.png", class: "img-responsive"
            .col-md-6.step-content
              :markdown
                Edit your site directly in GitLab from your browser.
          .row.row-eq-height
            .col-md-6
              = image_tag "build.png", class: "img-responsive"
            .col-md-6.step-content
              :markdown
                Once you commit the changes, the build process will begin and
                your site will eventually be available online.
  .step.js-step
    .container
      .step-icon-container
        = icon("step-5-icon", "step-icon", { label: "Visit your site" })
        %span.step-number.text-center
          [ step 05 ]
      .row
        .col-md-10.col-md-push-1.step-content-holder
          %h3.step-title.text-center
            Visit your site!
          .lead.text-center.step-lead-text.step-lead-text-last
            :markdown
              Fire up your browser and visit **https://_username_.gitlab.io/_projectname_**
              or **https://_username_.gitlab.io** depending on what you followed
              in step 3.
%section.learn-about
  .container
    .row
      .col-md-10.col-md-push-1
        %h2.learn-about-title.text-center
          Learn more about GitLab Pages
        %h3.learn-about-sub-title.text-center
          Read through this
          %a{ href: "https://about.gitlab.com/2016/04/07/gitlab-pages-setup/" }
            guide to create your project from scratch
        .row.js-learn-more
          .col-md-4.learn-about-content
            %a{ href: "https://gitlab.com/groups/pages" }
              = image_tag "engines-pages.png", class: "img-responsive"
            %p.text-center
              Use with any static website generator. Read our
              %a{href: "https://about.gitlab.com/2016/04/07/gitlab-pages-setup/"}
                quick start tutorial
              or
              = succeed '.' do
                %a{href: "http://doc.gitlab.com/ee/pages/README.html"}
                  browse our documentation
          .col-md-4.learn-about-content
            %a{ href: "http://doc.gitlab.com/ee/pages/README.html#add-a-custom-domain-to-your-pages-website" }
              = image_tag "secure.png", class: "img-responsive"
            %p.text-center
              Add multiple custom domains and secure them with your own
              = succeed '.' do
                %a{href: "http://doc.gitlab.com/ee/pages/README.html#secure-your-custom-domain-website-with-tls"}
                  TLS certificates
          .col-md-4.learn-about-content
            %a{ href: "http://doc.gitlab.com/ee/pages/README.html#custom-error-codes-pages" }
              = image_tag "404.png", class: "img-responsive"
            %p.text-center
              Create
              %a{ href: "http://doc.gitlab.com/ee/pages/README.html#custom-error-codes-pages" }
                custom error
              pages.