I'm trying to set a site wide layout (a header and footer) to my Jekyll project to my config.yml file to no success. I've looked through the documentation and followed what it has said. Why is this not working?
Config.yml
collections:
projects:
output: true
permalink: /:name
defaults:
- scope:
path: ""
values:
layout: "default"
Just having a file named "default"[.html/.md] in the _layouts folder should act as the site wide default layout page. Then the other layout files, if you have any, can inherit the default layout by adding the layout yaml front matter to them.
default.html in _layouts
<!-- default.html -->
{% include header.html %}
{{ content }}
{% include footer.html %}
other layout templates in _layouts:
<!-- _ projects_layout -->
---
layout: default
---
Related
Is there a way to configure my files such that I can have the following folder structure map to the following URL structure?
/
index.html -> www.site.com
about.html -> www.site.com/about
contact.html -> www.site.com/contact
This is a very simple site with just a few pages so it'd be a nice way for me to keep the folder structure very clean and simple.
In about.html use the following permalink
---
title: My about title
permalink: /about/
---
And in contact.html:
---
title: My contact title
permalink: /contact/
---
To remove trailing slashes you need to configure the web server
Then you can create links hardcoding the URL or using the link tag:
[Link to a page]({{ site.baseurl }}{% link about.html %})
#Or
About
Another way is to create the following file structure:
├── index.html
├── about
│ └── index.html
└── contact
└── index.html
Then be sure your permalinks do not include the .html extension in _configu.yml and it will automatically generate the URLs.
Add the following to your _config.yml file:
permalink: /:title/
This will allow you to add a title to the frontmatter of posts/pages. The fallback for this is the filename, sans file extension.
For more:
https://jekyllrb.com/docs/permalinks/
http://jekyll.tips/jekyll-casts/permalinks/
I am attempting to setup a small blog using Jekyll. My work so far is as follows.
Setup a Github pages repository
Cloned the repo locally
Installed Ruby vs 2 and the sdk (windows)
Installed jekyll
'serve' the local website.
Validated that I could view my website localhost:4000
Everything worked fine however the liquid syntax is not working as expected. All syntax is output as plane text. I am not sure how to continue. This error happens both locally as well as on my github hosted page.
Here is my index.html file
<!DOCTYPE html>
<html lang="en-us">
<head>
{% include meta %}{{ site.time | date_to_xmlschema }}
</head>
<body>
{% include header.html %}
{% include header.html %}
{% include header.html %}
{% foo %}
{{ foo }}
<section class="main-content">
{% include footer.html %}
</section>
{% include scripts.html %}
</body>
</html>
My _config.yml has foo defined. =(
If you want Jekyll to process your page, you must add a Front matter to your page (see dedicated page in Jekyll documentation).
The minimum front matter is an empty one. That means that your page will use default configuration for layout, etc ..
---
# this is an empty front matter
---
Your content here
I have used collections in my Jekyll website for GitHub Pages. I'm trying to get Jekyll to see the Markdown files inside the collection folder, _projects.
Here's a rundown of the file structure:
root
│
├─ _projects
│ │
│ ├─ project_1.md
│ └─ project_2.md
│
└─ /*Rest of the Jekyll folders and files, _posts, _includes, etc.*/
At the moment, I realized that you must put the Markdown files in the root, so Jekyll can be able to see and parse the files to display them when after you clicked a link that points to them via permalinks. But it cannot "see" the Markdown files if the files are not in the root folder, after testing quite a while.
Is there a way to let Jekyll see and parse files inside the subfolder, _projects, just like how it can see files in the root folder? Maybe I need to set something up in the _config.yml, I guess?
Thanks in advance.
Edit : My first answer was completely wrong. I was talking
_config.yml
collections:
project:
output: true
_project/project_1.md
---
layout: project
title: project
---
## Yo!
Project in **strong** yo `inline code`
some code
yolo !
_layouts/project.html
<!DOCTYPE html>
<html>
{% include head.html %}
<body>
{% include header.html %}
<div class="page-content">
<div class="wrapper">
{{ content }}
</div>
</div>
{% include footer.html %}
</body>
</html>
You now have a project/project_1.html page.
No need to use include: parameter in order to Jekyll to see collection folder or subfolder.
exclude: parameter can be used to ignore a subfolder in the collection.
End Edit
Old answer (nothing to do with collection)
Your _project folder is ignored by Jekyll, just like any underscored folder
To force Jekyll to parse files in this folder, in your _config.yml you can add :
include:
- _project
jekyll build and all is good !
The OP tom-mai78101 comments the the article "Jekyll Blog From a Subdirectory" from Hemanth.HM
has confirmed my guesses that subdirectories are only defined by the permalinks in the Markdown files, and not through the folders within the repository.
I quickly wrote a code snippet, and created a few Markdown files shown here, I am now able to create webpages using Markdown files nested within the _posts folder.
In short, there's no need to use collections in the _config.yml, and just use the default _posts.
It would've been better if there is a way to change the default permalink setup in the _config.yml.
The question "Jekyll not generating pages in subfolders" could be relevant, in order to make some pages being generated in a subfolder.
Or you could use a different baseurl. (Jekyll 1.0+)
Or use the _include folder (see "Jekyll paginate blog as subdirectory")
Or, The article "Running Your Jekyll Blog from a Subdirectory" (from Josh Branchaud) seems to address your situation:
Solution 1
Create a directory called blog in your public html directory (that is, in the directory that your domain points to).
Assuming you are using some sort of deployment scheme (GitHub pages or deployment methods), you need to have that deployment scheme tell Jekyll to deploy to the blog directory instead of the directory it is currently using.
(in your case blog would be projects)
Solution 2
Start by creating a directory locally where you have your Jekyll blog setup.
This directory will sit along side _posts, _site, css, etc.
This is only going to hold non-post files such as index.html.
The blog posts will still go in the _posts directory.
Next, we are going to tell Jekyll that we want it to take our blog posts and put them inside a directory called blog when it generates them.
This can be done by adding a permalink setting to the _config.yml file.
Add a line like this to the top of the file:
permalink: /blog/:categories/:year/:month/:day/:title.html.
The default (which you have probably been using) puts posts in a directory structure starting with the category, followed by the date, and finally with the title of the blog post as the name of the html file.
Which, spelled out would be
/:categories/:year/:month/:day/:title.html.
Does that look familiar? Sure does. It is what we have used above, sans the /blog part.
We are essentially emulating the default directory structure and while adding our blog directory at the beginning.
Lastly, you are going to want to add an index.html file to the blog directory that you created.
This way, when a person goes to mydomain.com/blog/ they can see what blog posts you have to offer.
This index page is going to more or less mirror exactly what you had setup originally for listing your blog posts.
I am building an Octopress blog and I am implementing an alternative search implementation, lunr-search.
This requires an asset pipeline implementation for Jekyll.
My assets, javascripts and CSSs are compiled and combined correctly, but my images folder is not copied to the public folder.
EDIT with further info:
I have my assets under /source/_assets/javascripts, /source/_assets/stylesheets and /source/_assets/images.
The relevant part in _config.yml:
assets:
dirname: assets
baseurl: /assets/
sources:
- _assets/javascripts
- _assets/jwplayer
- _assets/stylesheets
- _assets/images
compress:
js:
css:
cachebust: hard
gzip: [ text/css, application/javascript ]
My compiled and combined assets are generated as expected under /public/assets, under which I can find the app.js and screen.css, however there is no images folder.
Thanks!!
Have you rewritten your source to use Jekyll-Assets to render image paths? In my experience, Jekyll-Assets needs to know you'll be using an asset before it will copy it to the output directory. It will know when you use a corresponding Liquid tag or filter.
According to the Jekyll-Assets readme, URLs for assets that are neither scripts nor stylesheets may be included with the following Liquid tag:
{% asset_path logo.png %}
Additionally, the following Liquid filter is available:
{{ 'logo.png' | asset_path }}: Returns resulting URL for logo.png
Both examples come from the URL above. So in this case the following two lines would be equivalent:
<img src="{% asset_path logo.png %}" alt="Logo">
<img src="{{ 'logo.png' | asset_path }}" alt="Logo">
If you are indeed already doing this, relevant HTML/Liquid source code may prove helpful.
This did the trick for me
{% img /images/logo.png %}
So I setup a Jekyll page, I created a few demo posts, got a navigation between them working and styled it to my liking and then went 'jekyll' in the root.
This generated a _site folder in my root. Awesome.
But when I open this folder in browser, and try to navigate between posts, it attempts to go to file:///2013/02/01/post-title.html instead of the actual location, which would be
file:///blablabla/_site/2013/02/01/post-title.html
I've been looking at Permalinks options in the yml-file, but I havent found a working solution yet.
I use:
<a href="{{page.previous.url}}" title="Previous Post: {{page.previous.title}}">
{{page.previous.title}}</a>
To navigate between posts, and:
{% for post in site.posts limit: 5 %}
{{ post.title }}
{% endfor %}
to link the posts from the main page.
From my config.yml:
baseurl: /
url: http://localhost:5000
source: .
destination: ./_site
permalink: /writing/
Taking any hints here!
Thanks
So what I did was:
In my _config.yml, I added this:
baseurl: /
url: http://some.link.he.re/~nameofdir/big_blog
And for assets like CSS/JS I simply used {{ site.url }} to pre-fix all my actual assets.:
<link href="{{ site.url }}/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" />
For navigation I did:
<a href="**{{site.url}}**{{page.previous.url}}" title="Previous Post:
{{page.previous.title}}"> {{page.previous.title}}</a>
In my post.html layout, I added: in the , I am not sure if this is necessary though, but for now it will linger.
For all static pages I added:
<li>Journal</li>
And finally, even though it's the same thing all over, for linking posts:
{{ post.title }}
So {{ site.url }} is the same as what you write in _config.yml at url: xxxx,
And if you're hosting your page on a server that has odd directory structure (like my university for example), you need to give url: the value of the actual root catalog, that means include the blog-folder-name as the last folder in the url. Then just prefix all your links, static or jekyll-generated by {{ site.url }} and you should be cool!