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! 😉

Comments

  1. Post
    Author
  2. Post
    Author
  3. Post
    Author
  4. Post
    Author
  5. Post
    Author
  6. Post
    Author
  7. Post
    Author
  8. Post
    Author
  9. Post
    Author
    Chris Hopf

    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.

  10. Post
    Author
    HandsomePixel

    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

  11. Post
    Author
    Max le Fou

    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… 🙁

  12. Post
    Author
    Andy Troiano

    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.

  13. Post
    Author
    Holly Myers

    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

  14. Post
    Author
  15. Post
    Author
  16. Post
    Author
    Philip Rhoades P

    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 ?

  17. Post
    Author
    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 *