I am trying to setup my site (https://ashishrao7.github.io/ashish-rao/) using github pages and so far the experience has been good except for one small thing. An additional tile appears on the home page and the source of the problem is that the css file assets/css/main.css gets indexed as a page for some reason. I am using a modified version of the jekyll theme named Forty https://andrewbanchich.gitlab.io/forty-jekyll-theme/
I could temporarily solve this problem locally by going to '_site' folder (not included in the repo because it gets built) and deleted the code associated with the that unwanted tile. However, it would reappear every-time I rebuild my site and I was looking for a more permanent solution. Upon some debugging, I figured out that this unnecessarily indexed tile was getting detected as a page for some reason in _includes\tiles.html:
{% for page in site.pages limit:site.tiles-count %}
However, I am stuck now I don't know how to fix this issue. The annoying tile is shown in the figure below.
Upon clicking, it takes the viewer to the page https://ashishrao7.github.io/ashish-rao/assets/css/main.css which is not what I intended. Here is the link to the github repo that hosts the site https://github.com/ashishrao7/ashish-rao.
I can definitely reproduce, but it looks to be the expected behaviour of site.pages.
site.pages – A list of all Pages.
Source: https://jekyllrb.com/docs/variables/#site-variables
This said, on the same page listing all the site variables, there is an alternative that you could use:
site.html_files – A subset of site.static_files listing those which end in .html.
So you just need to change your loop from
{% for page in site.pages %}
{{ page.title }}
{% endfor %}
to
{% for page in site.html_files %}
{{ page.title }}
{% endfor %}
Related
I am working on a project called learning logs in the book python crash course that should be 2nd edition, chapter 18. My IDE is pycharm.
I have created a template I call index.html that inherits from a base template called base.html. Running index.html on any browser just displays the code exactly as it is and not the what the output should be. It doesn't seem to be an IDE related problem, I used the exact same code using sublime text and notepad. What am I not doing right.
base.html
<p>
➊ Learning Log
</p>
➋ {% block content %}{% endblock content %}
index.html
➊ {% extends "learning_logs/base.html" %}
➋ {% block content %}
<p>Learning Log helps you keep track of your learning, for any topic
you're
learning about.</p>
➌ {% endblock content %}
tried using different IDEs, copy pasting the code from the book.
I am using Jekyll to make a personal website. I downloaded a Bootstrap template and started changing details around. I changed the config.yml file as well as the index.html file.
When I write bundle exec jekyll serve into the command line, the server starts running and I can see a demo of what my website will look like once it is being hosted online.
The changes I made to the config.yml file persist, but those I made to the index.html file do not. When I look at the index.html file, every single change I made is reverted back to the original. It's almost like the index.html gets regenerated to a default version whenever I run the server.
The same thing happens when I try to change the default image files within the project. The new images that I placed in the img folder get deleted and the old ones that I removed get regenerated.
I googled around but found no helpful answer (deleting my browser cache does not solve the issue). Anyone know what's going on?
Edit: I should add a piece of information that may be the cause of this issue. I have two index.html files in my website. One of them is in the root folder and it simply redirects to "layout: default". The other one is in the _site folder. The latter is the one I tried to change to no avail.
Default file:
<!DOCTYPE html>
<html>
{% include head.html %}
<body id="page-top" class="index">
{% include nav.html %}
{% include header.html %}
{% include portfolio_grid.html %}
{% include about.html %}
{% if site.contact == "static" %}
{% include contact_static.html %}
{% elsif site.contact == "disqus" %}
{% include contact_disqus.html %}
{% else %}
{% include contact.html %}
{% endif %}
{% include footer.html %}
{% include modals.html %}
{% include js.html %}
</body>
</html>
Every time jekyll serve or jekyll build is executed, the default behaviour is to regenerate all your site into the _site folder.
To make changes to your index.html root file, you need to edit the one outside the _site folder (probably named /index.md or /index.html) because the content of_site` are built in each run.
I am using Github Pages and Jekyll. I added the Disqus configuration but it could not appear on the posts.
I added disqus.html in the _includes directory. and added my disqus shortname into _config.yml.
Called {% include disqus.html %} from _layout/post.html.
Tried the comment:true option in the markdown files as well.
You may view my work at:
https://github.com/motleis/weekActivities
Thank you for your help.
EDIT: So far, I tried to converge the problem and noticed that {% if site.disqus %} is not evaluated to true. The only thing I can think of is filling the 'disqus' parameter in the _config.yml.
Any other things?
Finally I figured this out!!
"put your short-name inside quotation marks!"
As far as I gather, Jekyll parses an included page through the templating stage if and only if it finds a YAML header / front matter. Otherwise it just copies it. Is there a way to force Jekyll to parse an included file without a front matter?
The rule of thumb is that Jekyll will not parse files without front matter.
However... there is a work-around. You can create an index.html file in the _includes directory without front matter. The Liquid in this file will be interpreted by Jekyll. You can render this include anywhere using:
{% include index.html %}
This solution is perfect for rendering HTML pages within a Jekyll context (without having the front matter requirement), especially when you want to reuse them. This could be useful for rendering a preview AND showing the code in a code block on another page. The include could be written in a layout file or in an index.md file.
Note that the included filename can be a variable (https://jekyllrb.com/docs/includes/):
{% if page.my_variable %}
{% include {{ page.my_variable }} %}
{% endif %}
Also note that if you want to show Liquid examples in this code, you should use:
{% raw %} ... Liquid example ... {% endraw %}
If you want a solution work-around for your specific situation, you should share your repository and explain your use case.
I've copied the Jekyll plugin to generate Category pages using an official source (https://github.com/recurser/jekyll-plugins) into my Github repository and it doesn't work, I keep on getting a 404 page. That said if I test on my local machine both in the Jekyll server and in the _site directory it works. Any ideas?
GitHub Pages does not support most plug-ins. They don't want anything crazy going on behind the scenes.
Here's how I do categories with Github Pages. It is not wholly automatic, as it requires a separate .html file for each category you want to set up. But it works without any plugins or wizardry on Github Pages.
Create a categoryname.html file in your root directory. For example, hardware.html for a Hardware category. Run a for loop on all of the site's posts and check the post.category
<div class="posts">
{% for post in site.posts %}
{% assign author = site.authors[post.author] %}
{{ author.display_name }}
{% if post.category == 'Hardware' %}
<div class="post">
<h1 class="post-title">
{{ post.title }}
</h1>
{{ post.content }}
</div>
{% endif %}
{% endfor %}
</div>
In your posts, you would use the YAML header to add the category to the post. Like the code below:
---
layout: post
title: How We Built a Hardware Product
author: Author Name
category: Hardware
---
That should do it. It'll create a /hardware/ page that will include all of your posts with the Hardware category. Make sure you're case-sensitive on your YAML and category names (hardware != Hardware and category != Category).
Another possible solution:
If you don't want to generate your site locally and push the created HTML files to GitHub (like David Jacquel suggested in his answer), you can create one single page with all categories.
Check out this answer:
An easy way to support tags in a jekyll blog
(Note: I'm using tags instead of categories there, but both work exactly the same way in Jekyll as far as I know. So you can just take my code and replace site.tags by site.categories)
I admit, one page per category looks nicer, but my solution has the advantage that it works on Github Pages (because it's just vanilla Liquid, no plugin).
EDIT:
In the meantime, I wrote a blog post how to make separate pages per category without using a plugin:
Separate pages per tag/category with Jekyll (without plugins)
Github pages only support a small number of Jekyll plugins.
If you want to use your plugins, you'll have to generate your site locally and push it on github pages. If you do this, add a .nojekyll file at the root of your repository to tell github to not process you files.