I've recently started using GitHub pages and I'm facing the following issue. As you can see in my repository, I have a _posts to store my blog markdowns. I have used the naming convention of YYYY-MM-DD-title-of-my-post.md.
Now, as you can see with 2017-12-25-shivang-bhatt-site-launched.md, the content inside is as follows:
---
layout: post
title: "Shivang Bhatt, Launches Site"
date: 2017-12-25
---
Well...some text.
Now for the layout part of this, my _layouts contains a post.html with the following content:
---
layout: default
---
<h1>{{ page.title }}</h1>
<p class="meta">{{ page.date | date_to_string }}</p>
<div class="post">
{{ content }}
</div>
The issue I am facing is this. The URL which should host this post page, http://s-bhatt.github.io/2017/12/25/shivang-bhatt-site-launched, is giving a 404 - File not found.
I would be extremely grateful for any help or pointers regarding this issue.
In your _config.yml you have set the permalink:
permalink: /post/:year/:month/:day/:title
so following the filename convention for posts, 2017-12-25-shivang-bhatt-site-launched.md will be at http://s-bhatt.github.io/post/2017/12/25/shivang-bhatt-site-launched, that is, inside the post folder.
If you want to make it work with the url you tried, just remove post from permalink like:
permalink: /:year/:month/:day/:title
The right address is
http://s-bhatt.github.io/post/2017/12/25/shivang-bhatt-site-launched
Note /post in the middle of it.
Related
I'm making a site using this theme: Github repo; theme demo.
The theme is built with the blog feed on the homepage (index.html). What I would like to do instead is:
make a static homepage (i.e. no blog feed on the homepage), and
have the blog feed live on a separate page called "Blog", with the link "/blog" or "/blog.html".
The code for the blog feed lives in _includes/blog.html and is included in the home layout using {% include blog.html %}.
What I've tried
changed the layout of index.html to a static layout like page, and created a new page in the root called blog.html with the layout home - this succeeded in creating a static homepage, but the blog page yields a home-like header but no blog feed (essentially a page with no content).
created a new page in the root called blog.html with the layout default, and pasted the content of the home layout (including {% include blog.html %}) into that page - this yielded the same result as above.
created a new layout called blog, which is a copy of the current home layout. I deleted the line {% include blog.html %} from the home layout. Then I gave index.html the home layout and created a new page in the root called blog.html with the layout blog. This yielded the same result as above.
In short, it seems like the blog feed isn't able to generate in any file other than index.html, and I haven't been able to figure out why. Is it something I'm missing in the theme's configuration? Apologies if this turns out to be a dumb question - I'm rather new to this. Thank you for any help you can give me!
EDIT: Turns out it was an issue with the paginator, which by default paginates from home.
The index.html uses the home layout:
---
layout: home
---
This lives in _layouts/home.html and contains a header and includes blog.html. It looks like this:
---
layout: default
---
<div class="home">
<div id="main" class="call-out"
style="background-image: url('{{ site.header_feature_image | relative_url }}')">
<h1> {{ site.header_text | default: "Change <code>header_text</code> in <code>_config.yml</code>"}} </h1>
</div>
{% include blog.html %}
</div>
The blog.html file loops over all (blog) posts:
<div class="posts">
{% for post in paginator.posts %}
...
To solve your issue, you need to define your own home page as an include like this:
Create your-custom-homepage.html with html of your choice.
Include it in home.html as {% include your-custom-homepage.html %} instead of {% include blog.html %}. Just replace the line in _layouts/home.html.
Then it will contain the header and your content.
The Jekyll documentation, e.g. https://jekyllrb.com/docs/step-by-step/04-layouts/ and https://jekyllrb.com/docs/includes/ will hopefully explain the details.
Big thanks to anyone who looks at this! I think the question is straightforward. It is only long because I wanted to be very thorough/ well-documented. I have taken the following example code from the jekyll documentation and edited it only so that I can find it with a permalink:
---
food: Pizza
permalink: "/pizza"
---
<h1>{{ page.food }}</h1>
When I run jekyll serve, the variable is outputted as it should be, but it has no layout. When I try to add a layout that I wrote to the page, the variable no longer outputs, as seen here.
Ultimately, I want to write an archive page that loops through categories, exactly like this code in the documentation:
{% for category in site.categories %}
<h3>{{ category[0] }}</h3>
<ul>
{% for post in category[1] %}
<li>{{ post.title }}</li>
{% endfor %}
</ul>
{% endfor %}
But, because the liquid variables are not working, I cannot make the archive without either putting in in the _layouts directory or manually copy-pasting my layout to the archive page.
Sorry if I'm coming across as a jekyll newbie (I am) or if the answer is in the docs somewhere and I could not find it, but here are my questions:
Why is this behavior happening? Is it something about how jekyll works or is it my layout that is causing this?
What would be the best practice for writing the archive/ correcting this error?
The github repository for this entire project is here
It looks like you are using the wrong liquid tag for trying to get the content. When injecting the page content, use {{ content }} not {{ page.content }}. You can see an example in the docs.
Looking at your includes for post_body.html and body.html, you just need to fix the above and it should work.
I have a Jekyll project setup using multiple collections to group documents together. My _config.yml looks like this:
collections:
course001:
output: true
title: "Theme structure"
relative_url: "/theme-structure" # The subpath of the the site,
permalink: /theme-structure/:name
The directory structure of the course001 collection looks like this:
course001/
index.md
figures/
figure01.jpg
The the generated HTML looks like this:
_site/
figure01.jpg
theme-structure/
index.html
Instead of the expected:
_site/
theme-structure/
index.html
figure01.jpg
Why does the image appear in the site root folder? I do not want the images to appear in the root folder due to potential for name collision. This is only a problem for images, not documents which end up in the expected place.
Thanks for any help!
I don't know if this it's what you really looking for. Anyway, I propose you a new structure for your project supposing that you are going to create a lot of courses each with its own lectures. If you have also sub-lectures the code is easy to expand and handle them.
The first thing is your _config.yml file. You should create two collections for courses and lectures (unfortunately Jekyll doesn't handle sub-collections).
collections:
courses:
output: true
lectures:
output: true
You have to create both _courses and _lectures folders.
In the _lecture folder you should put the markdown files of your lectures. Each lecture should have a tag for the course it belongs to. I also add a tag for the lecture to facilitate the handling of paths. This is an example of a lecture file with an image.
---
layout: lecture
title: My first lecture
course: 001
lecture: my-first-lecture
---
This is my first lecture!!
![fish][fish]
[fish]: assets/img/{{page.lecture}}/fish.png
As you can see you need a folder assets in your _lecture folder. You could use the file lecture.html in your _layout folder to contain your template. The following one is just an example and basically is the same as a page layout.
---
layout: default
---
<article class="post">
<header class="post-header">
<h1 class="post-title">{{ page.title | escape }}</h1>
</header>
<div class="post-content">
{{ content }}
</div>
</article>
Now you need to group them by courses. Unfortunately, as I previously stated, Jekyll doesn't handle nested collection so we check the tag course in each lecture to see what are the lecture in each course. Thus if you want to type a list of lectures at the beginning of each course page then you should have a file _layout/course.html similar to
---
layout: default
---
<article class="post">
<header class="post-header">
<h1 class="post-title">{{ page.title | escape }}</h1>
</header>
<div class="post-content">
<ol>
{% for lecture in site.lectures %}
{% if lecture.course == page.course %}
<li>{{lecture.title}}</li>
{% endif %}
{% endfor %}
</ol>
{{ content }}
</div>
</article>
A typical markdown file for a course should be stored in _courses and will be similar to
---
layout: course
title: My first course
course: 001
---
This is my first course!!
The only thing left is a page to show the list of your courses. You could create a coursed.md file in your project folder with this content.
---
layout: page
title: Courses
permalink: /courses/
---
These are my courses:
<ol>
{% for course in site.courses %}
<li>{{course.title}}</li>
{% endfor %}
</ol>
I know that this probably is more than what you asked in your question and you still wonder why the strange behavior. I think that this is due to the fact that you should store the files that you want in your built site in an assets folder. This is the only way (I think, but maybe I'm wrong). I'm not referring only to the assets folder in your main directory but also to the assets folders in your collection's directories.
so I just started working with Jekyll and GitHub-Pages so I can run my own portfolio website. Since making things pretty is a weak point of mine, I picked up a Jekyll version of the HTML5UP Helios Template to modify for my purposes. Here is the current website (work in progress I know)
I decided to make my project pages each into posts, such that it'd be easy to add a new one if need be; each post would also have the left sidebar layout as its template, which you can see on the nav-bar.
I thought it would be easy enough to just link the markdown files to their own pages, and just use the template. Here is an example of what I was trying to do with one of the "carousel" posts:
---
layout: left-Sidebar
title: C++ Big Int Class
desc: This is a sample post that is added under the "desc" part of the YAML.
img: pic01.jpg
categories: carousel
---
and here is where I link it in the carousel:
{% for post in site.categories.carousel %}
<article>
<img src="images/{{ post.img }}" alt="" />
<header>
<h3>{{ post.title }}</h3>
</header>
<p>{{ post.desc }}</p>
</article>
{% endfor %}
now I'd think that that would work, however I instead get a post that looks like this: (I don't have enough reputation to post more than two links, so you can find it by clicking the carousel link called "C++ Big Int Class")
If anyone could tell me what is wrong (as well as any other errors you may find I'm new to this) that would be very appreciated.
I'd post the file tree structure, but it's way to large, so if you'd like to see the other files, you can check them out in my Github repo here
Pages are losing the style because you are including css and js with relative paths, e.g.:
in https://joe-mccann.github.io/carousel/2015/02/01/carousel1.html
<script src="js/jquery.min.js"></script>
That script would be expected to be at https://joe-mccann.github.io/carousel/2015/02/01/js/jquery.min.js.
To fix it, include them with the full path using this filter absolute_url:
<script src="{{ 'js/jquery.min.js' | absolute_url }}"></script>
I am working on github pages with jekyll. I want to put the about me on my homepage by default.
I've searched a lot but found little help for this demand.
One easy method is to put the about.md file in the _posts directory with the first date. Then, when Jekyll indexes _posts, you can always assume that site.posts.first is the about.md.
Some sample code below:
---
layout: default
---
<section class="main-content">
{% assign post = site.posts.first %}
{% assign content = post.content %}
<article class="module color-3">
{{ content }}
</article>
</section>