How I Used gh-pages to Deploy My Web Application to GitHub (and What I Learned About Accidentally Exposing Sensitive Data)

Deploying a Vue 3 application to GitHub Pages using the gh-pages npm package is a straightforward and powerful way to make your project live on the web. However, it’s important to be cautious about what files are included in the deployment. Here’s a recent experience I had and what I learned from it:

• Deploying with gh-pages:
  I used the gh-pages npm package to deploy my Vue 3 application. This package is great because it automates the process of building your application and pushing the contents of the dist folder to the gh-pages branch in your GitHub repository, making it accessible via GitHub Pages.

• Accidental Exposure of Sensitive Data:
  Unfortunately, I accidentally included a data file in the deployment that contained somewhat sensitive information. This file was now publicly live on the gh-pages branch in my public GitHub repository, potentially exposing the data to anyone who knew where to look.

• The Initial Panic:
  As many developers know, simply removing a file from a GitHub repository does not erase its history. This meant that even if I deleted the file from the gh-pages branch, it could still be accessed through the commit history. I feared that this mistake was irreversible and that the sensitive data could be permanently accessible.

• The Simple Solution:
  However, I discovered that there was a relatively simple solution to completely remove the data from the gh-pages branch. By deleting the remote gh-pages branch and rerunning the npm run deploy step, I was able to wipe out the branch and all files that were only committed to that branch and never merged into another branch.

• Branch Recreation:
  When I reran the npm run deploy command, the gh-pages branch was automatically recreated by the gh-pages package. The new branch had the same name but a different identifier, meaning the original branch with the sensitive data was effectively gone.

• Complete Data Removal:
  While the file could technically still be accessed through its specific commit identifier (if someone guessed it), GitHub will eventually perform garbage collection, which will completely remove the file from their servers. This gave me peace of mind that the sensitive data would not be permanently exposed.

Key Takeaways

• Be Cautious with What You Deploy: Always double-check the contents of your dist folder (or the directory you’re deploying) to ensure that no sensitive files are included.
• Deleting and Redeploying Can Help: If you accidentally deploy sensitive data, deleting the gh-pages branch and redeploying is an effective way to remove the data.
• Understanding Git’s History: Remember that Git preserves history by default, so just deleting a file doesn’t necessarily mean it’s gone. Be aware of how Git manages commit history and consider using tools like git filter-branch or BFG Repo-Cleaner for more complex cases.

Deploying to GitHub Pages is powerful, but it also comes with responsibilities. I hope my experience helps you avoid similar pitfalls and gives you confidence in managing your deployments safely.