Jekyll & Liquid note
Posted on 20/10/2018, in Web development.Liquid and Jekyll
Jekyll is written in Liquid language, here are some syntaxes
Case statement
{% case template %}
{% when 'label' %}
// {{ label.title }}
{% when 'product' %}
// {{ product.vendor | link_to_vendor }} / {{ product.title }}
{% else %}
// {{page_title}}
{% endcase %}
Write liquid code in jekyll
Những keywords quan trọng
{{ site.url }}
: địa chỉ trang web.
Thêm code liquid trong jekyll
- Nếu muốn thêm tag
{% this %}
thì ghi{{"{% this "}}%}
. - Còn nếu muốn thêm
{{ this }}
thì ghi{{"{{ this "}}}}
.
Quan trọng là mở đầu bằng {{"
trước từ khóa và kết thúc bằng "}}
trước kết thúc từ khóa.
Hoặc một cách khác dễ hơn, đó là dùng {% raw %}
và {% endraw %}
bao quanh từ khóa cầ nhiện. Hai từ này còn có thể dùng để hiện một đoạn code nếu được đặt trước đó.
{% raw %}{% for %}
{% end for %}{% endraw %}
Thêm tag cho dinhanhthi.com
- Thêm file trong thư mục
tag
và đổi một số nội dung trong đó. - Thêm vài dòng cho tag đó trong file _data/tags.yml
Bibliography in Jekyll
VERY IMPORTANT!!! Vì lý do bảo mật nên github pages không cho dùng mấy cái plugins bên ngoài, do đó không thể deploy theo cách thông thường với jekyll-scholar được. Có 1 cách là deploy locally rùi sau đó đưa lên github pages nhưng tạm thời chưa biết!!!!
The main instruction and plugin is here and here, we will use jekyll-scholar
- You must have ruby on your computer (Windows), you can download and install it from here.
- Download DevKit also from above site. Actually, because you will meet some error something like
The unicode native gem requires installed build tools
, follow this step, I write a gain as below.- Extract DevKit to path C:\Ruby193\DevKit
- Press Start, type “Ruby” and choose Start Command Prompt with Ruby and then
- Run
cd C:\Ruby193\DevKit
- Run
ruby dk.rb init
- Run
ruby dk.rb review
- Run
ruby dk.rb install
- Try install following to confirm that DevKit successfully installed
gem install json --platform=ruby ruby -rubygems -e "require 'json'; puts JSON.load('[42]').inspect"
- Insyall plugin
jekyll-scholar
gem install jekyll-scholar
- Add
gems: - jekyll-scholar
into_config.yml
file. - Add
gem \'jekyll-scholar\'
inGemfile
file
There is an error when publish to github page, plugin jekyll không được nhận!!!
Jekyll, markdown and Mathjax
If you use mathjax rendering on your jekyll sites, there maybe sometimes are errors on the rendering of maths equations. This is the list of remarks on this problem.
- $\vert \vert$ : Don’t use
||
for absolute values, use\vert{}\vert
instead. This because jekyll understand this as a table generator instead of an absolute value. - $\Vert \Vert$ : Don’t use
\left\| \right\|
, use\Vert{}\Vert
instead. - $g\ast$ : Star symbol, Don’t use
*
, use\ast
instead. Otherwise, jekyll understand this symbol as italic. - $f_1 g_1$ : problem with underscore symbol. Instead of using
_
for many times, use\_
. Vấn đề này chủ yếu xảy ra nếu ta dùng$ $
inline, còn nếu dùng 2 dấu$
thì sẽ không cần\_
.
Girhub pages + domains
Github/Jekyll : How to add a custom domain in Github Page?
My personal websites (dinhanhthi.com) is written by Jekyll + Github Page (yes, I don’t lose any money except the domain). This is the great way to build a static website (personal website, product introduction website,…). The default domain address when you create your own website via this way is yourname.github.io. In this post, I will show you the very easy way to add custom domain like yourname.com pointing to your github pages.
- In your main repository, create a file CNAME (without any extension) whose content is your custom domain (for example, yourname.com) (don’t add www or http or anything else before yourname.com). Then commit and sync.
- In your file _config.yml, change the line “url” by “url: “http://yourname.com”“
- Go to your domain’s manager website (I use Godaddy), step to DNS settings and then add three fields.
- “A” record for “@” to “192.30.252.153“
- “A” record for “@” to “192.30.252.154“
- “CNAME” record for “www” to “yourname.github.io“
- Make sure that there is no conflict with the same host in your DNS settings (i.e., the same record values pointing to different targets.
- Finish.
How to use custom subdomain for Jekyll Github Pages?
Go to DNS settings of your domain. Add a CNAME
from yoursub.yourdomain.com
pointing to yourname.github.io
.
Create a file CNAME
in the root folder of your github page (without any extension) whose content only is yoursub.yourdomain.com
.
Change url
in _config.yml
with "http://yoursub.yourdomain.com"
Submit and Sync.
Make github pages automatically forward to another page
I have two github page websites, one is site1.github.io, the other is site2.github.io. Now I want site1 forward automatically to site2. How I can do that? It’s so easy with few lines of html code.
In your repository, create ONLY ONE file index.html with the content
<head>
<meta http-equiv="refresh" content="0; url=http://site2.github.io/" />
</head>
<html>
<head>
<title>Welcome</title>
</head>
<body>
</body>
</html>
Local jekyll site
Only regenerate the changed file (more quickly):
bundle exec jekyll serve -I true