I've a trouble after publishing my portfolio website online into the Github pages.
Before the published it works just fine but when I publish this and then I want to update some data into website I see all the website visual-effect fully spoiled.
I also create another folder and bring the all files and code into new folder but it also looks like the same.
local host:3000
error into the "console" localhost broken img-1, fully broken styles and fonts.
Error while trying to use the following icon from the Manifest: http://localhost:3000/portfolio/logo192.png (Download error or resource isn't a valid image)
Here the published website link here it looks like fine into github how that should be look like
Source code
on github
I rechecked my code and remove the styles.css from public folder and also delete the link of css in html.
And import it into "index.js" and works just fine.
Related
o I am brand new to Github, and frankly to programming in general. I created my own portfolio website (following a Youtube guide) and have been facing so many issues trying to understand terminals and then getting it up on Github, but I must learn Github so it's worth learning it even though there are other options to post your websites onto. But after getting everything on my repositories, everything looks normal when I look at the code but when I open my website hosted on GitHub called tyler-104.GitHub.io (my portfolio website), all my images that are local to my computer won't display.
My images that aren't local are displaying ( I have one for github and one for LinkedIn) and work as they should. I thought that I simply only had to upload my local images that are also inside my HTML code to my repositories would solve it, but it does not.
If you look at my site
(tyler-104.github.io)
none of the bigger images are being displayed even after uploading my local files to my repository (https://github.com/Tyler-104/tyler-104.github.io). More than that I have tried and created multiple repositories, uploaded, altered, and updated but nothing seems to work. My only guess is that since they are local they won't display.
Do you need to somehow use images that are already stored online to make it work? Basically, would I have to remove my locally stored images (that are on my Desktop for example) in my HTML and use internet links that I want to display on some sites like Unsplash? Or can I use local images stored images and they will still be displayed?
The console of the developer mode is full of 404 for URLs like:
GET https://tyler-104.github.io/img/3D/Grapes.webp: 404
^^^^^ ?
But your repository does not have a img folder. It directly has 3D/Grapes.webp.
So might need to create img, and git mv 3D img/ in it (the commit and push), to test if those images are displayed.
I have many images and audios in my react project using create-react-app and thus Im using the public folder to use the images in my components. Yesterday night all the images where displayed correctly, and even displayed in github pages worked. But it just stopped working locally today. Ive tried updating packages, checking out in git to see if the problem were not there in previous commits, but none of that worked. Idk if it has something to do with npm packages or if you have encountered this problem before. Thank yoou
I just pushed to github the code and the images look good
and with the same code in localhost
The images are downloaded properly in localhost but it says type text/html instead of the extension of the image
Edit
It turns that the homepage attribute of the package.json changed the path of the localhost, although it rendered without that path, ant thus all the previous paths got messed up, use process.env.PUBLIC_URL to prevent this type of errors if using public folder
I'm trying to run the google editor demo on my local machine to see if I can use it in my project.
https://google.github.io/closure-library/source/closure/goog/demos/editor/editor.html
I've downloaded the latest stable source code:
https://github.com/google/closure-library/releases
Unzipped the source code on my local machine and went to folder closure\goog\demos\editor
And Opened editor.html without changing any source code.
I get an incomplete editor with no buttons and not working as per the demo on github, maybe I'm missing something.
This is a node.js project and not a single HTML page.
You should follow the official tutorial to use it.
I have a repository on GitHub which has various folders and files.
But when I click at the published site link, the site doesn't work. It doesn't open.
I thought this had something to do with the extensions of my files imported from Javascript that used "./" extension from the base folder up to the file to be chosen. I did this for all the imported files. But the site doesn't open and a page showing the Readme text shows upon clicking the URL.
What do you think might be the problem?
Below is part of the code and how I referenced to the files.
import Layout from './src/components/Layout';
import Container from './src/components/Container';
import Map from './src/components/Map';
I have these two files on my server:
/react/build/static/js/stats.js
and
/react/build/static/js/main.5c7483.js
In the stats.js file, it has this line at the bottom:
//# sourceMappingURL=main.8c33616f.js.map (I noticed the filename does not match)
The react app works fine, but I want to make some small changes. However, the developer has told me they completely lost the original source files due to a hard drive failure.
Is it possible to recover source files (or even anything that resembles source code?) I found this debundle package but couldn't get the configuration to work properly.
They told me the project was created using create-react-app.
In chrome dev tools, it says "Source Map Detected" - but using ctrl+p does not show any components. Just a few random js files like page.js, inject.js, common.js, etc
Well, this answer is late but just in case other people come here looking for answers (like me), here's how I solved it:
If you're lucky and the developers generated and uploaded the source maps then you shouldn't have any issue accessing the source codes.
I am not allowed to embed images yet so you may have to use the image links provided to see sample images.
Using Chrome(or any modern browser), browse to the website where the react app is hosted. Right-click anywhere on the page and select Inspect. Ctrl+Shift+I works too.
This will open up the dev tools window. Select the Sources tab.
Image showing the inspector tabs with the Sources option highlighted
Depending on the website's dependencies, you'll probably see several folders here. The first folder will be titled similar to the name of the website's URL. Open that up, that's where the sources for your website is located. Opening that folder will show yet another list of folders (assets, static, modules, react-components, src).
At this point, you may think your source codes are inside the src folder but that's not where yours are. To find yours, open up the static folder.
Selecting the static folder
This folder has three inner folders: css, js and node_modules. Your JS source files are inside the js folder so that's where to look for your source codes.
Image showing the expanded js folder
So that's it. I hope this helps. It definitely did help me when I needed it!