I'm creating a GitHub project page with Jekyll.
I've read the previous questions on this subject, as well as the Jekyll documentation here.
I've tried setting baseurl in _config.yml to both /my-project
and
http://myaccount.github.io/my-project while linking my CSS and js files like so:
<script src="{{ site.baseurl }}/js/javascript.js"></script>
<link href="{{ site.baseurl }}/css/style.css" rel="stylesheet">
When I run jekyll --serve --baseurl '' everything looks good on localhost.
But when I push to github, all of my CSS and js files are 404ing; the links are getting turned into http://css/style.css and so on.
What am I missing here?
I'm also confused about the purpose of the BASE_PATH variable in _config.yml, as opposed to baseurl.
I tried setting BASE_PATH and linking my files that way, but that didn't work either.
I figured it out -- baseurl wasn't getting parsed because I had mistakenly placed it under the JB: hash in _config.yml. I moved baseurl to a different part of the file and it's working properly now.
try using baseurl instead. That's what I use.
see https://jekyllrb.com/docs/configuration/default/
You can try and create a new variable in the config file,
newbaseurl: /
and use it instead of baseurl, this seemed to fix my issues.
I fixed a similar issue by changing site.baseurl to relative_url as per: Jekyll site works locally but not on Github Pages
Trying newbaseurl: / did not work for me.
I had a same issue and I created a new variable in inside _config.yml
resource: https://name.github.io/myapp
Then I used that variable like this
<link rel="stylesheet" href="{{ "/style.css" | prepend:site.resource}}">
Also please remember to build before push to the remote. Run this to build
jekyll build
Related
I forked the Solid-jekyll theme (solid-jekyll) and got it to work locally. However, when I pushed it up to Github pages, it seems to loose it's css formatting.
My fork of solid-jekyll is on github, username:BeenzSyed. I tried changing the baseurl to "/solid-jekyll" but that didn't work either.
This is what it looks like on my fork: https://beenzsyed.github.io/solid-jekyll/.
This is what it should like though: http://ojs.xyz/solid-jekyll/.
I think it's because it can't find the _includes/css/style.css file but I'm not sure what to do to fix that. Any help is appreciated!
Faced exactly same issue long back and it consumed 2-3 days. Find your main stylesheets (like main.css) and save it to assets folder and commit. This way Github will be copying stylesheet to site built. It usually won't copy :( main.css
I followed the suggestion of dracos on this GitHub Issue page and related commit to change /_includes/head.html from:
<link rel="stylesheet" href="{{ site.baseurl }}public/css/poole.css">
to
<link rel="stylesheet" href="{{ "/public/css/poole.css" | relative_url }}">
Changing most site.baseurl references to relative_url works in both local testing and on GitHub Pages.
My commit for changes to my site can be found below:
https://github.com/naamancampbell/naamancampbell.github.io/commit/f60da4d4e48447708c2e157ff1e07303d5377587
As someone pointed out, the live demo uses a different stylesheet. So the repo isn't the same. I suggest creating a new issue in the repository.
I am very confused, I just started to work on the CSS for my ASP.NET MVC4 website and I don't fully understand what is happening.
Currently my mobile layout works but any changes to it causes one strange effect after another. (e.g. the forms not being displayed to the ajax-loader.gif constantly being displayed.)
I have the following in .Layout.Mobile.cshtml
#Styles.Render("~/Content/Mobile/css", "~/Content/jquerymobile/css")
<link rel="stylesheet" href="~/Content/Mobile/css/jquery.mobile-1.2.0.min.css" />
<link rel="stylesheet" href="~/Content/Mobile/css/jquery.mobile-1.2.0.css" />
<link rel="stylesheet" href="~/Content/Mobile/css/jquery.mobile.theme-1.2.0.css" />
#Scripts.Render("~/bundles/jquery", "~/bundles/jquerymobile")
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
I have modified the BundleMobileConfig.cs in App_start as follows:
// bundles.Add(new StyleBundle("~/Content/Mobile/css")
// .Include("~/Content/Site.Mobile.css"));
//kludge is the above wrong...and the following needed??
bundles.Add(new StyleBundle("~/Content/Mobile/css")
.Include("~/Content/Site.Mobile.css",
"~/Content/Mobile/css/"));
I don't understand why this is NOT the default for this bundle?
Here are my questions / problems:
If you will note the stylesheets, I should not need to include the three explicit links, they should come from the bundles. But if delete any of them the site breaks.
Why won't the modified ~/Content/Mobile/css bundle pull up these css files?
For the script files I have looked at the code.jquery.com and I don't understand why I need these. My local code is the latest (i.e. jquery-1.9.1.js and jquery.mobile-1.2.0.js
I would expect that the version 1.9.1 shoud be able to replace the 1.7.1 without
problems, but it doesn't
The jquery.mobile.min.js should only be switching between a release and debug
vesion, which should not cause a problem, but it does.
I have used firebug to view what files are being loaded and I see that when I use just
the Render of the bundles without the explicit includes I don't get the files included, why not? I have read about bundles and it seems like I should just get the bundled files.
Can any one shed some light on what is happening and point me to a tutorial so I can learn
how to use how to debug CSS and bundles. I have read several and I find firebug very
useful, but I have no idea where to look next.
Try replacing your bundle code with this.
bundles.Add(new StyleBundle("~/Content/Mobile/css")
.Include("~/Content/Site.Mobile.css",
"~/Content/Mobile/jquery.mobile*"));
This should load your files without explicitly doing so.
Your right this did work! Thanks....
The strange thing is that the following did not work:
bundles.Add(new StyleBundle("~/Content/Mobile/css")
.Include("~/Content/Site.Mobile.css",
"~/Content/Mobile/css/jquery.mobile-{version}.js",
"~/Content/Mobile/css/jquery.mobile.theme-{version}.js",
"~/Content/Mobile/css/jquery.mobile.structure-{version}.js",
"~/Content/Mobile/css/"));
I understand why your example works...but don't understand why mine doesn't ... unless the version tag does not work like I expect it to....
Also I found out the jquery 1.9.1 is much different from 1.7.1 for this I had to do the following:
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/jquerymobile")
<script src="~/Scripts/jquery-1.9.1.js"></script>
<script src="~/Scripts/jquery-migrate-1.1.1.js"></script>
<script src="~/Scripts/jquery.mobile-1.2.0.js"></script>
this works....using your example I will figure out a wild card pattern to include this as well.
i'm using MAMP on my MacBook Pro as a local server. PHP and MySql are running fine. However, i have a strange issue with CakePHP - CSS only works on homepage of my site and only by the two following paths:
'localhost' and 'localhost/index.php'
Using 'localhost/index.php/' however returns just the bare unstyled markup as does all other pages in the site. How can a slash a the end break the CSS?
A few searches have suggested this could possibly be a mod rewrite issue in apache, but i'm out of my depth to be honest - i don't know how to test if changes i make turn mod rewrite on.
As CSS works only for 2 specific paths, could it perhaps be a problems with my routes? I only have 2 defined - '/' and '/index.php/' - and they are both the same.
Any help will be greatly appreciated,
James
It looks like your MAMP configuration (or Apache within MAMP has mod_rewrite disabled. It looks like you have to follow http://documentation.mamp.info/en/mamp-pro/advanced-functions/edit-configuration-files instructions, edit template for apache's httpd.conf, search for mod_rewrite and uncomment this line in config template.
The problem is most likely as tbwcf says that you're trying to load the CSS files using relative file paths, but you should always use CakePHP's helpers to add resource files to the layout:
<?php echo $this->Html->css('style'); ?>
The above will output
<link rel="stylesheet" type="text/css" href="/css/style.css" />
The benefit is that if you install the app to some other directory the path changes automatically:
<link rel="stylesheet" type="text/css" href="/other/directory/css/style.css" />
Do not use relative file paths like ../css. It will break the layout again in all but the simplest cases.
The slash at the end of the markup is most likely breaking the file path to your stylesheet. For example if your css is referenced as
<link rel="stylesheet" href="css/stylesheet.css" />
then adding the slash to the page URL would mean you'd need to jump back a step to get to the same stylesheet as it would no longer be in the same folder as the page you're on.
So you could add
../ before the reference like <link rel="stylesheet" href="../css/stylesheet.css" />
Or possibly an easier solution in this case would be to reference your stylesheet absolutely like:
<link rel="stylesheet" href="http://localhost:8888/project/css/stylesheet.css" />
I've been trying to load my octopress site (based on jekyll) to my local network. There is no server, I just want it available locally on a shared folder.
Every time i deploy it to a local folder the css and js and background image links are broken.
The available options such as rsync, github and heroku all require ssh's and passwords. This can be found here: http://octopress.org/docs/deploying/
Is there a rake option that helps with this?
SOLVED:
Kikito, Thank you very much for the guidance.
I just implemented it and forked a git repository. There is one problem, though. I have used this technique to host the same site on Dropbox Public, a local directory and a web host. I had to add an extra / and the slashes add up as links are clicked. Here is the repo and dropbox link:
https://github.com/originalsurfmex/jekyll-relative-bootstrap
Everything works as you say, but I think that if you or others glance at the partials and links in the layouts you will have a better idea.
Automatic way:
for css/js file:
{% assign lvl = page.url | append:'X' | split:'/' | size %}
{% capture relative %}{% for i in (3..lvl) %}../{% endfor %}{% endcapture %}
<link href="{{ relative }}css/main.css" rel="stylesheet" />
<script src="{{ relative }}scripts/jquery.js"></script>
for other files:
in _config.yml set
url: http://www.yourdomain.com
add canonical link element:
<link rel="canonical" href="{{ site.url }}{{ page.url }}" />
in one of your js file, add:
var relative = null;
if (location.protocol==='file:') {
relative = Array($('link[rel="canonical"]').attr('href').match(/\//g).length-2).join('../');
if (relative == '') relative = './';
}
function to_relative(link, index) {
if (!relative) return link;
var hash = link ? link.match(/#.*$/) : null;
if (hash) link = link.replace(/#.*$/, '');
return link?(link.replace(/^\//, relative)+(index?(link.substr(-1)=='/'?'index.html':''):'')+(hash?hash[0]:'')):null;
}
$(function(){
if (relative) {
$('a').attr('href', function(a,b){return to_relative(b, true);});
$('img').attr('src', function(a,b){return to_relative(b, false);});
}
});
for other aspects, use jQuery to manipulate them.
The problem is that you are using absolute paths to get to some of your resources. If you want to deploy the site anywhere in the network, then you need to make those relative.
In my case, what I do is to define an (optional) setting called root in the pages/posts that need it, pointing to the "relative root" of the project. For example, on a page located in about/index.html, the root will be ../, since there is only one level "up":
---
title: My Page title
root: "../"
---
Pages further away in the directories will need more dots: ../../, ../../../, and so on. Pages in the root folder (like index.html) don't need a root.
Then I use that setting to generate all the paths.
If I'm on the page or post itself, and I need to refer to a local image or another page, use page.root or post.root:
<img src="{{ post.root }}images/happy.png" />
<a href="{{ post.root }}2010/01/01/another_post>Relative link to another post</a>
It's possible to make the reference directly (../images/happy.png) but this works better when you are creating the site, and you are still unsure about the definitive paths of each page.
I have all the css and js included in one partial file inside _includes. It creates a variable called root to make sure it works with both pages and posts:
{% capture root %}{% if page.root %}{{ page.root }}{% else %}{{ post.root }}{% endif %}{%endcapture%}
<script type="text/javascript" src="{{ root }}js/jquery-min.js"></script>
<link rel="stylesheet" type="text/css" href="{{ root }}/css/style.css" />
That's pretty much it.
If you can live with having to generate your site for a specific folder, using the html <base /> tag may be more straightforward. With all asset paths relative to your root folder, add the following to your default layout:
<base href="{{ site.baseurl }}" />
Then use the jekyll --base-url <folder> <folder> to deploy your jekyll site to <folder> with the baseurl set up correctly.
Note that this also works without changes with the built-in WEBrick server. Start with jekyll --server and do not specify a custom --base-url.
Update: as gimpf points out in the comment, this will not work as expected with anchor links. Those will point to the base URL instead of the current page. There are workarounds using JavaScript, e.g. rewrite anchor hrefs with jQuery:
$().ready(function() {
$("a[href^='\#']").each(function(){
this.href=location.href.split("#")[0]+'#'+this.href.substr(this.href.indexOf('#')+1);
});
});
There is an issue on the Jekyll's github that deals with this. Putting _config.yml:
url: "<your domain>"
and then using {{ site.url }} will return the url. So for example, to refer to the /css/styles.css file from a page's header:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en-us">
<head>
<...>
<link rel="stylesheet" href="{{ site.url }}/css/style.css" type="text/css" />
<...>
</head>
<body>
...
</body>
</html>
Alternate Answer -
I had a similar requirement of a locally hosted static html so that I could distribute it to other computers without a web server and have it read from the filesystem by a regular browser.
Rather than fiddle with arcane path syntax in various places -- although it can be done evidenced by other answers in this thread -- I instead chose a workaround by publishing the site to my localhost:4000 served up by Jekyll as per usual, and then used the wget utility to download a static copy of the static website which could then be opened and navigated from the filesystem with a standard web browser. wget will do the hard work of making the paths relative for you.
This is the wget command I use -
wget \
--recursive \
--no-clobber \
--page-requisites \
--html-extension \
--convert-links \
--restrict-file-names=windows \
--domains localhost http://localhost:4000
Sounds like the path to your images/JS/CSS will need a slight adjustment. Try using a path that points to the generated folder.
For example:
<img src="/_site/images/foobar.jpg" />
I'm having a css file and i want to modify it to fit my needs.
The problem is that it seems to be cached somewhere, as i just cannot see the changes, no matter what i do in the css file.
I am sure i am pointing to the right file, as by now i'v modified in it, and it worked.
Is there any setting so that i can turn the cache off?
Thanks!
As pointed out in this article http://www.wkoorts.com/wkblog/2009/07/12/css-auto-reload-with-django-templates/, you could force django reload your css file by using a parameter in your css link :
<link rel="stylesheet" type="text/css" href="/site_media/css/style.css?{% now "U" %}" />
This is a timestamp which takes a different value every second, so you could even reload your css second every second if needed!
Just go into your site, view source, and copy the link to your CSS file. Verify the link, verify it's being modified. Refresh the CSS file manually via your browser to get the latest.
This isn't a Django issue.
Did you try appending a datetime stamp to the end of the request? I know some frameworks do this to .js and .css files automatically to prevent caching.
Instead of using complicated solutions you can add extra parameter to your includes in the templates.
For static includes:
<script src="{% static 'js/polls/polls.js' %}?version=1"></script>
For direct includes:
<link rel="stylesheet" type="text/css" href="/site_media/css/style.css?version=1" />
Note the ?version=1 in the code. Every time you're modifying the file, change this version in the template, so browser will be forced to reload the file.
Of course you can use even now as suggested by #rom, but if your static files are not being changed very often, it's not the smartest idea to don't use cache at all.