Securing API credentials when deploying to GitHub Pages

I’m building a dashboard that uses several APIs to show off my skills. But I’m not sure how to keep the API keys safe when I put the project on GitHub Pages. I’ve heard about using the terminal to make a new file, but I’m not great with command-line stuff. Are there other options?

I’m also curious about what could happen if I don’t hide the keys. Will people still be able to see my code if I share it?

Update: Thanks for all the helpful advice! Here’s my new plan:

  1. I’ve already made new API keys and haven’t put them on GitHub.
  2. I’ll use GitHub secrets to keep the page working and secure when I share it.
  3. I might try Netlify too, since many people suggested it.
  4. I’ll also make a version using PHPmyAdmin to store and get the keys with PHP.

I’m still learning about servers and hosting, so I’m not sure how to use PHP outside of XAMPP. Any tips on my plan would be great!

Securing API keys is crucial when deploying to GitHub Pages. While GitHub secrets are a good option, they’re not directly usable with static sites like GitHub Pages. For your situation, I’d recommend using environment variables with a serverless function service like Netlify Functions or Vercel Serverless Functions. These allow you to securely store your API keys and make API calls server-side, keeping your credentials hidden.

Another approach is to create a small backend service (maybe using Node.js and Express) that handles API calls and deploys it to a platform like Heroku. Your frontend on GitHub Pages would then communicate with this backend, keeping your API keys secure.

Regarding your PHP plan, while it’s a good learning exercise, it might be challenging to implement with GitHub Pages as it doesn’t support server-side languages. You’d need to host it elsewhere. Consider exploring more modern alternatives that align better with your current stack and deployment strategy.

As someone who’s been in your shoes, I can tell you that securing API keys is a crucial step in web development. I’ve learned the hard way that exposing keys can lead to unauthorized usage and potential billing nightmares.

For your situation, I’d strongly recommend looking into services like Netlify or Vercel. They offer easy deployment options and built-in ways to handle environment variables securely. I’ve used Netlify for several projects, and it’s been a game-changer for managing API keys without the hassle of setting up a separate backend.

Regarding your PHP idea, while it’s good for learning, it might be overkill for this project. If you’re set on using PHP, you’ll need to find a hosting provider that supports it, as GitHub Pages won’t run server-side code.

Remember, the goal is to keep your keys off GitHub entirely. Even if you delete them later, they can still be found in the commit history. Stay vigilant and happy coding!

hey dude, securing api keys is super important! i’ve been there too. instead of github pages, try netlify or vercel. they make it easy to handle env variables safely. plus, you can deploy static sites and serverless functions all in one place. it’s way simpler than setting up a whole backend just for api keys. good luck with your project!