There are many questions similar to mine, but most of them arise from not using baseurl correctly. My website, however, does not even use a baseurl. It uses the root Github page. I essentially forked my website off of the Airspace theme ported by luminousrubyist, whose website displays correctly, so somewhere down the line I made a change that stopped it from displaying correctly. Therefore I would appreciate it if someone else could figure out what's wrong; I have been trying to figure it out for hours.
My Github page
My _config.yml file:
title: "My Portfolio"
subtitle: "My portfolio, detailing my experience"
# Base URL of site. It should always start with a slash,
# and never end with a slash. Set it to a blank value if hosting at the
# root of your server.
# baseurl: "/" # the subpath of your site
url: "http://austinstover.github.io" # the base hostname & protocol for your site
cover: "/assets/cover.png"
logo: "/assets/logo.png"
# Build settings
markdown: kramdown
# Google analytics
ga_tracking_id: "UA-90009514-1"
# Category descriptions (for archive pages)
descriptions:
- cat: jekyll
desc: "Posts describing Jekyll setup techniques."
- cat: dummy
desc: "Just some placeholder posts, lorem ipsum and the rest."
exclude:
- "/vendor/"
- "Gemfile"
- "Gemfile.lock"
- "README.md"
- "LICENSE.md"
- "*.gemspec"
keep_files:
- "CNAME"
- ".git"
- ".gitignore"
try to set baseurl in your _config.yml:
baseurl: "" #if not used.
btw, your index.html use page.html layout (from _layouts), that use default.html layout which include head.html (from _includes). this one call {{ site.baseurl }} but it's undefined .
Related
I'm currently working through my first implementation of a Jekyll webpage (via Github-pages) and I'm trying to use the Poole: Lanyon structure. However, while it seems that the static site is active, it is not picking up any of the formatting.
I can't tell if I needed to add anything else from lanyon github page (https://github.com/poole/lanyon) or if it could have something to do with my '_config' file, which currently looks as follows (or is an entirely different issue):
title: Michael
tagline: 'hopefully a blog2'
description: 'A reserved Jekyll theme that places the utmost gravity on content with a hidden drawer. Made by #mdo.'
url: "/michaelmarzec.github.io"
baseurl: "https://michaelmarzec.github.io"
paginate: 5
permalink: pretty
# About/contact
author:
name: Mark Otto
url: https://twitter.com/mdo
email: markdotto#gmail.com
# Gems
plugins:
- jekyll-paginate
# Custom vars
version: 1.1.0
google_analytics_id: #UA-XXXX-Y
My github repository is here: https://github.com/michaelmarzec/michaelmarzec.github.io
And the attempted website here: https://michaelmarzec.github.io/
Any recommendations or advice will be greatly appreciated!
Looks like I was overthinking this issue - the following was my simple solution:
url: https://michaelmarzec.github.io/
baseurl: ''
Here is a sample site that I'm developing. The clickable map for 6 states should lead to another post. The top-most state( Jammu and Kashmir) should lead to a post 2018-09-20-jkGIF that is in the _postsfolder. Similar actions should be performed for the other states as well.
The problem here is that, the click leads to a 404 page. The local serving of the site does this task easily, but the github backed version doesn't.
Files in my _posts folder:
2018-09-19-welcome-to-jekyll.markdown
2018-09-20-jkGIF.md
2018-09-21-aniGIF.md
2018-09-21-chanGIF.md
2018-09-21-dadraGIF.md
2018-09-21-damanGIF.md
2018-09-21-goaGIF.md
The _config.yml looks like :
title: Your awesome title
email: your-email#example.com
description: >- # this means to ignore newlines until "baseurl:"
baseurl: "infer" # the subpath of your site, e.g. /blog
url: "" # the base hostname & protocol for your site, e.g. http://example.com
twitter_username: jekyllrb
github_username: jekyll
markdown: kramdown
theme: minima
plugins:
- jekyll-feed
And the post linking procedure in the home page in the _layouts folder is:
href={% post_url 2018-09-20-jkGIF %}
(Inside that of a map, for more information dive into this.)
The posts contain a GIF. These GIFs are in the root folder, and are linked to the pages in the following way:
---
layout: post
title: "Jammu And Kashmir GIFs"
---
I tried adding a slash before the jk.gif thing, but that didn't work. The posts don't seem to be linked to the home page.
You can check out this repository if needed, or just ask away in the comments.
Set your base url : baseurl: "/infer", and use it :
href={{ site.baseurl }}{% post_url 2018-09-20-jkGIF %}
and
I want all the files in the post folder to use the posts.nest.sass.css stylesheet, so I tried putting that in as a default in the _config.yml file
defaults:
-
scope:
path: "_posts"
value:
layout: "post"
stylesheet: "css/posts.nest.sass.css"
Then in post.html, which is the layout file for these posts I included this in the head:
<link rel="stylesheet" href="{{site.stylesheet}}">
In the generated page there is nothing inside the href attribute. How should this be written so the stylesheet variable is passed in?
I have not been able to find documentation about how this should be done, I just guessed. Links to good places to learn about formatting in Jekyll would be appreciated.
Edit: After more fiddling, including running the file through this YAML linter, I abandoned putting this in the _config.yml file, and instead just filled in the href info directly - which up reflection is fine, since it isn't going to change with any of the posts and the layout file will fill it in. However the jekyll server says every time I save that there is invalid front-matter:
Defaults: An invalid front-matter default set was found:
{"scope"=>{"path"=>"", "type"=>"posts"}, "value"=>{"layout"=>"post"}}
I'm putting in the whole file now in case a syntax error elsewhere is the
issue, though I can't see it.
defaults:
-
scope:
path: ""
type: "pages"
values:
layout: "default"
stylesheet: "css/content.nest.sass.css"
-
scope:
path: ""
type: "posts"
value:
layout: "post"
destination: docs
exclude:
- archive
- graphics
- webplayer
- browsergame
- blend4web
- details-shim-master
- blenderstuff
- working
- LICENSE.txt
- README.md
- TODO.txt
- basetemplate.html
markdown: kramdown
url: "https://www.moonwards.com/"
Your default values are added to every posts variables, like the ones in front matter. So, the right syntax is :
<link rel="stylesheet" href="{{page.stylesheet}}">
I've been working on my portfolio site using jekyll, and everything seems to work just great locally. So, the next step for me was to push it up to github inside a gh-pages branch, and when I do that, I receive an email with the error below.
The tag responsive_image on line 20 in _layouts/post.html is not a recognized Liquid tag.
The gem that I'm trying to use is Jekyll Responsive Images.
Like I said before, when I run jekyll serve, I get no errors and I can run my jekyll site just fine locally, but for some reason this error is keeping my site from working with github. My post.html file looks like this.
---
layout: default
---
<article class="article--container">
<header class="heading--articles">
<h1 class="page-title">{{ page.title }}</h1>
<p class="post-date">
posted on {{ page.date | date: "%b %-d, %Y"}}
</p>
{% if page.featured_image %}
<div class="post-image">
<img src="{{ page.featured_image }}" alt="{{ page.title }} featured image">
</div>
{% endif %}
</header>
<div class="post--body">
{{ content }}
</div>
{% if page.post_images %}
<section class="post--images">
<a href="http://bradfrost.github.com/this-is-responsive/patterns/images/fpo_landscape.png" class="box let-there-be-light">
<span class="msg">Let there be light</span>
{% responsive_image path: img/image.png alt: "Project Images" title: "Project Images"%}
</a>
</section>
{% endif %}
</article>
In my _includes folder, I had to make a include for the responsive_images gem and it looks like this
{% capture srcset %}
{% for i in resized %}
/{{ i.path }} {{ i.width }}w,
{% endfor %}
{% endcapture %}
<img src="/{{ path }}" srcset="{{ srcset | strip_newlines }} /{{ original.path }} {{ original.width }}w">
And here's my config.yml file for anyone wondering
# Welcome to Jekyll!
#
# This config file is meant for settings that affect your whole blog, values
# which you are expected to set up once and rarely need to edit after that.
# For technical reasons, this file is *NOT* reloaded automatically when you use
# 'jekyll serve'. If you change this file, please restart the server process.
# Site settings
title: Portfolio
email: test#test.com
description: > # this means to ignore newlines until "baseurl:"
baseurl: "" # the subpath of your site, e.g. /blog
url: "http://example.com" # the base hostname & protocol for your site
twitter_username: test
github_username: test
permalink: /:categories/:title
links:
- title: about
url: /about
- title: projects
url: /projects
- title: articles
url: /articles
# Build settings
markdown: kramdown
gems:
- octopress-autoprefixer
gems: [jekyll/responsive_image]
responsive_image:
# [Required]
# Path to the image template.
template: _includes/responsive-image.html
# [Optional, Default: 85]
# Quality to use when resizing images.
default_quality: 90
# [Optional, Default: []]
# An array of resize configuration objects. Each object must contain at least
# a `width` value.
sizes:
- width: 350
quality: 80
- width: 480 # [Required] How wide the resized image will be.
quality: 80 # [Optional] Overrides default_quality for this size.
- width: 800
quality: 90
- width: 1400
quality: 90
# [Optional, Default: assets/resized/%{filename}-%{width}x%{height}.%{extension}]
# The template used when generating filenames for resized images. Must be a
# relative path.
#
# Parameters available are:
# %{basename} Basename of the file (assets/some-file.jpg => some-file.jpg)
# %{filename} Basename without the extension (assets/some-file.jpg => some-file)
# %{extension} Extension of the file (assets/some-file.jpg => jpg)
# %{width} Width of the resized image
# %{height} Height of the resized image
#
output_path_format: img/resized/%{width}/%{filename}-%{width}x%{height}.%{extension}
Has anyone had this problem with the responsive images gem? I can't seem to google an answer to this. Any help would be greatly appreciated.
Jekyll responsive images is a Jekyll plugin and you cannot add your own plugins to github pages. This is a restriction by github due to security reasons.
Here is the related page on github and here is the list of plugins that are officially included by github in the github server and can be used.
You can try Picturefill instead.
In fact, you're not allowed to use most of Jekyll plugins when hosting on GitHub for security reasons.
A good way out is uploading the static site generated by Jekyll, so GitHub won't build your site, it will only display it as plain html. To do that, the only thing you need to do is pushing to GitHub the _site content only.
Another way out is using GitLab Pages instead. There you can use as many plugins as you want, as the building process is controlled by yourself through a configuration file called .gitlab-ci.yml. A full tutorial on this process is to be published soon.
The only feature GitLab.com doesn't have yet is the possibility of setting custom domain names for websites build by GitLab Pages. But it's coming soon.
Hope to have helped!
It is important to say that this is not a recommended way, but it works for me. I feel like the other answers were a bit to: No you can't - do this.
Yes you can. But as Virtua Creative suggests - you need a workaround. Especially if you are using a custom domain.
I myself had problems with the jekyll-responsive-image for resizing and lazy load on my Jekyll site.
It is not a supported gem.
Example
First if all make your _site repository a git repository.
and remove CNAME from .gitignore.
When you are finished working locally then build:
jekyll build
Afterwords add a CNAME file to your build:
touch _site/CNAME
Echo your domain into it:
echo 'www.your_domain.com' >> _site/CNAME
And then you can push to your github pages repository (also from parent).
Ekstra
Next time you can create a custom command in your bash to automate.
My .zshrc:
alias jekyll_build_cname='jekyll build && touch _site/CNAME && echo "www.instamoneyservices.de" >> _site/CNAME'
I would like to use Jekyll to create a site. not a blog. Is there a way to avoid to have the creation date specified in the url and in the page's file name?
I think that the idea behind Jekyll is brilliant, but it seems too tied to blog generation content while it could be useful also in a more general use case.
In the _config file you can change the permalink to anything you like, for example mine is
permalink: /blog/:title
As for the date you can choose your own date using the YAML front matter, again in mine i have
title: example
date: you can pick what ever date you want
What the docs say:
You configure permalinks in your _config.yml file like this:
permalink: /:categories/:year/:month/:day/:title.html
If you don’t specify any permalink setting, Jekyll uses the above pattern as the default. The permalink can also be set using a built-in permalink style:
permalink: date
Although you can specify a custom permalink pattern using template variables, Jekyll also provides the following built-in styles for convenience.
date = /:categories/:year/:month/:day/:title.html
pretty = /:categories/:year/:month/:day/:title/
ordinal = /:categories/:year/:y_day/:title.html
none = /:categories/:title.html
Source: https://jekyllrb.com/docs/permalinks/
This is the basic setting I use:
permalink: pretty
This sets pages to the pretty permalink style. Thus '/contact.md' will become '/contact/'.
How I use it for blog posts:
permalink: /blog/:title/
This makes sure the path contains the (sluggified) title.
How I use it for collections:
permalink: /desiredpath/:name/
This makes sure the path contains the filename.
If you aren't producing blog pages, you can create files in the directory structure mapping to certain URLs. Running on localhost, if your directory has the structure
- _layouts/
- config.yml
- index.html
- some_other_page.html
- some_directory/
- index.html
- some_sub_page.html
You'll have content at the following locations after jekyll has processed the files:
0.0.0.0:4000 (index.html)
0.0.0.0:4000/some_other_page.html (some_other_page.html)
0.0.0.0:4000/some_directory (some_directory/index.html)
0.0.0.0:4000/some_directory/some_sub_page.html (some_directory/some_sub_page.html)
You can also use the permalink attribute on each post to set one manually, or set a different default in config.yml Permalinks only have a small subset of variables available to use and need to be defined in every single file you want to put in a non-standard location.
This directory structure will automatically categorize your posts too. So you can have:
- some_category (defined in the yaml front matter or the _config.yml
- index.html
- _posts/
- some_post.md
- some_other_post.md
And posts will automatically have the category 'some category', and index.html will appear at 0.0.0.0:4000/some-category, with the default permalink format. The category variable is available as :category in the permalink format string.
I came across this old question while looking for a way to organize jekyll pages in a _pages directory, similarly to _posts. then access this pages without displaying the whole path in the url.
The approach that worked better for me, is to use jekyll collections as follows:
1 - Add a pages collection in _config.yml :
collections:
pages:
output: true
permalink: /:path/
2 - create a new directory named _pages (it should have the same collection name, prefixed by _)
3 - add the pages in the _pages folder, as .md or .html files starting with YAML Front Matter.
eg. /_pages/about.md will looks like:
---
layout: page
---
<!-- about page content -->
after building that, the URL of the about page will be <your-web-site>/about .
Alternatively, to display a collection name, you have to define its permalink as:
permalink: /:collection/:path/