Static UI5 on GitHub Pages – Favorites App

I saw a github.io URL. I got curious, what is github.io ? This is actually an alias to GitHub Pages. So does it mean We can create web pages using GitHub already ? Yesss, we can . It is extremely simple! Checkout this quick start guide, which explains you in few simple steps, how to let GitHub host You a static webpage using HTML, CSS and JavaScript. You can upload files, create them manually or push the page sources to a GitHub repository, which is then served as a page. Why not to play a bit with UI5 and create a page with my Favorite URLs used during development ? You can copy the sample app and make Your own favorites pages on GitHub.

Watch the Live Site/ Demo .

I created a simple page app in VSCode showing tiles and links, stored in a JSON file. I uploaded the build to GitHub. I wanted to see whether this is really so simple to make it working on GitHub ?

Actually Yes, just few clicks to publish Your repository as a site.

As result your page URL consists of your GitHub name as subdomain on github.io + your repository ID. So the favorites page is available at https://attilaberencsi.github.io/favorites2/ .

Table of Contents

Features

  • You can define Tile Groups with a Title, which are rendered below each other
  • You can set the Group collapsed/expanded by default
  • You can define Tiles with Icons inside the Group
  • You can define Quicklinks without icons
  • Search capability, filters Groups and Tiles by Title and Subtitle
  • Theme Switcher: Dark / Light

Installation

  • create your own GitHub repository and upload the content of the uimodule/dist folder of this repository
  • adjust the model/favorites.json with your favorite links
  • Expose Your repository on GitHub pages

If you want to get out more from the favorites page, You can read the build instructions from the readme.

Related Posts