I'm hosting a personal site using GitHub Pages.
I'd like to reduce HTML code duplication by taking advantage of GitHub's builtin Jekyll templating functionality. For instance, putting footer.html into a /_includes directory for reuse on every future page.
I also happen to enjoy organising my files, so I put my 'real' index.html inside a /html sub-directory, along with all my other html files. GitHub pages doesn't like this, so I have used a dummy index.html in the root directory so that the site will be loaded by GitHub.
Whenever I use:
---
---
at the top of a .html file within my /html directory, they rather strangely get rendered as text at the top. In fact, so do my {% includes foo.html %} calls.
Why is this happening?
If you are using the 'dummy' index.html workaround, you will also need to enable Liquid in the root there by placing:
---
---
at the top of your dummy index.html:
index.html (dummy) <- double '---' here
html/
├─ index.html
├─ foo.html <- double '---' here to use {% includes bah.html %}
_includes/
├─ bah.html
This question helped the penny drop.
Related
I'm trying to learn how to use Github pages, so I've created my first page and added the Jekyll cayman theme to it.
Before adding the theme I could just use an index.html file to render my main page. However, now that I have added the cayman theme, the index.html file is not read anymore and only the index.md file is read.
Resulting github page:
https://scinana.github.io/hellopages/
Code:
https://github.com/scinana/hellopages
Why am I forced to add an index.md file?
What if I want to keep using html files directly instead of an md file? Can I use html files while using a Jekyll theme?
You can use an html file. Just add a front matter and insert the default layout.
Here's an example:
---
layout: default
---
<!doctype html>
<html>
<head>
<title>This is the title of the webpage!</title>
</head>
<body>
<p>This is an example paragraph. Anything in the <strong>body</strong> tag will appear on the page, just like this <strong>p</strong> tag and its contents.</p>
</body>
</html>
From https://jekyllrb.com/docs/step-by-step/04-layouts/:
Layouts are templates that can be used by any page in your site and wrap around page content. They are stored in a directory called _layouts.
From https://jekyllrb.com/docs/structure/:
index.html or index.md and other HTML, Markdown files
Provided that the file has a front matter section, it will be transformed by Jekyll. The same will happen for any .html, .markdown, .md, or .textile file in your site’s root directory or directories not listed above.
I try to create a bunch of local HTML files that should serve as a documentation for some software. No webserver should be involved, just HTML files viewed by a webbrowser. I use hugo to create the pages, but I have problems linking to the main page (index.html).
My config.toml is this:
#baseURL = "http://example.com"
languageCode = "en-us"
title = "foo"
theme = "mytheme"
relativeURLs = true
canonifyURLs = false
uglyURLs = true
and my main page is _index.md in the root folder.
How do I create a shortcode or whatever that creates a relative link to the index.html in the root folder (content folder in hugo). The index.html page gets created, but I have not succeeded to create a link to that page. Of course I could hard code the link, but this is not what I want.
The sample repository is at https://github.com/pgundlach/hugoexample/ .
I have tried a shortcode with a definition like {{ with .Site.GetPage "section" "_index.md" }}{{ .Relpermalink }}{{ end}} but this didn't work.
Disclosure: This is actually a question I have tried on https://discourse.gohugo.io/ but without any luck. So the question might be "stupid" or I am missing something obvious.
I am also a beginner. However, I think that the index.md file should be in your content directory. Then you should create an index.html file in your layouts directory for rendering the .md file.
Or am I missing what you are trying to do here?
Docs about the directory structure: https://gohugo.io/getting-started/directory-structure/
I have a static html file with animations and different html5 tags. Is it possible to include this file (will all resources, images, js) in a jekyl blog post/page. More specifically, from .md file can I use include tag to use my static html5 file. I am very new to both jekyl, markdown. thnx
An HTML file can be included in Jekyll like this:
{% include note.html %}
And it will load the file located at _includes/note.html. Or you can use relative directories to the one that is calling the include, for example, consider having index.md and we want to include another html file inside it called note.html:
Folder structure:
.
├── note.html
└── index.md
Then in index.md:
---
title: example
---
{% include_relative note.html %}
And when you access index.md it will display the content of note.html.
Markdown doesn't allow all html tags, you can take a look here to see which html tags are allowed and how to type them in markdown
for animations if you can wrap your animation in a gif then you can use it in markdown like so
and if you want to add a still image like so
md file with a link to Folder/file.md
When jekyll generates the index the link to the file is still folder/file.md and so doesn't connect to the generated file.html. Can jekyll replace links in markdown with their corresponding html files?
I really want to to maintain my folder structure (7 or so subfolders, each with 3 markdown files).
The answer since December 2016 is to use the jekyll-relative-links plugin.
It is a white-listed plugin if you are hosting on GitHub pages so you probably already have it.
If you are not using GitHub pages you will need the following installation instructions (from the README):
1.Add the following to your site's Gemfile:
gem 'jekyll-relative-links'
2.Add the following to your site's config file:
gems:
- jekyll-relative-links
The tag you're looking for is {% link %} and it arrived in 2016.
If you had {% link _funkyCollection/banjo.md %} it would generate the right path to the output file funkyCollection/banjo.html, or funkyCollection/banjo/index.html, or whatever, wherever it ends up being.
This is what I did to solve this problem with jekyll 3.8.5.
For link in root directory: /file.md
---
layout: page
title: Root File
permalink: /file/
---
This file is in root directory.
For link in subdirectory: /folder/file.md
---
layout: page
title: SubDir File
permalink: /folder/file/
---
This file is in sub-directory.
Now to link these file:
[Root File]({{site.baseurl}}/file/))
[Sub Dir File]({{site.baseurl}}/folder/file/)
Hope this helps someone.
i've written a simple plugin to solve this. put this in _plugins/, and make links refer to the *.md files (so github rendering linking works); if you build it with jekyll (when you are able to run plugins) the links are changed to *.html. since github doesn't run plugins, this isn't applied.
module ChangeLocalMdLinksToHtml
class Generator < Jekyll::Generator
def generate(site)
site.pages.each { |p| rewrite_links(site, p) }
end
def rewrite_links(site, page)
page.content = page.content.gsub(/(\[[^\]]*\]\([^:\)]*)\.md\)/, '\1.html)')
end
end
end
it's not perfect (i'm sure you could fool the regex) but it has been good enough for my purpose.
A Folder/file.md page will result in creation of a _site/Folder/file.html page.
So when your link to this page it's [Link to page]({{site.baseurl}}/Folder/file.html) not [Link to page]({{site.baseurl}}/Folder/file.md).
Jekyll will never rewrite file.md to file.html in url. So you have to set your links targets yourself to the resulting page.url which is usually a html file but can be css, je, json, ...
If you use permalink: /folder/folder/ in any file.md, it will generate a /folder/folder/index.html file which can be reached with [Link to page]({{site.baseurl}}/folder/folder/)
I've run into this and written a basic Jekyll/Kramdown plugin. It's less likely to break than the regular expression approach.
As long as your link doesn't start with http:// or something like it, and ends with .md, it will convert links to their lowercased and hyphenated names.
Of course, you could always modify the behavior to fit your needs.
Recently I've been working on a project in Django that uses a site-wide CSS layout, so I decided that each template (in this case a template in /projects/index.html) used would extend a base file containing the header, footer, javascript, etc. called base.html.
The problem is that my directory structure looks like so:
.
├── static
│ └── base.html
├── templates
│ └── projects
│ └── index.html
And, as you can see the base file I want to extend is in a higher directory than that of the index.html file. Normally, I would use a relative path and use the following code at the top of the index file: {% extends "../base.html" %} or simply use an absolute path to the file (if necessary)
It seems, however, that by using either of these methods, whatever is inside the quotes for extends simply gets appended onto the current path, and my call to the upper directory with .. gets ignored entirely.
That is, if the current path is, for example, /project/templates/projects and I use {% extends "/project/static/base.html" %}, that will be appended to the current path, causing the system to look for /project/templates/projects/project/static/base.html, which, of course, doesn't exist. After researching I came across an article that said the blocking of relative paths is intentional for security purposes, but it leaves me with no way to access any file outside the current working directory.
I figured this had to be an extremely common setup when building a website, and so there must be some sort of way to interact with multiple templates that I'm just not aware of yet. If anyone has any information on that, it would be much appreciated.
Your base.html should be residing in a templates directory and not in the static directory.
This is because you define where django searches for templates using the TEMPLATE_DIRS in your settings.py file. Here, I give an example which computes your TEMPLATE_DIRS value dynamically.
import os
TEMPLATE_DIRS = (
os.path.join(os.path.dirname(__file__), '..', 'templates'),
)
In additional, you need to be aware that django depends on another setting called TEMPLATE_LOADERS to determine the priority in which it loads up your html files/templates, while searching through your templates directories.
TEMPLATE_LOADERS = (
'django.template.loaders.filesystem.Loader',
'django.template.loaders.app_directories.Loader',
# 'django.template.loaders.eggs.Loader',
)
Once your base.html is located in your templates directory, all you need to do in your html files is to write:-
{% extends "base.html" %}
and you would extend correctly
All of your html templates should live under the templates directory (including your base.html). The location of this folder is set using the TEMPLATE_DIRECTORY settings in your settings.py. The static folder is solely for css, js, etc.
When inheriting from another template using the extends tag, the path you give is always relative to your template directory, not project.