Hovercraft in Gitlab Pages

Hovercraft is great web presentation tool.

Gitlab Pages is also great static web hoster.

Now, let’s use the both of them.

Let’s Do It!

For simplicity, we will recreate the awesome hovercraft demo.

The source file is available here.

Navigate there and put hovercraft.css, hovercraft.rst and images/hovercraft_logo.png in slides/demo/ folder.

.
+-- slides
|   +-- demo
|       +-- images
|       |   +-- hovercraft_logo.png
|       +-- hovercraft.css
|       +-- hovercraft.rst

Add hovercraft to the requirements.txt

Now let’s change the .gitlab-ci.yml

image: python:3.6

pages:
  script:
  - pip install -r requirements.txt
  - hovercraft slides/demo/hovercraft.rst public/slides/demo/
  artifacts:
    paths:
    - public/

Go to {YOUR DOMAIN}/slides/demo to view it.

You can see the demo live here.

Fix

You may notice that our presentation shortcut keyboard help is so big compared to the official demo.

That’s because the official demo hovercraft.css is strangely a little different.

Add these lines below to slides/demo/hovercraft.css

#hovercraft-help {
    background: rgba(0, 0, 0, 0.5) none repeat scroll 0 0;
    border-radius: 1em;
    bottom: 2em;
    color: #eeeeee;
    display: block;
    font-family: Verdana,Arial,Sans;
    font-size: 50%;
    left: 2em;
    padding: 1em;
    position: fixed;
    right: 0;
    text-align: center;
    width: 26em;
    z-index: 100;
}

Press F5 to force your browser to refresh all the file.

Print

Use deck2pdf to print the presentation.