I recently set up my new blog / portfolio site using Jekyll. The theme I customized only had the home page which was also the posts page and then an about me page.
I am trying to add a new page, projects, that will be similar to the home page, but will list out projects just like the posts are listed out on the home(index) page.
I am able to get the projects link to show in the nav bar and when I click it, it takes me to the correct URL. The rest of the template is there, but the example file that I have in the projects folder isn't showing. What am I doing wrong here?
Here is my directory tree
├── CNAME
├── CODE_OF_CONDUCT.md
├── LICENSE
├── _config.yml
├── _includes
│ ├── analytics.html
│ └── head.html
├── _layouts
│ ├── about.html
│ ├── default.html
│ ├── post.html
│ └── project.html
├── _posts
│ ├── 2017-03-09-developer-goals.md
│ ├── 2017-03-09-finding-web-dev.md
│ ├── 2017-03-09-my-experience.md
│ ├── 2017-09-16-example-content.md
│ └── 2017-09-17-jumping-into-react.md
├── _projects
│ └── 2017-03-09-developer-goals.md
├── _sass
│ ├── _base.scss
│ ├── _catalogue.scss
│ ├── _code.scss
│ ├── _layout.scss
│ ├── _pagination.scss
│ ├── _post.scss
│ ├── _syntax.scss
│ └── _variables.scss
├── _site
│ ├── 2017-03-09
│ │ ├── developer-goals.html
│ │ ├── finding-web-dev.html
│ │ └── my-experience.html
│ ├── 2017-09-16
│ │ └── example-content.html
│ ├── 2017-09-17
│ │ └── jumping-into-react.html
│ ├── CNAME
│ ├── CODE_OF_CONDUCT.md
│ ├── LICENSE
│ ├── about
│ │ └── index.html
│ ├── favicon.ai
│ ├── favicon.png
│ ├── index.html
│ ├── project
│ │ └── index.html
│ └── styles.css
├── about.md
├── favicon.ai
├── favicon.png
├── index.html
├── projects.html
└── styles.scss
Here is my projects.html file
---
layout: default
title: "Projects"
author: "Steven"
permalink: /project/
---
<div class="catalogue">
{% for project in paginator.project %}
<a href="{{ project.url | prepend: site.url }}" class="catalogue-item">
<div>
<time datetime="{{ project.date }}" class="catalogue-time">{{ project.date | date: "%B %d, %Y" }}</time>
<h1 class="catalogue-title">{{ project.title }}</h1>
<div class="catalogue-line"></div>
<p>
{{ project.content | truncatewords: 30 | strip_html }}
</p>
</div>
</a>
{% endfor %}
</div>
<div class="pagination">
{% if paginator.previous_page %}
←
{% endif %}
{% if paginator.next_page %}
→
{% endif %}
<span>{{ paginator.page }}</span>
</div>
Here is my project.html file:
---
layout: default
---
<div class="post">
<h1 class="post-title">{{ page.title }}</h1>
<div class="post-line"></div>
{{ content }}
</div>
This layout and design is super simple, but just can't figure out why this isn't working. Any help is much appreciated! Also feel free to check out the site live, stevenmills.io
Folders that start with an underscore are special for Jekyll. In this case it seems that _projects isn't a collection or something else, so it will be ignored by Jekyll.
Remove the leading underscore and add a _posts folder inside:
projects/_posts/2017-03-09-developer-goals.md
Then the 2017-03-09-developer-goals.md post would have the projects category too.
Related
I'm using Jekyll and have a src/ folder that contains my includes directory inside of here, I've recently added a sub-folder to act to hold additional pages, e.g: https://example.com/services/service but Jekyll doesn't understand how to move up one level to get to my includes folder so that I can include common templates such as my header and footer.
What am I missing?
.
└── src/
├── assets/
├── includes/
│ ├── header.html
│ └── footer.html
├── js/
├── scss/
├── services/
│ ├── service.html
│ └── compare.html
├── index.html
├── about.html
└── contact.html
My service.html page has:
{% include_relative ../includes/header.html %}
You will need to use a plugin to get this behaviour github.com/tnhu/jekyll-include-absolute-plugin
I want to change the #font-face src path in bootstrap-icons because it's not displayed in my index.html
I'm using sass and laravel-mix to compile to css.
here is my src/sass/app.scss file:
#import "~bootstrap-icons/font/bootstrap-icons";
here is my index.html file:
<i class="bi bi-archive-fill"></i>
here is my file structure :
my-app/
├── dist/
│ ├── assets/
│ │ ├── css/
│ │ │ ├── app.css
│ ├── fonts/
│ │ ├── vendor/
│ │ │ ├── bootstrap-icons/
│── src/sass/
│ ├── app.scss
├── index.html
You can overwrite the #font-face rule like this:
#import "~bootstrap-icons/font/bootstrap-icons";
#font-face {
font-family: "bootstrap-icons";
src: url("../../fonts/vendor/bootstrap-icons/bootstrap-icons.woff2?856008caa5eb66df68595e734e59580d") format("woff2"),
url("../../fonts/vendor/bootstrap-icons/bootstrap-icons.woff?856008caa5eb66df68595e734e59580d") format("woff");
}
I had a similar problem and this worked for me :)
I have a simple Jekyll web site. It displays images in web pages on the local server, but they do not appear when the site is loaded on github
E.g. in the page post01.md I have the code
This is my tree
.
├── 404.html
├── about.markdown
├── _config.yml
├── Gemfile
├── Gemfile.lock
├── index.md
├── _posts
├── _site
│ ├── 404.html
│ ├── about
│ │ └── index.html
│ ├── assets
│ │ ├── main.css
│ │ ├── main.css.map
│ │ └── minima-social-icons.svg
│ ├── feed.xml
│ ├── index.html
│ └── wx_python
│ ├── images
│ │ ├── raw_frame.png
│ ├── introduction.html
│ ├── post01.html
│ ├── post02.html
│ ├── post03.html
│ ├── post04.html
│ ├── snippets
│ │ ├── basic_frame.py
│ │ ├── basic_panel.py
│ └── wxpython_from_scratch.html
└── wx_python
├── images
│ ├── raw_frame.png
├── introduction.md
├── post01.md
├── post02.md
├── snippets
│ ├── basic_frame.py
│ ├── basic_panel.py
└── wxpython_from_scratch.md
How can I solve this?
The problem is that I was not giving Jeckyll the baseurl. The code to display the image should be
see the answer here (this seems to be a more responsive forum for Jekyll that SO)
I'm building my first website using Jekyll and I quite like the default minima theme. However, I would like to change some things about theme like background color or stuff like that...how would I do that?
I tried changing the CSS file in the /_site/assets folder, but even though it does change the file and the webiste looks different with the Jekyll preview, it doesn't change it permanently because I guess it's not building the website with a new CSS file.
My directory structure is like this:
├── 404.html
├── about.md
├── assets
│ └── js
│ └── main.js
├── _config.yml
├── Gemfile
├── Gemfile.lock
├── index.md
├── _posts
│ ├── 2018-02-25-animosity.md
│ ├── 2018-02-25-test.html
│ └── main.js
└── _site
├── 404.html
├── about
│ └── index.html
├── assets
│ ├── js
│ │ └── main.js
│ ├── main.css
│ └── minima-social-icons.svg
├── feed.xml
├── index.html
└── jekyll
└── update
└── 2018
└── 02
└── 25
├── animosity.html
└── test.html
You said in a deleted answer that you are using the Minima theme as a gem.
In this case, it's possible to "override" single files by creating a modified copy of them in the right place in your folder structure.
See the Jekyll docs:
Overriding theme defaults
For example, to override main.css (shown in your directory structure under _site/assets/main.css, you would need to create a copy of that file here:
├── 404.html
├── about.md
├── assets
│ ├── js
│ │ └── main.js
│ └── main.css <-- HERE
├── _config.yml
├── Gemfile
├── Gemfile.lock
├── index.md
├── _posts
│ ├── 2018-02-25-animosity.md
│ ├── 2018-02-25-test.html
│ └── main.js
└── _site
├── ... <-- NOT HERE
Note: Do NOT change anything in the _site directory, because that will be deleted and re-created each time you build your page!
Any template changes have to be made in the main directory.
When I include a file with the .md extension in my Jekyll project, the markdown just shows up as plain text, totally unformatted, when deployed to github pages which is my target, and locally.
I think I have faithfully followed the directions in these guides, but must have missed something:
http://jekyllrb.com/docs/configuration/
https://help.github.com/articles/using-jekyll-with-pages
I have tried not including any markdown directives in _config.yml, thinking that jekyll would know what to do anyway. Out of frustration I started adding directives. The result is always exactly the same: unformatted markdown appearing as plain text.
Here's my _config.yml:
markdown: kramdown
markdown_ext: md
kramdown:
input: GFM
kramdown:
auto_ids: true
footnote_nr: 1
entity_output: as_char
toc_levels: 1..6
exclude: ['myblog.sublime-project','myblog.sublime-workspace']
safe: true
lsi: false
pygments: true
source: .
title: My blog Title
tagline: Some little witty quirky phrase
Here is what my directory structure looks like:
├── _data
├── _drafts
├── _includes
├── _layouts
├── _posts
├── _site
│ ├── 2011
│ │ └── 01
│ │ └── 02
│ ├── 2014
│ │ ├── 02
│ │ │ └── 15
│ │ └── 03
│ │ ├── 03
│ │ └── 07
│ ├── assets
│ │ ├── css
│ │ ├── images
│ │ └── js
│ └── images
├── assets
│ ├── css
│ ├── images
│ └── js
└── images
and in _posts I have a post that ends with .md
I have figured out the issue. It boils down to using these handlebars to render content:
{{ content }}
rather than these
{{ page.content }}
...which is confusing, because the only way to access other page variables is with the page namespace:
{{ page.blurb }}