Luise Freese

Create a portfolio site with GitHub pages and reveal.js

In this post I want to show how you can create a simple portfolio site with GitHub pages and reveal.js

GitHub pages lets you host your website directly from the GitHub repository

But instead of having a lengthy README.md file with a lot of images in it, we want to use reveal.js to create a cool look&feel:

reveal.js is an open-source HTML presentation framework that lets you create rich, interactive slides using open web technologies.

The result should look a little something like this:

reveal animation

To go from 0 to hero, we will need to accomplish the following steps:

I will show how todo this on Windows and using Visual Studio code, if you run on a different OS or code editor, it might look a bit different, but the steps stay the same.

create a repository

  • open github.com
  • log in. If you don’t have an account, sign up, it’s free.
  • select New

  • Give it a name

  • Check Add a README file

  • Check Choose a license

  • Select a License that suits your needs

  • Select Create repository

    create new repository

Now let’s clone this repository so that we have it locally available:

  • Select Code, then copy the URL to your clipboard

  • clone repository

  • Open Visual Studio Code terminal or (I run PowerShell, your commands might look different if you run another shell)

  • Navigate to a folder where you want to clone the repository

  • Type git clone <COPIED URL GOES HERE>

  • Navigate to your new folder with cd <YOUR REPO NAME GOES IN HERE>

  • Open your project in a new VSCode instance with code . (yes, there is a between code and the .)

reveal.js

preparations

To install reveal.js, we will need to prepare our repository a bit:

  1. Create a new docs folder at the root of your (nearly) empty repository with mkdir docs
  2. Navigate to this docs folder with cd docs
  3. Create a media folder (this is where you will store all your portfolio images in) with mkdir media

installation

  1. Download the reveal.js zip file from here: reveal.js basic setup
  2. unzip the file into the docs folder of your repository

create slides

  1. open the index.html file
  2. replace the existing two sections with your content, link to images that you will store in the media folder.
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />

    <title>Demo Portfolio</title>

    <link rel="stylesheet" href="dist/reset.css" />
    <link rel="stylesheet" href="dist/reveal.css" />
    <link rel="stylesheet" href="dist/theme/black.css" />

    <!-* Theme used for syntax highlighted code -->
    <link rel="stylesheet" href="plugin/highlight/monokai.css" />
  </head>
  <body>
    <div class="reveal">
      <div class="slides">
        <section>Unicorn slide<img src="media/unicorn.png" /></section>
        <section>Cupcake slide <img scr =media/cupcake.png"></section>
      </div>
    </div>

    <script src="dist/reveal.js"></script>
    <script src="plugin/notes/notes.js"></script>
    <script src="plugin/markdown/markdown.js"></script>
    <script src="plugin/highlight/highlight.js"></script>
    <script>
      // More info about initialization & config:
      // * https://revealjs.com/initialization/
      // * https://revealjs.com/config/
      Reveal.initialize({
        hash: true,

        // Learn about plugins: https://revealjs.com/plugins/
        plugins: [RevealMarkdown, RevealHighlight, RevealNotes],
      });
    </script>
  </body>
</html>

create GitHub pages

We will now create the GitHub page

  • open your GitHub repository again
  • Select Settings
  • Select Pages
  • Select main as Branch
  • Select /docs as folder
  • Select Save

Now let’s publish :-)

In terminal, type

  • git add . to add all changes to your staging area
  • git commit -m "<YOUR COMMIT MESSAGE HERE>"
  • git push

If you work on Windows, it might be that you see warnings for all files:

The file will have its original line endings in your working directory warning: LF will be replaced by CRLF in reveal.js-master/test/test.html.

The end of a line in a unix system represented with a line feed (LF), while on windows a line ends with a carriage return (CR) and a line feed (LF) => (CRLF). We get this warning on Windows when the file was originally uploaded from a unix system. What to do about it?

You can either decide to not care (everything should be working fine, just those warning can be a little annoying), you can read more about line endings and in case you are really the only developer working on these files, you can change settings with git config core.autocrlf true.

Now check again the GitHub Pages site - it should confirm:

GitHub-pages confirmation

If you now select the link, you should see your GitHub pages site!

How to continue:

I hope you liked this little tutorial!

About Me Author

My name is

Luise Freese

Azure & Power Platform Architect, Microsoft MVP for M365 development and Business Applications and member of M365 PnP team, based in Germany. I’m into open-source, Lego, and running. My favorite number is 42 🤓.
Recent Post
Categories
Tags
LINKS

You May Also Like

Want to work with me?