I'm a complete beginner to web development and am trying to deploy my first site via Netlify. Despite my site working fine when being displayed from my local machine, I'm given the following error when navigating to my site's URL:
Page Not FoundLooks like you've followed a broken link or entered a URL that doesn't exist on this site.Back to our site
Since my page is functional on my local machine, I believe the error lies within my Github repo and/or my deploy settings. Here's my repo:
https://github.com/Cotton0419/TestSite
And my deploy settings:
Repository: github.com/Cotton0419/TestSite
Base directory: acme
Build command: Not set
Publish directory: acme/disp
Deploy log visibility: Logs are public
Any help would be greatly appreciated, I can supplement more information if need be.
The Base directory on Netlify is only used by the build environment for a reference to your code base (defaults to root of the repository if not given).
The Publish directory would be relative to the base directory. So in your case disp or acme/disp if using the default.
You are referencing assets in a location that does not exist in your published paths, so they would not exist in your deploy to the CDN.
<link rel="stylesheet" href="../css/style.css">
You should move your assets into your deploy disp folder and edit the correct paths into your code files.
Similar problem I encountered today. I decided to upload an old portfolio I had made a while back. Then for some reason after running the URL on Netlify, nothing happened. The only thing that showed up was a prompt similar to yours -
Page Not Found
Looks like you've followed a broken link or entered a URL that doesn't exist on this site.
Back to our site
After revisiting the HTML and CSS files, I realized that I had set the title for my HTML file to porfolio.html instead of index.html which solved my problem!
For this kind of error please kindly check the HTML filename change it into index.html it worked for me!
Related
I am working on the odin project and make my first html project, the first recipe project.
I have now finished it and upload it to my repo on github. If I want to see it with live preview the index.html page is working well. But if I click on a link at the index page it does not working.
Can u check my html file?
Or is it maybe that I have make failure with github workflow. I have changed/finished my coding on MS VisualStudio and then add the following statements in the terminal:
git add .
git commit -m "something"
git push origin main
My Repo:
https://github.com/ztrk-dev/odin-recipes/tree/main/recipes
You are hosting what Github Pages refers to as a Project site, which means the page is being hosted at "username.github.io/repository".
The reason the pages with images aren't loading as expected(if I'm misunderstanding the question let me know) is because they are linked as /images/spaghetti-napoli.jpeg, which is a relative file path for the file spaghetti-napoli.jpeg that is located in a folder "images" located in the root directory. The problem is that the root directory / isn't the base directory of your project site. /{repo-name}/ is (so that you could have many different projects with their own websites if you wanted to).
If you want the repository to be the root of your site, you'd need a User site, which would require a repository named ztrk-dev.github.io to host the projects files. If you'd rather use a project site, you would need to link the images as /{repo-name}/{path-to-file} instead of /{path-to-file}.
That is to say, /images/spaghetti-napoli.jpeg would become
/odin-recipes/images/spaghetti-napoli.jpeg or ../images/spaghetti-napoli.jpeg
Hey I have a quick question. When I pushed my repository to git it no longer connects my html documents to my style sheet or corresponding images. When I open the html files from vscode in chrome it works perfectly, but as soon as I pushed it to github and deployed it, it only shows the html. Is there a way I need to change my pathing so that it will work on pages?
For example:
<link rel="stylesheet" href="/CSS/style.css">
or
<img id="frogicon"src="/Images/frogiconpure.jpg" alt="frog icon">
Yeah this is a frustrating issue for me as well. The solution I use relies on running a local NodeJS server during development, which has code to redirect requests starting with /${projectName}/. I then set up all of my URLs for internal assets to work in the GitHub Pages context.
I have a template repo in GitHub that I use as a base for my new projects, which uses this approach. Here's a link to the appropriate section of the Readme: GitHub Pages
This approach works without any extra bits on GitHub Pages, but for it to work with local development it relies on two parts:
A local server that redirects URLs starting with /${projectName}/ to the root-relative paths needed for local development (server code).
An environment variable configuring the name of my project (the .env file in my setup)
If running a local NodeJS server isn't something that works for your project, there may be other ways in your environment to do the same sort of redirection. And if you're only worried about the single project, then you could hard-code the name of your project instead of having it configured as an environment variable.
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 currently have the following Git Repository:
https://github.com/SebastianGode/ansible-collection-cloud/tree/gh-pages
And the GitHub Page link:
https://sebastiangode.github.io/ansible-collection-cloud/
The problem is that GitHub Pages will only solve the index.html and will throw an 404 for all required css and image stuff:
As the documentation is getting automatically generated by a travis-ci pipeline it's probably impossible to change paths, but as it works when hosted it locally it also should work on GitHub pages.
Is there any solution to this problem?
I fixed it.
GitHub has Jekyll running behind it which will mess up special paths (here the underscore paths). You can disable jekyll by just creating a .nojekyll file in the root directory of the branch. If you use travis-CI for something like that and run a tox script just call the command touch {toxinidir}/.nojekyll
This will result in a working website for me.
I'm using create-react-app which is serving its files from the /build folder. Typically Github Pages looks at index.html at the root level, but I'd like to direct it to look at /build for deployment.
I've tried to add "homepage": "/build" inside my package.json configuration, and Github Settings says it's deployed via <username>.github.io. However, the site just shows my README.md file.
Any help is appreciated :)
The problem here is that this is a Web Browser issue, and not a Host issue. When you visit a webpage your browser always looks for the index.html file at the URL so localhost:8080 becomes localhost:8080/index.html.
This means that there are a couple ways to fix this. You could create an index.html file in your root directory and then have that serve up the scripts in the build folder like <script src="build/main.js"></script>
You could also go through the pain and suffering of manually adding /build to the end of the URL. But you don't want users to have to do that, so you could write a script to redirect you there.
Good luck!