I have settings as below in _config.yml so that I can get tracking information with the help of GA.
# Google Analytics
google_analytics_tracking_id: UA-9118****-2
And this is how I deploy.
What I want to do is to have two different configurations based on the environments where it runs.
For example)
I hope the value of google_analytics_tracking_id on production is UA-AAAABBBB-1 and it is UA-AAAABBBB-2 on localhost.
Are there any approaches to do this without editing the _config.yml manually each time I deploy?
You can use jekyll.environment variable that is set to "development" when you run jekyll locally with jekyll serve, and set to "production" on github pages.
_config.yml
google_analytics_tracking_id_dev: UA-9118****-1
google_analytics_tracking_id_prod: UA-9118****-2
In your code :
{% if jekyll.environment == 'production' %}
{{ site.google_analytics_tracking_id_prod }}
{% else %}
{{ site.google_analytics_tracking_id_dev }}
{% endif %}
Related
Issue:
I am trying to deploy/host my Hugo site on GitHub.
The site renders perfectly when I run it locally (http://localhost:1313/) using the hugo server command, but it does not render correctly when I host it on GitHub.
Initially, I thought the issue was the deployment on GitHub, but then I opened the index.html file which is generated by the hugo command within the public folder and I noticed that it does not work there either. So I assumed there is something wrong with my css connection in the index.html file:
href=https://username.github.io/assets/css/stylesheet.min.06dcab22093156f8a08872c23ce7ee2a8234185d3c84741f7b0ce0c78df475b8.css
but this seems to be the correct link.
Installation Process and Research Efforts:
In order to create the hugo site in the first place, I followed the quick-start tutorial and in order to apply the theme of my choice, I followed the official installation process described here by PaperMod. Finally, to host it on GitHub, I followed the recommended instructions.
My config.yml file has the recommended structure as the example file presented in the offical repository.
Besides filing an issue on the GitHub repository of the theme developer which I didn't get a clear answer except for a correction he pointed out which didn't work, I looked at a couple of articles like this, this and this but none of them work.
I am using windows 10 and my Hugo version is v0.78.2/extended windows/amd64.
Update:
I check the console of the html file and I found these three errors:
(index):1 Failed to find a valid digest in the 'integrity' attribute
for resource
'https://username.github.io/assets/css/stylesheet.min.5846effdc39e688e1bf07acc7a47123f949ae43a8b0e776fa1a2a626406cc602.css'
with computed SHA-256 integrity
'J6YEe5hjKuk/TENUR7jEMr6VNR4lwN8iVpSGj1g8MU4='. The resource has been
blocked.
DevTools failed to load SourceMap: Could not load content for
chrome-extension://fheoggkfdfchfphceeifdbepaooicaho/sourceMap/chrome/iframe_handler.map:
HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME
DevTools
failed to load SourceMap: Could not load content for
chrome-extension://fheoggkfdfchfphceeifdbepaooicaho/sourceMap/chrome/content.map:
HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME
Thanks to #Samuel Three's answer, I started to look more closely at my Cloudflare configuration.
I discovered that I had Cloudflare's "Auto Minify" feature turned on (under Speed / Optimisation) for JavaScript and CSS. Disabling those (and flushing the Cloudflare cache once) fixed the issue for me, and I was able to leave Cloudflare's cache enabled from that point on.
Of course, if Cloudflare modify the JS or CSS files in any way, the computed SHA integrity will no longer be correct.
Workaround:
I replaced:
integrity="J6YEe5hjKuk/TENUR7jEMr6VNR4lwN8iVpSGj1g8MU4="
with:
integrity=""
in the css tag of every single index.html file.
This worked, although I found a solution to do this automatically and skip the error in the first place.
Solution(!) - Update:
It looks like the head.html file under the assets folder has the following structure:
<!-- Styles -->
{{- $stylesheet := (resources.Match "css/*.css") | resources.Concat "assets/css/stylesheet.css" | minify | fingerprint -}}
<link href="{{ $stylesheet.Permalink }}" integrity="{{ $stylesheet.Data.Integrity }}" rel="preload stylesheet"
as="style">
I replaced integrity="{{ $stylesheet.Data.Integrity }}" with integrity="" and it worked! It automatically generates index.html files that are built with empty integrity and as a result there is no error and it works perfectly.
For anyone else having the same issue with the integrity, adding the following code to my config.yml file solved the problem.
params:
assets:
disableFingerprinting: true
I found a solution if you are using Cloudflare as the DNS for you domain.
Just clean the Cloudflare CDN cache or turn off it to prevent it happening again.
https://github.com/lxndrblz/anatole/issues/114#issuecomment-828750909
Ignoring the integrity completely will, of course, solve this (and we certainly don't want any other processes to modify the file on the fly later - turn that off in Cloudflare if you have it enabled in Speed > Optimization > Auto Minify, for example).
However, I hit this problem because my fingerprint wasn't last in the chain of resource events that modify the content. For example, this was my problem:
...
{{ $css = $css | fingerprint "sha256" }}
{{ $css = $css | resources.PostCSS }}
{{ $css = $css | resources.PostProcess }}
...
<link
rel="stylesheet"
href="{{ $css.RelPermalink }}"
integrity="{{ $css.Data.Integrity }}"
media="screen"
/>
But this now works perfectly:
...
{{ $css = $css | resources.PostCSS }}
{{ $css = $css | fingerprint "sha256" }}
{{ $css = $css | resources.PostProcess }}
...
<link
rel="stylesheet"
href="{{ $css.RelPermalink }}"
integrity="{{ $css.Data.Integrity }}"
media="screen"
/>
Hope this helps anyone else that hits this gotcha.
When I was trying to update my project on Github, which has its own page, I got this email:
The page build failed for the `master` branch with the following error:
The tag `raw` on line 888 in `functions/node_modules/eslint/CHANGELOG.md` was
not properly closed. For more information, see
https://help.github.com/articles/page-build-failed-tag-not-properly-closed/.
For information on troubleshooting Jekyll see:
https://help.github.com/articles/troubleshooting-jekyll-builds
If you have any questions you can contact us by replying to this email.
The line of code it's referring to is:
* aafebb2 Docs: Wrap placeholder sample in {% raw %} (#7798) (Daniel Lo Nigro)
I don't know anything about Jekyll, and I can't find any answer that doesn't require me to. Could you help me?
As mentioned in jekyll/jekyll-help issue 40
At some point in 2017 it became illegal to write {% raw %} at the beginning (after front-matter) and {% endraw %} at the end of a file.
But this only occurs with Jekyll 3.5.2 on GitHub, not the Jekyll 3.5.2 that I installed on my local machine.
If you cannot the Changelog adding {% endraw %} just after add {% raw %}, check if you can avoid including that file in your project.
I'm trying to add folders inside the "_includes" directory on Jekyll. It doesn't work. I've tried adding an underscore to the folder but it doesn't work either. What am I doing wrong? I'm using Jekyll 3.7.0
The most useful link I found about it was this one
Here are some screenshots:
And the stacktrace is:
Incremental build: disabled. Enable with --incremental
Generating...
Pagination: Pagination is enabled, but I couldn't find an index.html page to use as the pagination template. Skipping pagination.
Liquid Exception: Could not locate the included file 'sidebar.html' in any of [".../_includes"]. Ensure it exists in one of those directories and, if it is a symlink, does not point outside your site source. in /_layouts/page.html
jekyll 3.7.0 | Error: Could not locate the included file 'sidebar.html' in any of [".../_includes"]. Ensure it exists in one of those directories and, if it is a symlink, does not point outside your site source.
I think I'm supposed to be able to use sub-directories. What am I doing wrong? Thank you in advance!
Apparently, I found the problem. I don't know why but Jekyll is somehow able to parse comments. It detected I had commented a piece of code referencing the old sidebar.html.
As #DavidJaquel mentions in a comment below, HTML comments <!-- --> are not stopping Liquid to parse our page content, so we should be using Liquid syntax:
{% comment %}
...
{% endcomment %}
TL;DR: Can I say somehow to generate the content for a {% include %} once and just stamp it out in multiple places without having to regenerate it in every location?
I'm building a fairly big documentation site with Jekyll which has right now a bit over 50 articles on it. It has a sidebar where all articles are listed. the sidebar is built in a separate sidebar.html and then it is included into every page on the site with {% include sidebar.html %} in default.html.
The problem I have is that every single article runs the generation of sidebar.html separately, so I have over 50 generation passes on that piece of code. Every article I add adds another pass to this and make all the passes a bit slower, as generating the sidebar has to parse every single article in the project.
Build time has gone up from basically zero to over 100 seconds already, and if I remove the {% include sidebar.html %} then it drops down to 5 seconds. When I get all the articles in I'd estimate to have around 100-200 of them. Then I should have versioning in the future for all articles which means that there can easily be 1000+ articles in the long run. At that point I wouldn't be suprised if changing one letter in one file would take something like an hour to regenerate files in jekyll serveand jekyll build.
What I would like to do is to build sidebar.html once in the beginning of the build process and just stamp it out to every page when i generate said pages. Is this possible?
Fastest way to do this.
Move _includes/sidebar.html to sidebar-template.html
Add this front matter :
---
layout: null
permalink: sidebar-template.html
---
Create a Rakefile
TPL = "_site/sidebar-template.html"
TST = "_includes/sidebar.html"
task :default => :nav
desc "Generates sidebar then copy it to be used as an include"
task :nav do
if !File.exist?(TST)
puts "Creating dummy #{TST} file"
open(TST, 'w') do |f|
f.puts warning
end
end
puts "Building Jekyll 1st run"
system "jekyll build --trace"
# delete target file (TST) if exist
if File.exist?(TST)
puts "#{TST} exists deleting it"
rm TST
end
# copy generated file as an include
cp(TPL, TST)
puts "Building Jekyll AGAIN"
system "jekyll build --trace"
puts "task END"
end
Just run rake and you have your sidebar include generated.
There is now a better way to do this, thanks to Ben Balter.
instead of: {% include yourtemplate.html %}
use: {% include_cached yourtemplate.html %}
When used on larger items that need to be built once, such as a site hierarchy, the item will be cached. For other items that vary across pages, you'll still want to use the include as you always have done.
It is explained well here: https://github.com/benbalter/jekyll-include-cache
Definitely cuts down on site startup time!
Is it possible to setup configuration values within the config.yml file and have them be printed within the HTML page within Jekyll? I would like to set the default title and description of my website within the config.yml file and have them printed out in the header of all my layouts.
Every template has a site variable, which contains the settings from _config.yml. For example, if you have something like my_setting: "string" in _config.yml, you can access the value in a template using {{ site.my_setting }}.
Note: if you are using jekyll serve, you will need to restart the process for changes to take place. Indeed, _config.yml is not reloaded with the watch option.