--- title: Websites for your GitLab projects, user account or group description: GitLab's Pages feature allows you to create websites for your GitLab projects, groups, or user account. --- %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("pages/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("pages/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("pages/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("pages/what-is-icon-4", "what-is-icon", { label: "Host for free on GitLab.com" }) %p.what-is-content Host your static websites on #{link_to 'GitLab.com', '/gitlab-com/'} for free, or on #{link_to 'your own GitLab instance', 'https://docs.gitlab.com/ee/administration/pages/', target: '_blank'}. .text-center %a.btn.cta-btn.accent{ href: "https://about.gitlab.com/direction/release/pages" } Strategy %a.btn.cta-btn.btn-white{ href: "https://docs.gitlab.com/ee/user/project/pages/", :style => "margin-left: 20px" } Documentation %section#steps.steps #step-1.step.js-step .container .step-icon-container = icon("pages/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 "/images/pages/pages-group.png", class: "img-responsive" #step-2.step.js-step .container .step-icon-container = icon("pages/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](/blog/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](https://docs.gitlab.com/ee/ci/runners/README.html#creating-and-registering-a-runner). .row.row-eq-height .col-md-6 = image_tag "/images/pages/shared-runners.png", class: "img-responsive" .col-md-6.step-content :markdown Navigate to your project's **Settings > CI/CD** and click on "Enable shared runners." This combines the power of GitLab CI/CD with GitLab Runner to deploy static sites based on any generator. On new projects this setting may be enabled by default. #step-3.step.js-step .container .step-icon-container = icon("pages/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_ is your username on GitLab and _projectname_ is the name of the project you forked in the first step. This is what we call a [project page](https://docs.gitlab.com/ee/user/project/pages/introduction.html#project-pages). .row.row-eq-height .col-md-6.col-md-push-6 = image_tag "/images/pages/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 > Advanced**, rename your project to _username_.gitlab.io and update its path to _username_.gitlab.io as shown at the screenshot. This is what we call a [user page](https://docs.gitlab.com/ee/user/project/pages/introduction.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-4.step.js-step .container .step-icon-container = icon("pages/step-4-icon", "step-icon", { label: "Manually run a pipeline" }) %span.step-number.text-center [ step 04 ] .row .col-md-10.col-md-push-1.step-content-holder %h3.step-title.text-center Manually run a pipeline .lead.text-center.step-lead-text :markdown Manually run a [pipeline](https://docs.gitlab.com/ee/ci/pipelines.html) for the first time in order to trigger the job process. Alternatively, commit & push at least one change. You can edit your site files [right from the browser](https://docs.gitlab.com/ee/user/project/repository/web_editor.html), or use Git from the command line. .row.row-eq-height .col-md-6 = image_tag "/images/pages/run-pipeline.png", class: "img-responsive" .col-md-6.step-content :markdown Visit your project's **Pipelines** and click the **Run pipeline** button. In the next page hit **Create pipeline** and the pipeline will start. %hr .row.row-eq-height .col-md-6 = image_tag "/images/pages/build.png", class: "img-responsive" .col-md-6.step-content :markdown Once the pipeline runs, the build process will begin and your site will eventually be available online. #step-5.step.js-step .container .step-icon-container = icon("pages/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](#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://docs.gitlab.com/ee/user/project/pages/getting_started_part_two.html", target: '_blank' } guide to create your project from scratch .row.js-learn-more .col-md-4.learn-about-content %a{ href: "https://gitlab.com/groups/pages", target: '_blank' } = image_tag "/images/pages/engines-pages.png", class: "img-responsive" %p.text-center Use with any static website generator. Read our %a{href: "https://docs.gitlab.com/ee/user/project/pages/#getting-started", target: '_blank'} quick start tutorials or = succeed '.' do %a{href: "https://docs.gitlab.com/ee/user/project/pages/introduction.html", target: '_blank'} browse our documentation .col-md-4.learn-about-content %a{ href: "https://docs.gitlab.com/ee/user/project/pages/introduction.html#add-a-custom-domain-to-your-pages-website", target: '_blank' } = image_tag "/images/pages/secure.png", class: "img-responsive" %p.text-center Add multiple %a{ href: "https://docs.gitlab.com/ee/user/project/pages/introduction.html#add-a-custom-domain-to-your-pages-website", target: '_blank' } custom domains and secure them with your own = succeed '.' do %a{href: "https://docs.gitlab.com/ee/user/project/pages/introduction.html#secure-your-custom-domain-website-with-tls", target: '_blank'} TLS certificates .col-md-4.learn-about-content %a{ href: "https://docs.gitlab.com/ee/user/project/pages/introduction.html#custom-error-codes-pages", target: '_blank' } = image_tag "/images/pages/404.png", class: "img-responsive" %p.text-center Create %a{ href: "https://docs.gitlab.com/ee/user/project/pages/introduction.html#custom-error-codes-pages", target: '_blank' } custom error pages. %section.white-bg .container .row .col-md-12.text-center = partial "includes/blog/try"