Maybe this is some kind of Jekyll setting or something but I need to set root_url to something other then "/" and I can't figure out where to do it.
In the .themes/classic/source/_layouts/default.html file, there is {% capture root_url %}{{ site.root | strip_slash }}{% endcapture %}.
site.root is configured in _config.yml which defaults to root: /.
If you are testing with http://127.0.0.1:4000/ which is the default settings for jekyll local development, you can change it to root: http://127.0.0.1:4000/. Then the path will be correct. For example, <link href="{{ root_url }}/favicon.png" rel="icon"> will be resolved as <link href="http://127.0.0.1:4000//favicon.png" rel="icon">.
In short, changing the line root: / in the _config.yml will do.
Sorry for asking too quickly. You can find the settings in _config.yml. I thought I checked there but I must have opened one of the other two config files twice.
Related
I want my index.md seen at
http://jtm-lis.github.io/Julien_Tremblay_McLellan/
to redirect to pages I have written in markdown
I tried implementing, post_url variable , such as documented
in order to successful redirect to a page written in markdown without success, as it points to a 404 at
[Name of Link]({% post_url 2010-07-21-name-of-post %})
http://www.jekyllrb.com/docs/liquid/tags/#linking-to-posts
At first I thought this was an error from the for loop, so I added the link manually as detailed in the documentation specifically for pages written in markdown.
index.md
# Index of all my content
[Library Carpentry Workshop July 2020]({% post_url 2020-07-27-library-carpentry-workshop-american-university-notes %})
<ul>
{% for post in site.posts %}
<li>
{{ post.title }}
</li>
{% endfor %}
</ul>
_config.yml
theme: jekyll-theme-slate
url: https://jtm-lis.github.io
baseurl: /Julien_Tremblay_McLellan #NO TRAILING SLASH
title: Julien Tremblay McLellan's Website
author: Julien Tremblay McLellan
email: jtremc#gmail.com
description: > # this means to ignore newlines until "baseurl:"
Write an awesome description for your new site here. You can edit this
line in _config.yml. It will appear in your document head meta (for
Google search results) and in your feed.xml site description.
# social links
twitter_username: jtm-lis # DO NOT include the # character, or else the build will fail!
github_username: jtm-lis # DO NOT include the # character, or else the build will fail!
show_excerpts: true # set to false to remove excerpts on the homepage
What am I doing wrong?
The problem here is that the link does not use the site.baseurl,
so instead of linking to
https://jtm-lis.github.io/Julien_Tremblay_McLellan/2020/07/27/library-carpentry-workshop-american-university-notes.html
you are linking to
https://jtm-lis.github.io/2020/07/27/library-carpentry-workshop-american-university-notes.html which does not exist.
The fix is easy though, you just need to add site.baseurl to your link as in
[Name of Link]({% post_url 2010-07-21-name-of-post | prepend: site.baseurl %})
When doing this, you may encounter an other problem on your localhost environment, since most likely your site.baseurl folder does not exist there. So it will work on your live site, but has broken links in your local environment.
To work normally on localhost just override the baseurl property when you serve it:
jekyll serve --baseurl ""
or if you work with bundler
bundler exec jekyll serve --baseurl ""
I'm using siteleaf for my jekyll site.
Here's my problem: I created a metadata field called "image" inside siteleaf cms. This will allow the site publisher to add an image.
Here's a visual - https://ibb.co/kHcHdG
With out an image the users posts won't show on the site. After creating this metadata field and uploading an image, siteleaf will then create an _uploads folder in my jekyll directory, a folder for all images.
Jekyll ignores folders beginning with an underscore, so I have to input this yaml code inside the config file to fix this. Code Below.
collections:
uploads:
title: Uploads
output: true
posts:
title: posts
output: true
Inside my _posts folder, I have a markdown file with front matter that looks like this, code below:
---
title: popcorn
date: 2017-11-06 15:33:00 Z
image: "/uploads/15023253524_589c7b137f_k-ab220c.jpg"
layout: post
---
lorum ipsum.
So far, I followed the right directions, I'm not getting any errors in the console or in jekyll. The posts will not show. I've ran into a wall. I've asked on the jekyll and siteleaf forums, no solution.
Here's a link to the repo - https://github.com/pizzapgh/kevins_site
Help would be appreciated so much, thanks.
Fixed, finally!
The solution: Go inside my index file and change the following code:
original code
{% if post.img %}
<img src={{ "/assets/img/" | prepend: site.baseurl | append: post.img
}} alt="{{post.title}}" />
{% if post.img %}
new code
{% if post.image %}
<img src={{ post.image | prepend: site.baseurl }} alt="{{post.title}}" />
{% if post.image %}
Thanks for including a link to your repo.
Here's what I did:
$ bundle install
$ bundle exec siteleaf serve
A few warnings show up in the console, but your site is able to build regardless.
I'm able to access your posts now in the web browser just fine, for example: http://localhost:4000/popcorn/
If you were not expecting this URL pattern, you can change your config file. Right now it says:
permalink: ":title/"
For info on customizing permalinks see: https://jekyllrb.com/docs/permalinks/
I've got a .env file with this content:
APP_ENV=dev
in the root of my project which shows that I am in the development mode
and therefor my config files will be loaded from config/dev directory instead of config directory.
Now I want to add live reload to my html page by including the following script:
<script type="text/javascript">document.write('<script src="//localhost:35729/livereload.js?snipver=1" type="text/javascript"><\/script>')</script>
But I only want this to be included if I am in development mode, not in production. How can I do this?
As luketowers answered on October's Slack channel:
https://octobercms.com/docs/markup/this-environment
So for your example you’d do something like this:
{% if this.environment == 'dev' %}
<script src="//localhost:35729/livereload.js?snipver=1" type="text/javascript"></script>
{% endif %}
I've been working on my portfolio site using jekyll, and everything seems to work just great locally. So, the next step for me was to push it up to github inside a gh-pages branch, and when I do that, I receive an email with the error below.
The tag responsive_image on line 20 in _layouts/post.html is not a recognized Liquid tag.
The gem that I'm trying to use is Jekyll Responsive Images.
Like I said before, when I run jekyll serve, I get no errors and I can run my jekyll site just fine locally, but for some reason this error is keeping my site from working with github. My post.html file looks like this.
---
layout: default
---
<article class="article--container">
<header class="heading--articles">
<h1 class="page-title">{{ page.title }}</h1>
<p class="post-date">
posted on {{ page.date | date: "%b %-d, %Y"}}
</p>
{% if page.featured_image %}
<div class="post-image">
<img src="{{ page.featured_image }}" alt="{{ page.title }} featured image">
</div>
{% endif %}
</header>
<div class="post--body">
{{ content }}
</div>
{% if page.post_images %}
<section class="post--images">
<a href="http://bradfrost.github.com/this-is-responsive/patterns/images/fpo_landscape.png" class="box let-there-be-light">
<span class="msg">Let there be light</span>
{% responsive_image path: img/image.png alt: "Project Images" title: "Project Images"%}
</a>
</section>
{% endif %}
</article>
In my _includes folder, I had to make a include for the responsive_images gem and it looks like this
{% capture srcset %}
{% for i in resized %}
/{{ i.path }} {{ i.width }}w,
{% endfor %}
{% endcapture %}
<img src="/{{ path }}" srcset="{{ srcset | strip_newlines }} /{{ original.path }} {{ original.width }}w">
And here's my config.yml file for anyone wondering
# Welcome to Jekyll!
#
# This config file is meant for settings that affect your whole blog, values
# which you are expected to set up once and rarely need to edit after that.
# For technical reasons, this file is *NOT* reloaded automatically when you use
# 'jekyll serve'. If you change this file, please restart the server process.
# Site settings
title: Portfolio
email: test#test.com
description: > # this means to ignore newlines until "baseurl:"
baseurl: "" # the subpath of your site, e.g. /blog
url: "http://example.com" # the base hostname & protocol for your site
twitter_username: test
github_username: test
permalink: /:categories/:title
links:
- title: about
url: /about
- title: projects
url: /projects
- title: articles
url: /articles
# Build settings
markdown: kramdown
gems:
- octopress-autoprefixer
gems: [jekyll/responsive_image]
responsive_image:
# [Required]
# Path to the image template.
template: _includes/responsive-image.html
# [Optional, Default: 85]
# Quality to use when resizing images.
default_quality: 90
# [Optional, Default: []]
# An array of resize configuration objects. Each object must contain at least
# a `width` value.
sizes:
- width: 350
quality: 80
- width: 480 # [Required] How wide the resized image will be.
quality: 80 # [Optional] Overrides default_quality for this size.
- width: 800
quality: 90
- width: 1400
quality: 90
# [Optional, Default: assets/resized/%{filename}-%{width}x%{height}.%{extension}]
# The template used when generating filenames for resized images. Must be a
# relative path.
#
# Parameters available are:
# %{basename} Basename of the file (assets/some-file.jpg => some-file.jpg)
# %{filename} Basename without the extension (assets/some-file.jpg => some-file)
# %{extension} Extension of the file (assets/some-file.jpg => jpg)
# %{width} Width of the resized image
# %{height} Height of the resized image
#
output_path_format: img/resized/%{width}/%{filename}-%{width}x%{height}.%{extension}
Has anyone had this problem with the responsive images gem? I can't seem to google an answer to this. Any help would be greatly appreciated.
Jekyll responsive images is a Jekyll plugin and you cannot add your own plugins to github pages. This is a restriction by github due to security reasons.
Here is the related page on github and here is the list of plugins that are officially included by github in the github server and can be used.
You can try Picturefill instead.
In fact, you're not allowed to use most of Jekyll plugins when hosting on GitHub for security reasons.
A good way out is uploading the static site generated by Jekyll, so GitHub won't build your site, it will only display it as plain html. To do that, the only thing you need to do is pushing to GitHub the _site content only.
Another way out is using GitLab Pages instead. There you can use as many plugins as you want, as the building process is controlled by yourself through a configuration file called .gitlab-ci.yml. A full tutorial on this process is to be published soon.
The only feature GitLab.com doesn't have yet is the possibility of setting custom domain names for websites build by GitLab Pages. But it's coming soon.
Hope to have helped!
It is important to say that this is not a recommended way, but it works for me. I feel like the other answers were a bit to: No you can't - do this.
Yes you can. But as Virtua Creative suggests - you need a workaround. Especially if you are using a custom domain.
I myself had problems with the jekyll-responsive-image for resizing and lazy load on my Jekyll site.
It is not a supported gem.
Example
First if all make your _site repository a git repository.
and remove CNAME from .gitignore.
When you are finished working locally then build:
jekyll build
Afterwords add a CNAME file to your build:
touch _site/CNAME
Echo your domain into it:
echo 'www.your_domain.com' >> _site/CNAME
And then you can push to your github pages repository (also from parent).
Ekstra
Next time you can create a custom command in your bash to automate.
My .zshrc:
alias jekyll_build_cname='jekyll build && touch _site/CNAME && echo "www.instamoneyservices.de" >> _site/CNAME'
I've been looking around everywhere and trying everything but i cannot seem te get my css file to work in a Django template.
My css i called style.css
the code in the template right now looks like:
{% load staticfiles %}
<link rel="stylesheet" href="{{ STATIC_URL }}style.css" type="text/css" media="screen" />
I'm still working on the development server.
In settings py I added:
STATICFILES_DIRS = (
"home/henk-jan/website/Template/Database")
django.contrib.staticfiles is installed in Installed_apps
can anyone help me with this?
Cheers, Henkes
Edit: My template (index.html) is in the same folder as my style.css the folder is: /home/henk-jan/website/Template/Database
From looking at your original post it would appear to me that your working at rendering your page from two separate angles.
First, you have {% load staticfiles %} which will load the templatetags associated with the staticfiles module. Second, inside your link element you are referencing {{ STATIC_URL }} which gets expanded via context.
From this I would recommend one of the following two courses of action.
1 - Utilize the staticfiles module and the templatetags you loaded in your template.
To do this you should modify your link element to read like this:
<link rel="stylesheet" href="{% static "style.css" %}" type="text/css" media="screen" />
Note that in this instance I have replaced the {{ STATIC_URL }} with the {% static %} templatetag. The {% static %} templatetag takes an argument which is the file you wish to prefix with the static URL, and expands into the complete string.
2 - Make use of context by modifying your view to render with context.
The {{ STATIC_URL }} variable is made available via request context. There are a number of useful variables that are, that you can rely on to get expanded if you want to utilize them. The trouble is that you have to ensure that you render your template with context which means you would potentially have to change one or more views.
As an example an overly simple view that renders without context would look like:
from django.shortcuts import render_to_response
def index_without_context(request):
return render_to_response("index.html")
While the same overly simple view rendered with context would look like this:
from django.shortcuts import render_to_response
from django.templates import RequestContext
def index_with_context(request):
return render_to_response("index.html",
context_instance=RequestContext(request))
As I stated above, by rendering your template with a RequestContext you get other variables and such that can be of use so it is a very viable option.
In the end it really depends on where you want to keep the logic that ensures your static files get your static URL rendered correctly at. If you want that logic inside the template itself I would recommend you go with the {% load staticfiles %} approach and use the {% static %} template tag. If you prefer to make use of the {{ STATIC_URL }} variable as well as having other potentially useful variables available then I would recommend modifying your view to be rendered with a RequestContext.
You can read more about the difference between using the context processor or a template tag in the Django docs section about this very topic:
https://docs.djangoproject.com/en/1.4/howto/static-files/#referring-to-static-files-in-templates
Is "home/henk-jan/website/Template/Database" a valid location? Maybe "/home/henk-jan/website/Template/Database" instead? Right now the preceding forward slash is missing.
If you are working on the development server, you will want to let Django serve the static content. When you go to production you will have your web server handle serving static content instead.
You will want STATIC_URL pointing to the path to your static content (in this case it looks like that would be /Template/Database/. It sounds like you have that working. Now you just need to tell Django to serve static content when in DEBUG mode. See this post: Django MEDIA_URL and MEDIA_ROOT