From the course: Data Pipeline Automation with GitHub Actions Using R and Python

Deploying dashboard to GitHub Pages - GitHub Tutorial

From the course: Data Pipeline Automation with GitHub Actions Using R and Python

Deploying dashboard to GitHub Pages

- [Instructor] In this video, we'll learn how to deploy an HTML document, such as a dashboard or report, to GitHub Pages with GitHub actions. Building dashboards or monitoring tools is beyond the scope of this course. The goal here is to provide you with tools for deployment, HTML best monitoring tools, such as ones generated by the YData Profile or pointblank libraries that we saw in the previous video. Before diving into more details, let's explain what is GitHub Pages. GitHub Pages is a GitHub feature that enables the host of a website on any repository. It was built to support code documentation, and it's also widely used to host personal websites, blogs, dashboards, and other HTML documentation. For this demonstration, I created a simple Quarto dashboard that plots the data and presents the pipeline's logs. As before, the dashboard has both R and Python versions, but for the purpose of the demonstration, we will deploy the Python version. The deployment of the R version is identical. To deploy a website, you will need an HTML file named index.html, and therefore, we set the names of both the R and Python versions of the dashboard as index.qmd. Once the Quarto renders the QMD file, it sets the output as index.html and the output file is ready for the deployment in GitHub Pages. Before setting the dashboard, let's set the website folder. GitHub Pages website can run either from the root folder or from the docs folder. We will create a docs folder and use it for the deployment of the dashboard. After we set the folder, the last step is to define the rendering process of the dashboard during the pipeline runtime. Let's open the bash script that triggers the data pipeline and review the dashboard deployment process. Recall this bash script, data_refresh_py, is triggered by actions during the runtime of the workflow and it refresh the data and captures logs. The code in the purple box renders the dashboard whenever new updates are available. It then removes the files of the old dashboards and copies the new dashboard's files to the docs folder. This includes the index.html file and other supporting files in the index_files folder. Once we have the files in place, we can set the dashboard on the GitHub setting. On the repository main page, enter the Setting tab, then select the Pages menu on the left side, and define the branch you want to deploy and the folder of the website. In this case, we will deploy the website from the docs folder from the main branch. Once you save this process, it might take a few minutes, and then you get a URL that you can access the website.

Contents