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.
Related
I recently revived my old Jekyll project started with Jekyll 3.x (now using Jekyll 4.2 and I forgot a lot). The generated site is OK if browsed with jekyll serve command, but if later I manually enter _site folder and click index.html the site ignores css rules and links are broken.
This makes me nervous how to deploy the site. What I'm doing wrong?
Your site is served from a development web server when you run jekyll serve. I'm assuming by click index.html, you mean you are opening the file in your web browser - this won't work well with the absolute URLs Jekyll creates.
You can see the difference in the URL bar: one will say http:// and the other will be file://, a URL like /css/main.css will likely only work through the web server (i.e. jekyll serve).
Assuming you are deploying the site to a web server, and it works with jekyll serve, I'd guess it's fine. I can't be sure, but in any case, You should probably back up what's on the server currently though so you can restore it.
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!
Can I set up my repository so that I can see all the files (html and css) that my site uses in the repository while still using the GitHub page generator?
I want to use github.com to maintain my multi page site, without installing Jekyll locally.
After you create your github repo go to the settings and select the option to host from the docs directory I found this to be the best method to host my websites that way you done have to mess with different branches unless your in to that thing.
It is not required for you to use Jekyll I personally have never used it. It is to wordpress esq.
What you can use instead of Jekyll is a static site generator or spa to precompile your website content add the static content to the doc directory and push your repo.
Github will generate a url for your that will also be available in your settings. You can also add custom domains.
I recomd using a static site generator performance and seo is the reason.
If you create a Jekyll website on your local machine in /some/path/website/, initialise your Git repository there:
cd /some/path/website/
git init
Then you can push this to your remote Github repository and all of your files will added and viewable.
I don't think you can initialise a Jekyll website in your remote repository though.
From their documentation:
Jekyll's simplified build process with GitHub Pages is one of the biggest advantages of using Jekyll instead of other static site generators. GitHub Pages manages your site's build process with a single push to your site's publishing branch. This is Jekyll's build process for managing your site:
Push file changes to your pages publishing branch (my emphasis)
GitHub Pages publishes your site.
It turned out that the reason I was not seeing many files was that there was only the index.html that I created using the tutorial at GitHub Pages
The reason I thought there must have been other files was that the theme I picked looked a whole lot better than my helloworld.html
I have this structure for my project:
Root Directory
|-css folder
|-style.css
|
|-it folder
|-index.html
If I try to include css file with:
<link href="/css/style.css" rel="stylesheet" type="text/css"/>
from index.html, aptana preview and also internal server can not find style.css.
Why is this?
In my remote server it works perfectly and I do not want to use a relative path.
In terms of the "why", the problem you are having is related to how your development server is setup versus your production server.
Assuming a standard setup, your production server will receive requests for a domain (i.e., http://mysite.com) that is, for lack of a better word, mapped to a folder on your server (i.e, a request to http://mysite.com will be mapped to a folder, /var/www/mysite, on your server).
So, when you link to a style sheet with /css/style.css, your (production) sever immediately goes to the /var/www/mysite folder and starts looking for the css folder, file and so on. No problems with that, as you point out.
Your development machine, however, is serving up pages locally and has a different directory structure for mapping to files and folders.
When I open an HTML page in my Aptana project and hit the preview button, Studio loads http://127.0.0.1:8020/mysite/public/404.html (note how the first folder after the IP and port is mysite). To load the absolutely pathed CSS file, the local server is actually looking for http://127.0.0.1:8020/css/styles.css but it needs to get to http://127.0.0.1:8020/mysite/css/styles.css.
The initial "/" in your link (/css/styles.css) tells the server to go to the root directory of the server and start looking for the folder and files from that point ... but there is no css folder in the local server's root directory. It lives in /mysite/css/styles.css and that's why fskreuz suggests relative paths and using "../css/styles.css" instead.
Personally, I prefer absolute links (but that's just a personal preference and not in any way a challenge to or comment upon fskreuz's response). However, my local development setup is conducive to using them because I setup virtual hosts for the sites I work on. Using Apache, I setup a virtual host for each of my projects. With this, I can load something like http://dev.mysite.com in any browser on my computer and test my site/app in a way that makes it mirror my production setup.
I have no idea how to search for this one and perhaps Serverfault would be better but I'll start here.
I have a HTML web site running at the root of one of my webservers. It runs fine and dandy. I needed to make a test environment for it and where I can't run it in the root of the websever. I have to make a directory on the test server. For instance:
http://myTestserver/HtmlWebsite/index.html instead http://myProdserver/index.html
Once I throw it into the directory, most everything breaks. Some images won't load, javascript files can't be found, mass hysteria!
I discovered that the author of said site had used a mix of absolute and relative directory paths in all the files hence why some images loaded correctly.
I can go in and edit all the files to be relative. But I'm wondering if I can make IIS 6.0 think that the web app directory it is in is the root of the webserver. So if I have an absolute path in the HTML like:
<img src="/_support/loadme.jpg" />
it would give me the image for either http://myTestserver/HtmlWebsite/_support/loadme.jpg or http://myProdserver/_support/loadme.jpg.
Can I get IIS 6.0 to do my bidding or am I stuck editing paths?
Unfortunately you'll either have to fix the absolute URL's across the site or run the site in it's own website in the root.
Is there no way you can get a new site created on the IIS6 test server?
You should be able to by using URL rewriting
First you install ISAPI Rewrite, found here: http://www.helicontech.com/isapi_rewrite/
Then you create a config with the following rule:
RewriteEngine on
RewriteRule (.+) /HtmlWebsite$1
What it does is it takes your request, say /index.html, and internally rewrites it to /HtmlWebsite/index.html, which is (ironically) tricking you into thinking you're calling from root when in fact it fetches it from the subfolder.
You might have to add or change the rule if you got more stuff on your test server, but that's the gist of it.