Issues with transferring CodePen to Github

I export the CodePen files to my desktop (via zip), open the folder (EDIT: ie. unzipping it), then upload them to the GitHub repository; however, it doesn’t seem to be working at all.

Here’s a link to the CodePen (it works)

I’m quite new to all of this and I’m just working on a “little” summer project to see what I can accomplish—so I apologize if I ask silly questions.

I’ve been trying to test it out on two repositories, the first one just contains the CodePen files (if you look at my profile, it’s called test), and the second one (link to actual repository) is more similar to what I want to accomplish, with the CodePen “customer service” chatbot in the corner of the website… I’m still working things out with the site so I know it’s ugly atm.

Am I doing something wrong when uploading the files or am I missing something? Is there a better way to go about doing what I want to achieve?

I pulled an all-nighter last night trying to figure this out before passing out at 7am finally… but I feel completely stuck :sweat_smile:

I would really appreciate some help!

I can only post two links as a new user but let me know if you need more info! :blush:

EDIT 2: I forgot to add a “first”

What isn’t working?

GitHub is just a file host for Git repos. It isn’t a web server. You can use GitHub pages, or Netlify, for static site hosting.

1 Like

I guess I should’ve been more specific, sorry. I am currently using GitHub Pages, and when I upload the CodePen files to the repository, the CodePen files don’t seem to be appearing on the site (please let me know if that doesn’t make sense :sweat_smile:).

See the repository versus the site … but on CodePen it works.

You need to use the dist folder.

I would personally suggest using Netlify instead. It is much easier to use.

1 Like

Thank you! I will try only uploading the dist folder, not the src folder and let you know if I continue having issues :blush:. Also, thank you for the tip as well—I am quite new to all of this so everything and anything is appreciated :slight_smile:

If you want the source and build to live inside the same repo most people use a gh-pages branch for the build and tell GitHub Pages to use that branch for the site. You can try creating a new branch that only contains the dist folder content and then if you look at the image you posted there is a dropdown where you can change to that branch.

I don’t really use GitHub pages very often, it isn’t very user-friendly. I’m almost positive it is intentionally kept like that to avoid it getting used by more people (static web serving isn’t as cheap if you have a million users).

1 Like

I agree, it’s not very user-friendly—especially for first-time users like me!

Now I’m trying to make it so that the “customer support” chatbot (ie. the content in the dist folder) is on the same page as the homepage.
Currently, my repo looks like this:

However, the contents within the dist folder (i.e., the chatbot) aren’t appearing on the webpage, only the actual webpage is showing (i.e. the index.html file in the photo above). Here is the site where you can see that the contents within the dist folder (i.e., the chatbot) aren’t appearing.

Within this repo (mindsupportai) I also tried uploading just the contents of the dist folder separately/individually (i.e., not being contained within the dist folder) which worked for the ‘test’ repository, (thank you again, by the way!) but not in this repo—the index.html file in the mindsupportai repo for the webpage is replaced with the CodePen/dist folder index.html file.

In order to have them both on the same page, should I merge the .html files? Or if rename the index.html file for the chatbot (the index.html file within the dist folder) to something like bot.html would both .html files be on the same page?

Again, I apologize if I’m asking dumb questions :sweat_smile:

I figured it out!

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.