0

new to programming and I wanted to post my portfolio site on github. My index pages shows up but some of pictures and all of my scss files wont show up. Any help would be greatly appreciated.

Here's a link to the repo https://github.com/ELeonJohnson/ELeonJohnson.github.io

Enoch Johnson
  • 37
  • 7

1 Answers1

1

You have to compile your .scss files and refer only the .css files in your index.html because browser doesn't understand scss.

If you have installed sass by running,
sass --watch _main.scss:main.css
You can get the compiled css version. For more information refer to the documentation of sass

In your case parcel.js have bundled your project into dist folder. For github pages you only need the content inside this dist folder. You can remove all the source code other than which is in the dist folder and move all the things inside dist into your root folder ELeonJohnson.github.io

Senal
  • 1,510
  • 1
  • 14
  • 22
  • Thank you for the reply. I installed sass by running npm install node-sass using parcel.js. Would that still work? – Enoch Johnson May 07 '18 at 03:31
  • Since you have bundled your project using parcel.js the output `index.html` is in your dist folder. So you have to take all the content inside dist folder and put it at the root folder **ELeonJohnson.github.io**. Actually you only need things inside the dist folder. – Senal May 07 '18 at 03:50
  • Ahh, ok. So I should go to the folder on my computer. Copy everything in the dist folder and paste it in the root folder. Then push changes to github? – Enoch Johnson May 07 '18 at 03:55
  • Okay, will try. Thanks a lot. Getting git errors right now when I try to push changes so I will have to work on that first. – Enoch Johnson May 07 '18 at 04:08
  • I'm still getting a Failed to load resource: the server responded with a status of 404() – Enoch Johnson May 07 '18 at 04:24
  • Try changing your script tag at the line 61 in your html to this `` it's because the script file names have changed but the index.html hasn't updated some how – Senal May 07 '18 at 05:43
  • You haven't moved your content in the dist folder properly, I checked one of your old commits and it has correct references to the renamed files. [old index.html in dist](https://github.com/ELeonJohnson/ELeonJohnson.github.io/blob/ca0134b074c5e99733ce393b52a16b0a9ec68880/dist/index.html) before moving things. – Senal May 07 '18 at 05:48
  • How do you move the content properly. Sorry about all the questions, still have a lot to learn. – Enoch Johnson May 07 '18 at 06:27
  • First copy your source code to another folder. Then delete everything from your root folder. Now commit that change. Then delete the dist folder from the copied source code and generate a new dist folder. And copy that content inside that dist to your root and commit the changes and push your code – Senal May 07 '18 at 06:34
  • Keep the source code in the files or copy and paste them in notepad or something like that? Also, does a dist folder automatically gets created? Or is there a step to do that? – Enoch Johnson May 07 '18 at 06:41
  • nvm, i see i have to run npm. Will try this now – Enoch Johnson May 07 '18 at 06:44
  • `npm run watch` this will generate the dist folder – Senal May 07 '18 at 06:54
  • Okay, got the new content in the dist folder. Do I delete everything in my root folder right now. And copy whats in the dist folder to the root? Also, do I have to delete the content in the dist folder after or just leave the content both in the root and dist folder – Enoch Johnson May 07 '18 at 06:58
  • Yes remove everything and copy what's inside the dist. It's okay to keep other files but it's slow the page download. – Senal May 07 '18 at 06:59
  • Github is giving me a 404 page not found error now. – Enoch Johnson May 07 '18 at 07:10
  • Does it show you the html and css? I'm getting a 404 error. It won't even load html files for me. – Enoch Johnson May 07 '18 at 07:15
  • I did, for some reason im getting this error: The site configured at this address does not contain the requested file. If this is your site, make sure that the filename case matches the URL. For root URLs (like http://example.com/) you must provide an index.html file. – Enoch Johnson May 07 '18 at 07:19
  • It should be *https://username.github.io* , for me your page is working with css without any issue. **eleonjohnson** <- username. Refer to this https://pages.github.com/ – Senal May 07 '18 at 07:24
  • I have to put two slashes at the end of the url to get it to work for me. You don't know how much I appreciate your help and patience. Thanks a lot – Enoch Johnson May 07 '18 at 07:37
  • Ahh, one more thing, If I would like to change the page in anyway, I would only have to push changes correct? Or do I have to delete root content and generate another dist folder etc etc? – Enoch Johnson May 07 '18 at 07:38
  • If you have change anything there will be new content in dist so you have to replace your new dist with the old and push it. – Senal May 07 '18 at 07:58