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 %}
Related
Problem:
I have a Hugo site with pretty standard setup. It uses asset pipeline to process SASS. It imports bootstrap, font-awesome, and also uses resources.ExecuteAsTemplate (please do check out main.css file). CSS resources are being generated properly (I checked resources/_gen/assets/scss/sass) but the .css file in public directory is an empty file. I am not able to find any problems in the code. See the code here, site here. I tried creating a new project with same head.html file and .scss files, and it generated CSS resources, and had them in the public directory properly.
Additional info:
Related files:
head.html
main.scss
Currently, I am not using PostCSS; just have the config file created. Would be replacing minify with postCSS on line 13 in head.html once empty .css file problem is solved.
Output of hugo version:
Hugo Static Site Generator v0.57.2-A849CB2D/extended linux/amd64 BuildDate: 2019-08-17T17:57:54Z
I would gladly provide any additional information if required. Please help!
In the head.html file, link tag is:
<link rel="stylesheet" integrity="{{ $css.Data.Integrity }}" href="{{ $css.Permalink }}">
Changing the link tag with following:
<link rel="stylesheet" href="{{ $css.Permalink }}" integrity="{{ $css.Data.Integrity }}">
fixes the issue.
It seems that Hugo requires user to first call .Permalink of the asset and then only other related functions or variables.
See related discussion on Hugo Discourse here.
I am building a blog for myself using Jekyll, however, when I open the page in my browser, the SCSS fails to load. I try to navigate to the SCSS file through my browser but to no avail, the browser believes that the SCSS does not exist.
Here is how I add the stylesheet to the HTML:
<link rel="stylesheet" type="style/css" href="/_sass/_base.scss">
I did this to all of my stylesheets, and yet the it doesn't work.
Does anyone know how to fix this problem? Thank you in advance.
You do not link to stylesheets with an href to "/_sass/_base.scss".
Instead you should do the following:
create another directory to hold your "stylesheet", say, css/.
then add an empty stylesheet with an empty front matter block (required)
---
---
// this is an empty stylesheet named "style.scss"
// use #import here to load partials from your _sass folder
import your partial(s) into the above "stylesheet".
---
---
// this is an empty stylesheet named "style.scss"
// use #import here to load partials from your _sass folder
#import "base";
#import "mixins";
link your HTML page with the stylesheet:
<link rel="stylesheet" type="style/css" href="{{ 'css/style.css' | relative_url }}">
...and done!
Takeaways:
Import files from your _sass into a "dedicated stylesheet".
The dedicated stylesheet must contain the front matter block (can be empty).
Link your HTML file with the dedicated stylesheet.
Linked file has a .css extension even if your source file was css/style.scss or css/style.sass
You may hard-code the markup or use a Liquid construct to link the stylesheet.
When using a Liquid construct, prefer using the relative_url filter instead of using {{ 'css/style.css' | prepend: site.baseurl }} or {{ site.baseurl }}/css/style.css
Before I begin this, some preface warning;
My knowledge of jekyll is 0.
My knowledge of ruby is 0.
Though I do think I've done pretty well for having no experience and just stepping into it today. That said, this is all completely new to me.
I wanted to give it a try for my github pages for a blog, just to see if I could make it work. I am running into a huge issue with what I suppose would be called the global variables.
I downloaded Lanyon here; Lanyon
I did the following steps, in order, from my Windows 8.1 x64 machine.
Installed python 3.4.1 (link)
Installed ruby using the RailsInstaller (link)
Installed rubygems using gem update --system from a PowerShell console
created a new github repository
created a gh-pages branch in that repository
created a Gemfile in that branch, with the following text
source 'https://rubygems.org'
gem 'github-pages'
Then came the work with Lanyon.
downloaded Lanyon and extracted it, I copied all of the files into a new directory
pushed the entire directory to my repository on branch gh-pages
tried to navigate to the gh-pages given url.
Now I did see the index page, it did have the content, but the theme wasn't working. The css files were missing. Per the instructions for theme structure found on jekyll's website, I made some changes; link
I moved the head.html and sidebar.html into a new subfolder under _includes called themes/lanyon, per the suggested layout on the api docs.
I loved the css folder into a new folder called assets/themes/lanyon, again following those docs
I moved the files apple-touch-icon-144-precomposed.png, apple-touch-icon-precomposed.png, and favicon.ico into a new folder called assets/themes/lanyon/img, following the example in the api docs.
Now comes the trickiest part ... trying to get the {{ ASSET_PATH }} to work.
I looked at the file _includes/themes/lanyon/head.html and saw the 3 css assets had no variables.
I changed them to look like the following
<link rel="stylesheet" href="{{ ASSET_PATH }}/css/poole.css">
<link rel="stylesheet" href="{{ ASSET_PATH }}/css/syntax.css">
<link rel="stylesheet" href="{{ ASSET_PATH }}/css/lanyon.css">
I updated _config.yml to look like this, obviously filling in the [] variables instead.
# For more see: http://jekyllrb.com/docs/permalinks/
permalink: /:categories/:year/:month/:day/:title
exclude: [".rvmrc", ".rbenv-version", "README.md", "Rakefile", "changelog.md"]
pygments: true
markdown: redcarpet
title: lanyon
tagline: 'lanyon theme'
author :
name : Ciel
email : stacey.cielia.lynn#gmail.com
github : ciel
paginate: 5
production_url : http://[username].github.io
Lanyon :
version: 2.0.0
BASE_PATH : "/[repositoryname]"
ASSET_PATH : "/assets/themes/lanyon"
But even with all of that, it still doesn't work. It does_ work if I type the absolute paths to the files, but that's not how jekyll is supposed to work, from my understanding.
To access ASSET_PATH, try :
{{ site.Lanyon.ASSET_PATH }}
Edit : You're using Jekyll Bootstrap (JB) variables, not Jekyll ones.
site.Lanyon.ASSET_PATH is specific to JB. Here it's '/assets/themes/lanyon'
site.Lanyon.BASE_PATH (site.baseurl in Jekyll) is the path from your site root to your Jekyll install.
eg : If you do http://ciel.com/my/jekyll/site/ to reach you site : site.Lanyon.BASE_PATH or site.baseurl = '/my/jekyll/site'
So if you want to reach your assets from any page, you need to do :
<link rel="stylesheet" href="{{ site.Lanyon.BASE_PATH }}{{ site.Lanyon.ASSET_PATH }}/css/poole.css">
or
<link rel="stylesheet" href="{{ site.baseurl }}{{ site.Lanyon.ASSET_PATH }}/css/poole.css">
Et voilà !
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!
I've looked thoroughly over Symfony related questions on this site but can't find the answer I need.
I'm using Symfony 2.0.9 with PHP 5.3.6 and my file structure looks like this:
src/
Blog/
TestBundle/
Resources/
views/
Default/
index.html.twig
header.html.twig
Inside of index.html.twig I have:
<div id="header">
{% include "BlogTestBundle:Resources:Default:header.html.twig" %}
</div>
It keeps erroring out with
Twig_error_loader: Unable to find template
no matter what I use for the path. Why isn't it finding the file? They're even in the same directory!
Anyone have any idea what I'm doing wrong?
twig file includes should follow the format below:
FullBundleName:ControllerName:filename
You can also amend parts if they're not present, i.e. for just a file under a bundle /views directory you can use FullBundleName::filename
So in your case, use BlogTestBundle:Default:header.html.twig