I have a website I have been working on that works just fine locally but when deployed to gh-pages has many 404's when trying to pull in resources.
For example, I have a line of css for the background which is
background: #fff url(/assets/images/bg.jpg) repeat top left;
the 404 I get is this{
github.io/assets/images/bg.jpg
The path should be
github.io/myProject/assets/images/bg.jpg
How can I change this to work?
What is happening is that in your local setup the assets folder is in the same directory.
Lets say your local path looks someting like this:
file:///index.html where your assets folder is a sibling to index.html. In this case it works because / goes to the beggining of the directory. which in this case is : file:/// and there it see's the assets folder so it works locally.
On github now, you have a repo which is basically my-project. In my-project you have index.html and the folder assets. So when you say /assets/ here the begginnig directory is github.io so it looks for assets there which obviously doesn't exist.
Solution
Dont add / before assets. As long as assets is in the same directory as where this code is written you should be fine.
Also take a closer look at relative paths to understand it better: http://www.coffeecup.com/help/articles/absolute-vs-relative-pathslinks/
While gh-pages are generated by Jekyll, you can use his magic to ease development.
Create a _config.yml file at the root, containing :
baseurl: myProject/
You can now call any resource with {{site.baseurl}}assets/images/bg.jpg
which will automatically translate to myProject/assets/images/bg.jpg.
Related
I have been using Vue for a while now, and I noticed that I can store project images in either the assets folder or the public folder.
To access images from assets folder in Vue, one would do :src="require('#/assets/images/myimage.jpg')"
To access images from public folder in Vue, one would do :src="./static/images/myimage.jpg"
What's the proper location to store Vue project images?
What's the implication of using either?
How do they affect my project?
Based on the official vue documentation everything that is within the assets folder will be handled by Webpack while everything in the public folder is simply copied but doesn't go through Webpack: https://cli.vuejs.org/guide/html-and-static-assets.html#static-assets-handling
So if you want to take advantage of Webpacks optimization features during build (which you most certainly want) put them in assets.
I also put all my img's in the assets folder and only have the pwa related images and icons within the public folder.
All Stuff in the public folder gets straight up copied to your /dist usually. ex: favicon.ico ends up on your /dist folder with the name... favicon.ico.
The assets folder is usually where you would put your images/videos/fonts/svgs etc that you will import within vue files. These files end up on your /dist folder as a file with a hash name: (ex: 5j2i35j2o251hia.png).
Any assets from the /assets folder that you do not explicitly import will not end up in your /dist folder, as to not bloat your final file size.
Hope this helps..
https://cli.vuejs.org/guide/html-and-static-assets.html#static-assets-handling
Different between both would be relative (eventually as require('image')) vs absolute paths. Usually absolute path will not be passed via webpack during the build. And if you optimize images of absolute path, nothing will happen.
So Im trying to link a local copy of bootstrap (It works with a CDN). I have bootstrap.css installed in the same directory as index.ejs and yet I keep getting these 404 errors.
So the file path for bootstrap.css is /home/daniel/scheduler/doc_display/app/bootstrap.css
and index is: /home/daniel/scheduler/doc_display/app/index.ejs
Any help would be much apreciated
Your browser is going to look for the file relative to the location of the page it loads, so you need to make sure your path is correct.
Right now it's looking for it in the same folder as the index, which it looks like isn't where it's located.
I put the bootstrap.css file inside of my dist directory then included the new path inside the link tag. For some reason webpack seems to find paths when they are in the dist directory
Budo does great job to browserify and run with livereload. But it is using index.html by default. That makes it less convenient with several html files. Is it possible to run it against a custom html file?
It mentions to accept all browserify options but I couldn't find the relevant one.
You can use the dir flag to point to a custom path where you house a different index.html file:
eg: budo index.js --dir myCustomBudoDir
this will serve your index.html out of your myCustomBudoDir directory
If your launch dir has an index.html, budo will use that. I've got a super simple project here.
Currently, Budo has the name index.html baked in, so using separate directories is the way to go, see the dir option in the doc
I am testing my website code, and I have the following folders in my working directory:
css
js
img
html (contains index.html)
When I try to bring up my website locally (the "index.html" inside of the html folder), none of the css or js files were found (404 Error).
However, before I made an html folder everything was linked together fine, and my file setup looked like this:
css
js
img
index.html
Also, when I created an "html" folder and put "index.html" inside of it, I changed the html code so that it would refer to the other files appropriately (from what I've seen on various websites):
<link href="../css/my_styles.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../js/touch_functionality.js"></script>
<img src="../img/display_photo.jpg" alt="Display Photo">
Additional Information:
I am using a local Apache server to access the "index.html" file, and I have set the DocumentRoot for the VirtualHost I made to the "/html" folder.
Additionally, I thought this may have been a permissions error, but I downloaded Cygwin and I used "chmod 711" on all of the folders in my working directory and I have used "chmod 644" on the "index.html" file inside of the html folder, but the files still wouldn't be found.
I've done my research on this for quite a few hours, but unfortunately I haven't come across a solution for this yet. Any help would be much appreciated, thank you.
Update
If I change the DocumentRoot to where all of my working space directory (instead of html) and place a .php file that simply contains the following line of code:
<?php require("html/index.html"); ?>
where my folders reside so my working directory looking like this:
-css
-js
-img
-html (contains index.html)
-index.php
Everything will work correctly. However, I would have to believe there is a way so that I don't have to do this "work-around" method. Any insight would be incredibly helpful, thanks again.
The reason being is that the web server only allows one to view files in the html directory or below.
Otherwise it will somebody to access any part of your file system.
Would you like that?
To fix this go back to the configuration that works,
I am trying to learn Derby.js and I am having a lot of trouble. I know I can include packages such as jQuery through npm and add it to the node_modules folder, but this isn't quite what I want to do. I want to be able to include these files like I do in normal HTML.
So I want to do something like <Head:> <script src="js/jquery.js"></script>. This does not work though because it cannot find the js directory. I expect this has something to do with the way node.js runs an app and that the app itself will not hold the js directory.
Any help would be appreciated!
Derby offers the Script: tag:
<Scripts:>
<script type="text/javascript" src="/components/jquery/jquery.js"></script>
The components directory is because of the usage of bower. Put the components directory into the public directory. According to the express FAQ, the static routes search below the given directory (which is public in derby's example application). Configure bower to put the files under public/components (Choose bower install directory).
The public directory is configured at lib/server/index.js: .use(gzippo.staticGzip(publicPath, {maxAge: ONE_YEAR})), where publicPath is configured above to path.join(root, 'public').
Be aware that the "idea behind the inline script is that it runs immediately, before any of the external scripts are loaded. This should only be used in rare cases where the script should run before the page is displayed in the browser, such as sizing something to the window or autofuocusing an element in browsers that don't support the "autofocus" attribute." Nate Smith in the derby google group.
Inline scripts should be placed in inline.js, located in the same directory as the application's index.js.
If you require jQuery to do something on the loaded page, following code snipped worked at my side (Firefox, Chrome) in inline.js:
window.onload = function() {
alert($(this));
}