A simple html page built with bootstrap, that dynamically displays Github related information.
Especially useful if your main project site or documentation that you want to deploy with Github Pages, isn't at the
root (/
) or /docs
path of the repository (
see here).
- dynamically retrieves and displays:
- clickable Github username
- clickable Github project name
- button with healthcheck that sends you to the main project site
Note
This method corresponds to the CDN branch.
If you want to use this landing page in your project via a CDN, follow these steps:
-
Copy the content of this index.html file from the CDN branch and place it in the root (
/
) or/docs
path of your repository. You can also create a newindex.html
in the aforementioned paths and paste the following content:<script type="module"> import {generateLandingPage, initializeDynamicContent} from 'https://cdn.jsdelivr.net/gh/bl4ckswordsman/github_landing_page@cdn/ghlp.js'; /*---Change the 'PROJECTDIR' to your project's web directory---*/ const projectDir = 'PROJECTDIR'; document.body.innerHTML = generateLandingPage(projectDir); initializeDynamicContent(projectDir); // Apply vertical centering and dark background document.body.style.display = 'flex'; document.body.style.alignItems = 'center'; document.body.style.backgroundColor = '#212529'; // bootstrap gray-900 </script>
-
Replace
'PROJECTDIR'
with the relative path to your actual site. For example, if your site is atbuild/web
, you would change it todocument.body.innerHTML = generateLandingPage('build/web')
.
That's it! The landing page will now be fetched from the CDN and displayed in your HTML file.
Note
This method corresponds to the master branch.
- Just place this index.html file at
the root (
/
) or/docs
path of your repository. - Then, in the
index.html
, changePROJECTDIR
inconst ghDotIoDir = "PROJECDIR";
to your actual site's relative path. E.g. if my site is atbuild/web
, I would change it toconst ghDotIoDir = "build/web";
There's also some placeholders that can be changed or removed, other than that, all is retrieved automatically from the actual Github URL.
Click here to see an example.