What a likely cause would it be if my blog builds just fine locally but in GitHub? Once it is in GitHub nav bar does not display nor do post styles are applied; intriguingly, this strange behavior only affects post pages.
My blog is set here and here is its repository.
The strange behavior is visible whenever one clicks on a blog post.
Let's call it the Jekyll 3 shake
Your blog build ok locally because your still working with github-pages version 40 and jekyll version 2.4.0.
bundle update
bundle exec jekyll build
And it will break on posts.
From your workflow post -> post layout -> base layout that includes head.html
In jekyll 2.4.0 : from head you see page.layout = base and then you see base layout front matter variables.
In jekyll 3.0.3 : from head you see page.layout = post and then you can't see base layout front matter variables.
The idea can be to move base's front matter variables to _config.yml :
common-css:
- "/css/bootstrap.min.css"
- "/css/main.css"
common-ext-css:
- "//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"
...
And to get those variables in _includes/head.html
{% if site.common-ext-css %}
{% for css in site.common-ext-css %}
<link rel="stylesheet" href="{{ css }}" />
{% endfor %}
{% endif %}
Same for js files.
Note : upgrading to Jekyll 3.x implies that you add
gems: [jekyll-paginate]
to your _config.yml file.
You're gonna need to make sure you have this:
_config.yml:
highlighter: rouge
markdown: kramdown
kramdown:
input: GFM
gems:
- jekyll-paginate
# other gems
Gemfile:
source 'https://rubygems.org'
gem 'github-pages'
gem 'jekyll-paginate'
# other gems
Then, open the terminal at your project's location and run:
bundle update => will update all your gems
bundle install => will generate a new Gemfile.lock including all gems and their dependencies
bundle exec jekyll serve => will serve Jekyll via Bundler
Why?, you may ask. Jekyll has a new version 3, and GitHub Pages followed the upgrade. The default markdown in now kramdown and the default highlighter is now rouge. Any doubts, check it here.
ALSO:
Your blog posts don't have links for your stylesheets found in the index.html head:
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="/css/bootstrap.min.css" />
<link rel="stylesheet" href="/css/main.css" />
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic" />
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800" />
<link rel="stylesheet" href="/css/index.css" />
Probably something wrong with your includes.
Related
I am new to making website using jekyll. When I run the website on local server using jekyll serve, it runs perfectly. I used jekyll build to build files for FTP server. Problem is the pages built in _site folder are without themes and images shown while running it locally.What can be its solution?
You have to customize and override your CSS styles, images or pages in Jekyll. That's why theme changes are not applied and "Jekyll Serve" command resets your changes.
Look at this Official Github Help page: Customizing CSS and HTML in your Jekyll theme
And Tom Kadwill's Page How to Override CSS Styles in Jekyll
Locally, your site is served at http://127.0.0.1:4000/ which the root.
Your _config.yml baseurl: "" is empty.
Once you publish you site from something else than the root, say, https://example.com/blog/, you need to check two things :
that your baseurl: "/blog" is set accordingly to path.
that you call your resources using {{ site.baseurl }}{{ post.url }} or with filter {{ image.url | relative_url }}
I am trying to learn how to use jekyll so i can create some sites and host them on github pages... But i am having a problem following the tutorial on the jekyll website, The css folder in the assets directory is not being created when i run jekyll build or jekyll serve, i have even tried bundle exec jekyll build and clean.
I have tried a few things still cant find a solution.
The github repo for my code is at https://github.com/blaze4dem/timiking please help me understand what i am doing wrong here.. Thanks in advance.
First, you're storing your scss in _assets/css, which as an underscored folder is ignored by jekyll.
Move it to assets/css folder, with no underscore. It will then be generated.
The second problem is how you call your generated css in _layouts/home.html.
<link rel="stylesheet" type="text/css" href="/assets/css/style.scss">
Requested from your index page at http://127.0.0.1:4000/timiking/, it resolve to http://127.0.0.1:4000/assets/css/style.scss then 404.
Simply use your baseurl :
<link rel="stylesheet" type="text/css" href="{{ site.baseurl }}/assets/css/style.css">
I am making my own theme in Jekyll, and I wanted to use syntax highlighting.
For this I did:
1) Install rouge and kramdown in my Gemfile
gem 'kramdown'
gem 'rouge'
2) Update my _config.yml
markdown: kramdown
highlighter: rouge
3) Write some code in my post
{% highlight javascript %}
$(".myClass").on("click", function(){...});
{% endhighlight %}
But I am still not getting any highlighting.
Why is that? Do I need to include an specific css file in the <head>?
I think it's possible you forgot to install the gems locally. You shouldn't need to add the stylesheet but do check your browser console for any errors.
You should also be able to export a base stylesheet and extend it as needed:
rougify style base16.solarized.dark > css/syntax.css
<link href="/css/syntax.css" rel="stylesheet">
I have just begun working with Jekyll and it seems like a really neat tool, however I cannot make highlighting to work. I would like to use 'rouge' highlighter for that purpose to use the same tool that will be later used by github pages - but when my pages are being served, they contain only raw code block.
I have no idea what I am doing wrong.
This are the steps that I am following:
I am following Jekyll Bootstrap Quick Start instructions to the letter Link
Running command jekyll serve works as expected, default website is served. No errors in command line.
I am installing rouge via gem install rouge
I have verified that rouge is installed by checking gem list
I am adding highlighter: rouge to _config.yml file (replacing the default pygments)
I have added to following section to markdown page:
``` csharp
public interface ITest : ITestKey
{
Task<string> SayHello(string name);
}
```
I have created css style file by running rougify style monokai > test.css command
I have added that style to served page
<link href="{{ ASSET_PATH }}/css/test.css" rel="stylesheet" type="text/css" media="all">
Now I would expect that the served page would contain code block with appropriate spans. That is not the case though - no errors or warning are thrown but the outcome of transformation is as follows:
<div class="highlighter-rouge">
<pre class="highlight">
<code>
public interface ITest : ITestKey
{
Task<string> SayHello(string name);
}
</code>
</pre>
</div>
Could anyone please help ?
First things first then.
1st. Run Jekyll trough Bundler, which is the most recommended method, specially when hosting on GitHub Pages.
To do that:
Open your terminal and type gem install bundler
Run bundle update in order to update all your local gems.
Add a Gemfile (without any extension) to your site root and inside it type:
source 'https://rubygems.org'
gem 'github-pages'
gem 'wdm'
Open the terminal and go to your project folder. Run bundle install.
This will make bundler install all gem dependencies for you. Adding the gem wdm will allow you to run everything properly on Windows. Bundler will create a file called Gemfile.lock where it's gonna be listed all the gems and dependencies used.
2nd. Don't leave blank spaces between ``` and the code language:
```cs
public interface ITest : ITestKey
{
Task<string> SayHello(string name);
}
```
3rd: Add GFM to your _config.yml by doing like this:
markdown: kramdown
kramdown:
input: GFM
4th: Serve Jekyll with bundler by this running this command: bundle exec jekyll serve --watch
Done! You should be ok then!
For this part:
I have created css style file by running rougify style monokai >
test.css command
I have added that style to served page
<link href="{{ ASSET_PATH }}/css/test.css" rel="stylesheet"
type="text/css" media="all">
I'm not sure what you're doing, so I'm not on the loop to guide you through.
Hope to have helped!
All right.
Turns out I was doing everything well...
However I was also using MetroUI Styling with default metro.js file included to website.
Turns out that default metroui script was breaking the formatting...
My _config.yml is defined thus
# Site settings
title: XTargets
email: bradphelan#xtargets.com
description: "XTargets - Technical blog of Brad Phelan"
baseurl: "/xtargets"
url: "http://xtargets.com"
# Build settings
markdown: redcarpet
permalink: pretty
defaults:
-
scope:
path: ""
values:
layout: "post"
https://github.com/bradphelan/xtargets/blob/gh-pages/_config.yml
and when I run the jekyll server locally my posts get wrapped with the post layout. However when checked into gh-pages branch on github the pages are not wrapped.
See
http://bradphelan.github.io/xtargets/2012/03/29/simple-javascript-powered-inline-confirm/
Why would this occur?
It looks like github pages has not yet updated jekyll version. pages.github.com/versions/. It's at jekyll version 1.5.1 currently.
This issue is not related to Front Matter defaults or GitHub Pages not running the latest Jekyll version. It's your stylesheet not being linked correctly.
Your site looks for the CSS file in http://bradphelan.github.io/css/main.css, but it is located here: http://bradphelan.github.io/xtargets/css/main.css
In head.html, change this accordingly:
<link rel="stylesheet" href="{{ "/css/main.css" | prepend: site.baseurl }}">