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

Add a Comment

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