Move your GitHub page to GitLab Pages

4 Jul

If you are looking to move your website from GitHub Pages to GitLab Pages (and stick to Jekyll), here are the few steps you need to follow. Most of it is pretty straight-forward, but I thought I’d list the details and a couple more infos here.

Import your project

First, you need to import your repository from GitHub to GitLab. From the gitlab.com, you can do: + > New project > Import project > GitHub

Check the project settings

In your imported repository, check that Shared Runners are enabled (Settings > CI / CD > Runners settings)

Create a config file

From the online interface, create a .gitlab-ci.yml config file in your repo’s top directory to specify how the CI should test and build the page.
This code should be enough to start with:

image: ruby:2.3

variables:
 JEKYLL_ENV: production

before_script:
  - bundle install

test:
  stage: test
  script:
  - bundle exec jekyll build -d test
  artifacts:
    paths:
    - test
  except:
  - master

pages:
  stage: deploy
  script:
  - bundle exec jekyll build -d public
  artifacts:
    paths:
    - public
  only:
  - master

Change your URLs

Change your repository name to repo-owner-name.gitlab.io in both your project name and your path. (Settings > General > Advanced settings > Rename repository; make sure you replace “repo-owner-name” by your own.)

Change your remote in your local copy of the repository. This is probably what you want:

 git remote rm origin
 git remote add origin
 git push --set-upstream origin master

Remember to update your URL in your _config.yml file so your Liquid output markup that makes use of it works as expected.

And of course, remember to update your URL outside of your website too! (i.e. old website, other projects, other websites, social media profiles and pages…)

To redirect your old Github Page, you can use the jekyll-redirect-from plugin that’s already included in the Github Pages gems.

First, add this line to your _config.yml file to activate the plugin:

plugins:
  - jekyll-redirect-from

… and you can now add an extra redirect_to line in your pages. For example, in your index.html header:

---
layout: default
redirect_to:
  <span id="mce_SELREST_start" style="overflow:hidden;line-height:0;"></span>- http://studio-dessai.gitlab.io/
---

You can also add those two lines of HTML in your default head.html header, so all the pages that use it automatically use the new location (and so search engines take that into account):


			

(this was hinted by this StackOverflow answer.)

Troubleshooting

If you get a message from GitLab telling you that “Your pipeline has failed”, with an error message along those lines:

Conversion error: Jekyll::Converters::Scss encountered an error while converting 'assets/css/style.scss':
 Invalid US-ASCII character "\xE2" on line 5
jekyll 3.7.3 | Error: Invalid US-ASCII character "\xE2" on line 5
ERROR: Job failed: exit code 1

… but you can build your Jekyll site locally, it probably means that there is an issue with the language settings used in GitLab’s Docker.
You can try adding the following extra variables in your .gitlab-ci.yml file:

variables:
  LC_ALL: "C.UTF-8"
  LANG: "en_US.UTF-8"
  LANGUAGE: "en_US.UTF-8"

(This was hinted from this Jekyll issue thread.)

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: