Trying to deploy first website and running into some issues

Hi there! I am currently trying to finish up a project I have been working on for a while. I am making a game from HTML, CSS, and JavaScript. Over this winter break, I have completed the Learn Node Js course and have just finished the webpack lesson in the Learn Build Tools course (both on codecademy). I still don’t really understand node js that well and need to refer to the course when using webpack, but it was enough for me to bundle this game project I have been working on. I now think it is finally ready to put on the world wide web, and I am interested in using google sites to do this. I tried using GitHub pages to get the website running, and then use the embedded code feature to put it on the google site. However, I ran into a bunch of CSP related issues (Content Security Policy). This has happened on one of the codecademy projects in the build tools course, and it was never addressed on how to fix it. At that point I just loaded it locally by running the index.html file and that worked at the time. However, I run into CSP issues when running it locally as well. I don’t really know much about CSP, and I don’t even know where to begin regarding how to fix the issue. I am more confused after research about CSP compared to before. I will link my GitHub repositories (the one named Shape Fight is the original source code and the other is being used for GitHub pages) below because the project is quite large and this would be a very large post if I included all the source files. However, I think it would be helpful if I put the html file as I learned something about using the <meta> tag to fix CSP related issues. Any help will be greatly appreciated and thank you so much for reading!


<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="">
    <link rel="preconnect" href="" crossorigin> 
    <link href=' Start 2P' rel='stylesheet'>
    <script type="module" defer src="../Final/main.js"></script>
    <title>Shape Fight!</title>
    <div id="play-screen" style="display: block;">
        <button id="play-btn">PLAY</button>

    <div id="start-screen" style="display: none">
        <h1 id="title">SHAPE FIGHT</h1>
        <h2 id="score-display"></h2>
        <button id="start-button" class="btn">Start</button>
        <button id="how-to-play" class="btn">How To Play</button>
        <button id="credits-btn" class="btn">Credits</button>

        <p id="high-score">Score: 0</p>

    <div id="instructions" style="display: none">
        <p id="text-instructions">
            Hello Player! <br><br>

            In this game, you control a triangular ship that moves around and shoots enemy shapes. <br><br>
            Your objective is to last as long as you can by killing as many enemy shapes as you can without getting <br><br> shot 3 times. <br><br><br>
            - Use your mouse to point the ship in a given direction <br><br>
            - Use W to move foward <br><br>
            - Left click to shoot <br><br>
            - Space bar to move the shield to where ship is looking <br><br> &#40;teleports or kills enemies on contact&#41; <br><br><br>

            Good luck out there! Over and out.
        <button id="back-btn" class="btn">Back</button>

    <div id="credits-screen" style="display: none">
        <p id="credits-txt">
            Special thanks to Oliver Campbell for some of the music and sound effects!
            Created by Yash Vihan Gupta
        <button id="credits-back-btn" class="btn">Back</button>

    <canvas id="gameCanvas" style="display: none"></canvas>

GitHub Pages Repository
Original Shape Fight Repository

I noticed your repo is called which would mean your pages url would be, but github redirects you to this url . Was there a reason you named the repo to end in I would try renaming it.

I only ran into CSP when I started backend. I wouldn’t think your issue with deploying github pages is CSP related, but this may be over my head. Just thought I’d share what i noticed.

Good Luck!

Content Security Policy refers to what website allows the browser to load. In this case it’s not allowing your code to be run on a Google site from an external source.

I’m not familiar with Google sites and if you are able to change the CSP, it seems like that would be important to prevent abuse of their service.

BTW, if you rename shape.html to index.html then the URL will work. For now you need to visit Shape Fight!

Hi there! Thank you very much for the response. The reason I named it that was because according to the GitHub Pages website, they instruct you to name your repository that in order to deploy the website. I think the followed the instructions correctly, but I might be very wrong!

Hi @jameskeezer! I really appreciate the response. Renaming it has done the trick, and I was able to use the URL feature in google sites to embed the code onto the site. However, I wanted to ask why this works. Is it because it is standard practice to name your html file index.html, or is it for another reason?

My pleasure!

Generally, browsers look for and show index.html when a URL is requested.

1 Like