I'm using create-react-app to build a simple React app that utilizes props, however, the images will not load when I deployed the project to github pages, but they load just fine when I deploy the app using the npm start.
When I'm running npm start the images load just fine
But it appears like this in git pages
The images folder is located into the public directory
Then I'm adding the ./images/airbnb-grid.png path for the logo image
Am I doing something wrong in the path for images folder or it's something that im missing that Github pages need to load images?
Github repo: https://github.com/guilhermedkdk/react-mini-clone-airbnb-experiences
Github pages deployment: https://guilhermedkdk.github.io/react-mini-clone-airbnb-experiences/
I've tried different paths for the images folder, such as adding more dots ../images/airbnb-grid.png or completely removing dots /images/airbnb-grid.png
Related
I am using Deploy MkDocs action to deploy my site to github pages. After pushing my changes to my master branch the action successfully runs.
However, when I visit my project page link then my site seems to be broken. Any pointers would be of great help.
My repo structure is the following-->
The document contents are inside the "docs" directory.
When I tried to visit the site using my pages link, I can see something like this(I have checked my site locally and it renders properly on my local machine) -->
Add an index.md to the src folder e.g. When build this will produce needed index.html page. Also try to build with: mkdocs build --clean.
I am about to learn ReactJS.
I want to hide the filesystem structure of my server and only show the project root.
If i go to inspect tools in google-chrome i can see where my project is located on my C: Drive.
Wasnt able to find something about it and Ive got no Idea.
Hopefully, someone can help me.
This is because you are using your computer as a server to serve your site so the inspect tools are able to recognize the origin of the code, assets, and images.
Locally, even using gatsby develop or gatsby build (and gatsby serve) you will always be able to see the root of your project, it happens with all web development files, not only in Gatsby.
In a real scenario, where it's a server (with a domain attached, not your PC) that serves the files you will never see the origin because your site will be placed in the /public or /www of your server. To prepare your project to be deployed, you should run gatsby build command, which will create a /public folder in the root of your project with your code compiled, that folder is the one that needs to be deployed.
This is normal in development environment, for deploy your project try one of these approach in root of you project:
npm build
or
yarn build
This command build an optimized version of your project in build folder, after you can upload content of this folder to your www/plulic folder of your server,
I'm not sure if I'm using Gatsby in the right way.
I have downloaded and installed Gatsby following the tutorial here:
https://www.gatsbyjs.org/docs/
Then I have used the Gatsby Dimension starter with the command:
$gatsby new gatsby-starter-dimension https://github.com/ChangoMan/gatsby-starter-dimension
I have edited the Main.js file in src directory and used the commands gatsby build and gatsby serve.
I can see my pages on http://localhost:9000/
But if I open the index.html file in the public folder, I can only see a black page.
Which files I'm supposed to upload to S3 if I want to build a static web site?
thanks
I am following the Build an app with App Toolbox tutorial. In the Step 4 (Deploy), after calling polymer build command, the build/bundled and build/unbundled folder are created, but there are no images folder in them. This causes the tab icon not to show up when I deployed the build.
Here are some screenshots:-
In localhost development, the tab icon shows up:
I deployed the build to firebase (https://polymer-app-toolbox.firebaseapp.com/), there is no app-icon because images folder is not in the build output:
Am I missing something? Anyone else seeing the same problem?
For creating my college webpage using polymer, I have downloaded polymer starter kit 1.0.2. I have customized those html files to my desired text and it runs well when I do the below.
gulp serve
opening well is chrome through
http://localhost:3000/
The problem is, it doesn't show up when I drop files into my college server. The reason for creating a website so that it can be viewed under my name like www.college.edu/~rajesh. We have public_html folder wherein if we put html/css/js files and that is it will accessible public from above URL.
when I copied the contents of app folder along with bower_component folder
the site doesn't come up whereas it work fine locally (using localhost). Only the title gets loaded however there is NO html body visible.
I am totally new to polymer. could this be done? if yes am I missing something.
You have to run gulp serve:dist which will build/vulcanize your site. Then you need to copy app/dist folder
Just a further clarification not sure if you ran this command, according to the readme file when you want to deploy your site you need to run
gulp
which will Build and optimize the current project, ready for deployment. This includes linting as well as vulcanization, image, script, stylesheet and HTML optimization and minification.
All the files needed will then be located in the 'dist' folder.
Build and Vulcanize polymer starter kit github README.md