How to Automatically Push Reveal.js Presentations to Gitlab Pages

If you have a Reveal.js presentation it can sometimes be a pain to have to start a web server to see the presentation. However, Gitlab Pages can host static websites for you. In this guide we will see how you can quickly add your Reveal.js presentation to Gitlab pages.

To start you have to pull down the Reveal.js repo. If you don't want to keep Reaveal's history you can delete the folder .git. After deleting the git folder you can init a new git project: git init.

Now you need a Gitlab repository to push the project to. Go to www.gitlab.com and create a new repository.

After you have created you need to add the remote address to your local project:
git remote add origin git@gitlab.com:devguides/revealjs-gitlab-pages.git.
Remember to change the address to your project.

Add the files to your project:
git add .

Create a new commit:
git commit -m "Initial commit"

Push the files to your repository:
git push -u origin master

First you have to create a Gitlab CI file called .gitlab-ci.yml. The build file should have the following content:

pages:
  stage: deploy
  script:
  - mkdir .public
  - cp -r * .public
  - mv .public public
  artifacts:
    paths:
    - public
  only:
  - master

The first to lines are only names. In the script part we only use three commands. mkdir .public creates a folder called .public. cp -r * .public copies all the files into the .public folder. Lastly, we rename the file from .public to public. The important part is that the folder containing the files is named public, as Gitlab Pages will look for a folder called public to publish.

To make sure Gitlab saves the files we have to tell Gitlab to save the artifacts. In the artifacts section we tell Gitlab to save the public folder.

The last section only tells Gitlab to only build when files are commited to the master branch.

After you have pushed the code with the Gitlab CI file the Gitlab Pages should be created automatically. However, it may take some time before it will be available. The url for the pages can be found in the menu under Settings -> Pages. In my case the url looks like the following:

If you want to support this blog you can do so by signing up to DigitalOcean using this referral link