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:
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 email@example.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:
- mkdir .public
- cp -r * .public
- mv .public public
The first to lines are only names. In the
script part we only use three commands.
mkdir .public creates a folder called
cp -r * .public copies all the files into the
.public folder. Lastly, we rename the file from
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