After finishing my website locally using HTML5, SASS (Koala for compiling) and a bit of jQuery, I uploaded it to GitHub and hosted it on git pages. Everything works flawlessly except that my background images are not showing up. Using the 'Inspect element' I found out that deleting one '../' from the URL specified for the img file background-image: URL("../../img/background.jpg"), solves the problem and the background image is shown.
The thing that confuses me is that I uploaded the structure from my PC straight to Github without modifying anything. Plus, I checked the structure of the project in my repo and it doesn't make sense that the background-image shows after deleting one '../' because there are two folders that you have to get out of to reach the image.
This just doesn't make sense. Can anyone explain what is happening?
P.S. Basic representation of my project structure:
index.html
folder: img
folder: sass
research-pages
SASS FILE
Inside this folder is my specific sass file where I type my styling.
You have to go up two folders to reach the img folder where my background.jpg is located.
edit: With your file structure, just one ../ should take you to the sass folder. But on GitHub, perhaps their directory structuring method is more forgiving than the 'correct' way (perhaps ../ means both the parent folder and the parent folder level).
Some other possibilities: maybe things somehow got moved around or arent' uploading the way you think they are during your git add/commit/push, or possibly I'm interpreting your file structure incorrectly, or maybe you're mistaken with what you are seeing (though I tend to believe you - I will test this myself soon). Can you send us a link to your gh-pages repo?
Related
This is my first time trying to use Github pages. I am able to to get the index.html to work, but the style will not. I am serving from the master branch docs/ folder.
Everything works fine when I run it on my local host. Any ideas?
File tree
Stylesheet
Tried changing my static and templated folder names to 'docs' and 'css' as I thought Github looks in specific folders for HTML and CSS files. Also looked to make sure my href was pointing to the right place. I'm new to this, so I may have made a mistake.
EDIT: I am using Flask, which may be causing the issue, website is still static. IDK if Flask and static contradictory.
Thanks
I've looked at some other resources regarding this problem, but for some reason, they don't seem to be working. I've checked things like the path directory for the image, and I think that it's correct. I even uploaded the png as well as jpg to resolve this, but it still didn't make any difference. Also, it seems to be working completely fine with my local server but just not with Github.
Here's a link to my repo for the website on Github pages:
https://github.com/AnushkaKhare786/Coffee-Shop-.git
It is possible the your web files are not correctly placed on Github. Here is document that shows you steps on how to host on Github, which I believe you want to do
I think you should try to separate your images in an Images folder. Also, try to separate the custom stylesheets inside a CSS folder then update the src in your index.html then again make a new repo on Github. I think my advice will help you.
In case this didn't work then my friend refer to this link and read all the instructions carefully - Github Pages Guide
You just need to change the path of cshop3.jpg. To do so, replace the url('/cshop3.jpg'); at line 213 in your styles.css by url('./cshop3.jpg')
- url('/cshop3.jpg');
+ url('./cshop3.jpg'); <- Add the "." before the slash, or remove the slash
Add the "." before the slash, or remove the slash to get to the good directory (You did /cshop3.jpg, that refer to the root of your site, so https://anushkakhare786.github.io/ and not https://anushkakhare786.github.io/Coffee-Shop-/
change your style.css file config to..
change your image path to ('./cshop3.jpg')
All,
I did a bit of research but haven't found an exact thread or resolution to this issue.
I am using express in this webapp, Chrome Version 60.0.3112.113, and Win 10 Version 1703.
I am currently developing a site where I want to use a hamburger svg for mobile navigation. This is how the html sits for the "topbar"
<div id="topbar">
<img src="../images/hamburger.svg" alt="ham">
</div>
And here is the file structure:
https://puu.sh/xxDih/c842297b54.png
According to the structure, I should only need to do ../images/hamburger.svg, but when I do that, it comes up with a 404 error in the waterfall. I have run into this issue multiple times doing any sort of HTML sourcing into parent directories, but in JS files it works fine.
I'm not exactly sure what the issue is.
For the express server，every uri are processed by the express contains resource url and request url.
Request url(api) is refered to your express api config
resource(image, js, css, html...) is relative to your static server's root directory which was defined by using express.static(root_path).
That's what I want to say.
I noticed that images folder, node_modules folder, and pages folder are all in the same directory, and css is under the pages folder.
"../images/hamburger.svg" is the correct relative path from the pages folder, but being (big red flag) the node_modules is at "../node_modules/" I'm thinking that the server is serving from /pages/ folder, the servers root directory. meaning anything above the /pages/ folder will not be shared.
Clearly you do not want to share out ../../../windows/system32/ or the user documents etc. To prevent sharing those the highest directory you can access from the html page through a browser is the server folder being used. I'm thinking /pages/home.html is localhost/home.html and localhost/css/ is your css directory.
Programs running on the server can access files above the served directory, but the browser can not. "/node_modules/" should be outside of the servers root directory.
I realized this is an issue with express itself.
If (in this case) you have your index.html as express.static('./pages'), then it can't see anything above pages and considers pages as the working directory.
Me, coming from React (which stupidly was the first thing I learned even before basic JS), wants to put all the pages in one folder, which I think would make sense.
The workaround I did, which may not be optimal, was by putting index.html as a sibling to pages, css, and images in the src folder. Then in index.html, it has a meta tag as follows: <meta http-equiv="refresh" content="0; url=./pages/home.html" /> to redirect to the home.html page.
Again, this may not be optimal, but for a kinda OCD guy like myself this makes sense.
Update:
What we ended up doing is to have index.html be a static page, and then load the individual pages in an iframe. This website is mainly for information and has no database (yet), so there won't be much to process. Here's the new file structure that works.
http://puu.sh/xy5Dw/4dbc72ec06.png
src is now our working directory (express.static('./src')) and everything is detailed within there.
Once we do include a database, it will at most be 10 values in the server and will be using very basic requests, nothing crasy.
I've been trying to resolve this issue with my website (www.wintonbrownmusic.online). I've attached a picture of how my site looks locally. When I upload it through GoDaddy, the site looks differently. I understand that others have had this issue but not sure where/how to change the CSS file to link to my website so it'll look the way that it should. Can someone assist?
I'm not sure what your hosting / creating it with, but I had a quick look at your site and found one issue.
Your HTML file is looking for the bootstrap.css file in the assets/css folder, but it appears to be in the root folder.
unless your hosting with something that is supposed to find it there.
not sure.
but when is use http://www.wintonbrownmusic.online/assets/css/bootstrap.css is doesn't work, but if I use http://www.wintonbrownmusic.online/bootstrap.css it does work.
hope that helps.
You have problems with path, If you open the console in inspect element it will show you that you have problems in calling the required files css, js, and other files.
You need to upload folders properly in the host, you need to add folders like you have in local folders in your computers. "assets" folder is missing and you just upload files inside there.
change your folder name as either assets or css ....
assets/css is a folder name because of the slash (/) browser looking for css folder inside assets folder...just give the folder
name correctly try to avoid usage of special character ,punctutation
in folder name
Like many developers I put my images in /images, css in /css, and js in /js. This way, no matter what the URL/directory structure, the site can simply reference /css/style.css or /js/jquery.
Problem is when I try opening the html from a directory, the paths are screwed up. It assumes / is C:/
I'd like to be able to preview html files in a directory before putting them into a CMS on the web, but don't know how. Can somehow be used to handle this with minimal hassle?
Using root-relative links is great but, as you see, can cause issues when working locally.
Ideally, you'd set up a local web server on your machine and preview that way rather than just using the file system.
By putting a slash in front of your path, you're making it an absolute path. You should use absolute paths as rarely as possible - instead, use relative paths.
Say you have a directory structure like this:
/website
/html
/css
style.css
test.html
script.js
/newcss
newstyle.css
If you're in test.html and you need to refer to style.css, the relative path would be css/style.css. If you need to refer to script.js, the relative path would be just script.js. If you need to refer to newstyle.css, the relative path would be ../newcss/newstyle.css (the .. means "go up one directory level").
This has the benefit of making your code portable - you could copy the website folder anywhere you wanted, on any system, even to your websever, and it would work. Both *nix and Windows systems obey these rules.
You could consider setting up a local server like XAMPP. That way, your files will be previewable on http://127.0.0.1 and your absolute paths can be made to work just like on the web. XAMPP comes with a default htdocs directory into which you would put your file structure.
It may take some time of setting it up and getting into it, though.