On the jekyll website the instructions to deploy the website is the following,
simply run the jekyll command and copy the generated _site folder to the root
folder of your hosting account.
When I copy the _site folder to public_html on my university webserver, I do not get the same page that I was getting when I ran jekyll serve locally. In particular, it appears the css was missing.
Do I need to copy something else to deploy the website?
Your assets (css, js, image) are certainly missing some path.
Your _config.yml should content baseurl: /yoursite/path your site url is on the form : http://youruniv.edu/yoursite/path/.
And calling your assets should be done like this :
<link rel="stylesheet" href="{{ site.baseurl }}/css/styles.css">
<script type="text/javascript" src="{{ site.baseurl }}/assets/javascripts/scripts.js"></script>
Related
I was working on a preview card component and when I uploaded my code to a repo to deploy it, github doesn't seem to load my css file style.
note: not my first time to deploy on github pages.
thanks in advance!
repo link: https://github.com/HanyAyad/Stats-preview-card-component-
live-website link on github pages: https://hanyayad.github.io/Stats-preview-card-component-/
same website deployed on netlify (working fine): https://62116b02da6915993f04d79c--suspicious-hypatia-156ece.netlify.app/
Maybe because the folder is CSS/styles.css and your declaration in index.html is css/styles.css?
I just tested here and when importing your CSS file, you are using
<link rel="stylesheet" href="css/style.css">
when you should be using
<link rel="stylesheet" href="CSS/style.css" >
URLs may be case-sensitive, it depends on what file system you are running your website.
Try renaming the folder CSS to css.
The directory in your repo is named CSS and not css as expected. So, please rename the directory.
It only works on Netlify because it doesn't take casing into account, for some reason. (That is, https://62116b02da6915993f04d79c--suspicious-hypatia-156ece.netlify.app/CsS/sTyLe.css works fine.)
I have a static index.html in wwwroot of an asp.net core web project which useStaticFiles:
<html>
...
<body>
...
<script src="~/scripts/bundle.js"></script>
</body>
</html>
After web application published. the bundle.js could not load successfully, after F12 in Chrome and found browser trying to load js by url:
https://127.0.0.1:5001/~/scripts/bundle.js
Please help a clue. thanks!
By the way, the web application run fluently without such errors locally.
It's actually an Nginx configuration issue. https://www.***.com/subpath1/test.html.
nginx proxied subpath1 to local port 5588 where test.html hosted in.
In test.html <script src="bundle.js"> didn't refer to
https://www.***.com/subpath1/bundle.js as expected but https://www.***.com/bundle.js
So update test.html src attribute src="subpath1/bundle.js" solved the problem.
Thanks all~
I'm trying to get a favicon to appear on a Jekyll GitHub Pages site. I'm using the Bulma Clean Theme and have placed a PNG favicon in the project's main directory. However, the favicon does not appear in my web browser (Chrome).
The theme's documentation states, "The default favicon path is {{ site.baseurl }}/favicon.png but you can overwrite it in the sites _config.yml like this favicon: /path/to/favicon.png". I have not changed the default favicon path.
The site is https://nlakritz.github.io/ach, any help would be much appreciated!
Yes it is working (tested on Chrome 84.0).
But then also if it is not working for you, then avoid using shortcut in rel="shortcut icon", such that <link rel="icon" type="image/png" href="./favicon.png">.
I have uploaded all of my files to my repo. Everything seems to be working fine locally but the CSS files and images are not loading on the actual website.
Link to the repo: https://github.com/Hammad-H/Hammad-H.github.io
have you linked them correctly using:
<link rel="stylesheet" type="text/css" href="cssFileName.css">
I've been experimenting with Jekyll using Octopress for deployment. I've got it working perfectly on localhost, but for some reason the CSS isn't getting loaded when the site loads on Github Pages. I'd appreciate any assistance understanding why.
When I view the site loading at the Github Pages url it shows a 404 error for main.css. The initiator column (using developer tools in Chrome btw) indicates this comes from the index.html file, at the line in the HTML head:
<link rel="stylesheet" href="/css/main.css">
The tree for the _site directory on my local machine is:
.
├── 2015
│ └── 11
│ └── 09
│ ├── another-jekyll-blog.html
│ ├── fifth-time-is-the-charm.html
│ └── jekyll-and-octopress-is-this-thing-on.html
├── about
│ └── index.html
├── css
│ └── main.css
├── feed.xml
├── index.html
└── jekyll
└── update
└── 2015
└── 11
└── 09
└── welcome-to-jekyll.html
This tree matches exactly in the Github repository after the site has been pushed up (I used jekyll build followed by octopress deploy).
When I look at the Sources tab in developer tools, for the deployed site, the tree shows as:
[USER].github.io
|-css
| |-main.css
|
|-octo-5
| |-(index)
But when I view the site on localhost, the site tree is:
localhost:4000
|-css
| |-main.css
|
|-(index)
The issue clearly seems to have something to do with the way the main.css file is being referenced on Github Pages. I assume that the link to the stylesheet in the index file is not working because main.css isn't in the relative path /css/main.css as expected. It works locally, but not on the Github Pages site. But I can't understand why, since the site tree appears to be correct, hasn't been modified from Jekyll defaults, and is the same locally as well as on the remote.
For good measure, including the _config.yml file below. It is essentially unchanged from the default settings at install, though I added some Octopress settings:
# Site settings
title: Test Site
email: your-email#domain.com
description: > # this means to ignore newlines until "baseurl:"
Site description here...
baseurl: "" # the subpath of your site, e.g. /blog
url: "http://yourdomain.com"
twitter_username: jekyllrb
## --- Octopress defaults --- ##
# Default extensions for new posts and pages
post_ext: markdown
page_ext: html
# Default templates for posts and pages, found in _templates/
post_layout: post
page_layout: page
# Format titles with titlecase?
titlecase: true
# Change default template file (in _templates/)
post_template: post
page_template: page
draft_template: draft
For reference, the repository is publicly available at: https://github.com/bg-scro/octo-5
I'm using jekyll and github's personal website generator. Adding the following code to my _config.yml file below solved the issue of my css not rendering in production. Not exactly sure why though. Would love an explanation. :)
baseurl: /PROJECT
url: http://USERNAME.github.io
Repo: https://github.com/kaeland/kaeland.github.io
For my case(not using octopress),
When I checked the rendered html in my blog by inspect element, link for css in head tag was this:
'/css/main.css'
This seems to be in correct to me because css/main.css or ./css/main.css worked on index.html. But it broke things on other post pages.
So, kept the css path to be default BUT changed the root in _config.yml as
root: /
Now, everything works fine on local and after publishing on git with this as root.
But yes, in your case, it is what previous answer told,
root: /octo-5
EDIT:
Strangely, I was working with keeping root as / and I am not sure what happened wrong but that stopped working for internal pages. But this below solution works. Note: In default project ofr jekyll, baseurl and url given in _config.yml are commented, so put it according to you.
In case user site
baseurl: /
url: http://USERNAME.github.io
or
In case project site
baseurl: /PROJECT
url: http://USERNAME.github.io
See difference between user site and project site here
https://help.github.com/articles/user-organization-and-project-pages/
In _config.yml, set root: /octo-5.
Call css like the original octopress :
<link rel="stylesheet" href="{{ root_url }}/css/main.css">