How to Publish a Website with GitLab Pages

How to Publish a Website with GitLab Pages


Hello, I’m Marcia and today I’m gonna
show you how publish a website with GitLab Pages on GitLab.com. In the first part of this video, I’ll fork
a repo and make it a project website. In the second part, I will show you how to
make it a user or a group website. Let’s choose one of the default templates
available from the Pages Group. I’m gonna choose Jekyll and fork it to my
group “GitLab Pages Demos”. Once we forked, the first thing to do is removing the fork
relationship, as it has the purpose of contributing to upstream projects, and won’t be useful
for our regular website. Now, let’s enable Shared Runners to our
fork, so we’ll be able to build our website with GitLab CI. Cool! Now let’s edit a file to trigger a build. I’m gonna go ahead and make a silly modification
to my README file. Alright, now let’s see our build running
under our project’s pipelines. Cool! There we go! It’s important to see our builds running
from time to time, as it makes debugging stuff much easier. Once our build passes, let’s navigate to
our Pages settings. And there it is, our website URL. TA-DA! Our website is live! Now let’s jump to PART 2 and make it a user
or a group website. There are just two things we need to do to
make it happen. The first one is renaming our repository to
“namespace.gitlab.io”, where “namespace” is your username or your group name. To do that, let’s edit our project’s settings
and scroll down to “Rename repository”. To make sure I’m not misspelling my group
name, which is “gitlab-pages-demos”, I’m gonna copy and paste it into the “Path”
field, and complete it with “gitlab.io”. Then I can name the project itself independently. Alright, let’s see what happened to our
Pages settings. Good. Our URL has been updated. Let’s take a look at our site. There it is, but the CSS link “is gone”. The old URL now gives us a 404, as expected. Now let’s fix our CSS link, which is the
last thing we need to do here. To do that, we need to adjust our website’s
baseurl. We just need to remove it, so all the relative
paths point directly to our domain, not to a subdirectory of it. Okay. Now let’s wait for our build to complete,
and we’ll be all good! 🙂 There we go! Let’s refresh our “ugly page” and… TA-DA! Alright, that’s it! See you next time! 😉

17 comments

  • Sebastian Limbach

    This new update is so awesome! Good job

  • is this only applicable if your repository is on rails or ruby?

  • James Omorodion

    Is there a video on figuring the gitlab-ci yaml for an angular js project?

  • do this only work if public

  • Is it possible to have a private website like a private repository ?

  • Thanks so much

  • Vladimir Pavlychev

    Is this video actually now? I see, that UI was changed or maybe I'm wrong?

  • Jefferson Quesado

    Those "tadas" are the best part of the video! LOL

  • No responses to questions, and the video has not been updated to show the steps with their current layout. I'm pretty sure these guys aren't ready for the github migration.

  • For those that are trying to move their GitHub Pages to GitLab, after importing said project over to GitLab, you have to rename your project from whateverusername.github.io to yourgitlabusernamethatiscompletelylowercase.gitlab.io, and after that your project needs to contain a .gitlab-ci.yaml file
    More information for those that create their own custom pages is here: https://docs.gitlab.com/ee/user/project/pages/getting_started_part_two.html#create-a-project-from-scratch

  • Is forking completely mandatory? I'm pulling my hair trying to make it work on mine and I can't figure it out and this video doens't help much… 🙁

  • My favorite how-to videos are ones where you fork all the code and get 0 explanation of what to actually do. 0/10 would not waste your time.

  • Umm I didnt find this video to be helpful rather https://www.youtube.com/watch?v=cERdbQ-GgOo was what I was looking for which provides a really basic example of a static site and configuring the config file required by the runner to build and deploy the site. Also I copied the config file from here: https://about.gitlab.com/2016/04/07/gitlab-pages-setup/#add-gitlab-ci

  • The video contained some valuable information. But the presentation was way too fast to follow.

  • what are you smoking ??? your tutorial is not understandable at all !! go to hell.

  • Thanks for this example – it is just what I need! I still have a question though: to get the CSS to work I have to change the path to the root of my GitLab site (https://philip_rhoades.gitlab.io) – and that works – but then I can only use this method once! How do I allow the CSS to keep working but still have more than one page available eg: https://philip_rhoades.gitlab.io/aaa , https://philip_rhoades.gitlab.io/bbb etc ?

  • Charles Tersteeg

    why fork when there is a new project button and template option? it seems confusing. the ui layout on gitlab is different from the video. conclusion, the video is outdated and no longer of any use, unless the objective is to confuse.

Leave a Reply

Your email address will not be published. Required fields are marked *