I followed the following instructions to create a new Jekyll website.
gem install bundler jekyll
jekyll new my-awesome-site
cd my-awesome-site
bundle exec jekyll serve
# => Now browse to http://localhost:4000
This all works fine. Now, I want to inject some Liquid syntax so I added the following in my HTML page.
<h2 class="post-list-heading">Posts</h2>
<ul class="post-list"><li><span class="post-meta">Jan 16, 2020</span>
<h3>
{{ page.title }}
<a class="post-link" href="/jekyll/update/2020/01/16/welcome-to-jekyll.html">
Welcome to Jekyll!
</a>
</h3></li></ul>
Now, when I run the page, I don't see the page.title being evaluating. I see the following result.
What am I missing?
Related
I changed my GH Pages Source setting from "classic"/"hands off" to "GitHub Actions (Beta)", and after some tweaking, everything is working the same again, except for one thing: when hosted on my-subdomain.github.io the link to the home page goes to github.com.
The anchor tag comes from jekyll-theme-primer's default.html layout and looks like this:
<a href="{{ "/" | absolute_url }}">
On my local machine (in Docker), this is fine and links to localhost:3000 and previously on GH Pages it linked to my-subdomain.github.io (and I named the repository the same) which was fine, but after the switch it links to github.com which is bad.
My GHA workflow is a straight copy of the official starter workflow which runs this command:
bundle exec jekyll build --baseurl "${{ steps.pages.outputs.base_path }}"
And site.base_url is "" in all cases.
According to the Jekyll docs, absolute_url "prepends url and base_url to the input". Why is url set to github.com now and what's the best way to fix it?
I fixed it by adding _config-gh.yml with url set to the correct github.io subdomain and adding --config _config.yml,_config-gh.yml to the workflow command.
I'm working on a Jekyll site with GitHub Pages and have found that {% include myinclude.html %} liquid works just fine inside _includes and _layout files. However, when adding elements to the _config.yml such as author : myusername and attempting to use them either in the _layouts/default.html or _includes/myinclude.html as {{ site.author }}, the resulting text is just blank. To note, these changes are not committed or pushed and I'm using a local jekyll instance installed on the Linux Subsystem for Windows.
Outside of _includes and _layout in my actual pages the site variables work just fine. Why would the site variables not be displayed? At the moment I have to place the actual values back into the page.
The above is the intended behaviour, every change to _config.yml needs the development server to be restarted to process new settings.
The configuration file can't be re-read when using watch, because it
contains things like source and destination. It could only work if it
were actually like running jekyll build multiple times
source
With the assumption that edits to the _config.yml would update automatically, as Jekyll does for edits to other files, I had not restarted the jekyll instance I originally started. Simply closing the Jekyll instance and starting it back up, with bundle exec jekyll serve in my case, read the updated config file and the {{ site.variables }} appeared and showed correctly as I expected.
Any changes to the _config.yml require restarting the Jekyll instance.
I am trying to deploy Jekyll, I can do so successfully when deploying it as a new website. I want to deploy it to a subfolder named Blog '/mysite/Blog'. I understand that localhost:4000 initializes jekyll to deploy, but how does this work when i want to link to it from the main site '/mysite/blog/'. This results in just the site directory showing as shown:
I am having trouble finding documentation targeting this specific problem. I dont want to deploy this to the live site unless im 100% sure
I understand that localhost:4000 initializes jekyll to deploy
No, it doesn't.
That's the default URL of the development server… which you use for development, not deployment.
See the basic usage instructions:
$ jekyll build
# => The current folder will be generated into ./_site
You have static files. Copy them to your live server as you would any other static files.
You just have to set baseurl in _config.yml :
baseurl: /blog
Verify that resources are called with {{ site.baseurl }}{{ page.url }} or {{ site.baseurl }}/path/to/asset.js/css/jpg.
During development (jekyll serve) you will reach your site at localhost:4000/blog/ and you can deploy this code in you site/blog folder.
Newbie question. I'm trying to get started with github-pages and Jekyll, working my way through the docs. I got to this: http://jekyllrb.com/docs/posts/#displaying-an-index-of-posts and I thought I'd put the Liquid directives directly into my main index.html, but they don't get processed. Instead, they just come out verbatim:
<ul>
{% for post in site.posts %}
<li>{{ post.title }}</li>
{% endfor %}
</ul>
(Obviously, the HTML doesn't come out verbatim, but the Liquid stuff does.)
My directory structure (Created with the github automatic page generator):
./ Gemfile .git/ images/ javascripts/ _posts/ stylesheets/
../ Gemfile.lock .gitignore index.html params.json _site/
Gemfile:
source 'https://rubygems.org'
require 'json'
require 'open-uri'
versions = JSON.parse(open('https://pages.github.com/versions.json').read)
gem 'github-pages', versions['github-pages']
I've run bundle install and bundle update. I do have a post.
bundle exec jekyll serve serves everything up fine, except for this error/warning:
Configuration file: none
What am I missing?
(Thanks.)
Ok, so... turns out all you need is to put "front matter" in your index.html to trigger its processing by Jekyll (http://jekyllrb.com/docs/frontmatter/). The minimal front matter is two lines of three dashes, which works for me.
On to the next hurdle!
There is a config param in jekyll called production_url. I can't find any information on how to use it.
Ideally i would like to be able to generate permalinks with local url when it is being run with serve param and with production url when run with build param.
How could I do that?
When you build your Jekyll website, it’s possible to specify the environment it’s using for the build with the JEKYLL_ENV environment variable:
$ JEKYLL_ENV=production jekyll build
If you don’t set JEKYLL_ENV explicitly, it defaults to development.
{% if jekyll.environment == "production" %}
// Production environment.
{% endif %}
Github Pages automatically sets the environment to production.
I don't see the variable production_url in the current release (v1.4.1), so this may be a dated question--but I was just looking for this answer myself. There is a baseurl property that can be set with a flag and so to change the path to your files, but it only adjusts the relative path.
jekyll serve --baseurl '/blog'
What you can do is to use the -config option to specify a configuration file for development.
Jekyll Documentation
Your production configuration variables are defined in _config.yml. One option is to create a separate configuration file for development.
--config _config-dev.yml
You can also (as I do) override variables defined in a second configuration file.
--config _config.yml,_config-dev.yml
If you use the liquid templates for site links like this:
<link rel="stylesheet" href="{{ site.base_url }}/stylesheets/blog.css">
then you can override the base_url property during local devlopment
base_url: http://localhost:4000
and run jekyll in "Development"
jekyll serve -w --config _config.yml,_config-dev.yml
jekyll serve will call jekyll build, so you can't really use those two as a way to output different URL schemes.
I built a Jekyll plugin that does this with a Liquid Filter and one user defined variable in your _config.yml called mode.
You set the mode to development or production and the plugin takes care of the rest in your templates.
So in your template you could have a URL such as:
<img src="{{ '/img/dog.jpg' | to_absurl }}" />
When mode is development, upon Jekyll build/serve you will get a relative URL:
<img src="/img/dog.jpg" />
Locally this would be accessed as: http://0.0.0.0:4000/img/dog.jpg
When mode is production, upon Jekyll build/serve you will get an absolute URL:
<img src="http://www.domain.tld/img/dog.jpg" />
The http://www.domain.tld is what you have set in _config.yml -> url variable.
You can see more details on the plugin here:
http://jhaurawachsman.com/2013/jekyll-url-helper-filter-plugin/
This also worked for me:
$ JEKYLL_ENV=production jekyll serve