How to write a Jekyll blog
How to test a blog using bundle:
-
Navigate to path of the githubpages repository.
cd D:\git\githubPages\longavailable.github.io -
Execute the following command:
bundle exec jekyll serveor with
--draftstag.bundle exec jekyll serve --drafts -
Check the githubpages website from http://127.0.0.1:4000.
-
Ctrl + Cquit the bundle serve.
Markdown skills
Space, tab, and blank line
-
Plain code block: paragraph text line (+ blank line) + 1 Tab or 4 spaces + code + blank line
-
Hello, world in list
## Header line h2.
-
Fenced code block in list (indented): (blank line) + 1 Tab or 4 spaces + ` ` ` + language identifier + enter + code + enter + 1 Tab or 4 spaces + ` ` ` (+ blank line). It didnot work for
<img>, see here 2nd item. Why?### Header line h3. -
More than 1 space in a text snippet (non-breaking space):
is 2 spaces, 4 spaces
How to add a picture
The picture from the repository which the site belongs to
-
Just the picture
-
A picture with defined position and size
<div align="center"><img width="165" height="75" src="/assets/pics/pic01_green_test.png"/></div>
The picture from internet
-
Just the picture
-
A picture with defined position and size
<div align="center"><img width="65" height="75" alt="Demo pic for test" src="https://raw.githubusercontent.com/mzlogin/mzlogin.github.io/master/images/posts/markdown/demo.png"/></div>
360° image
Place a <a-scene> tag and its scripts supported by A-Frame.
<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
<a-scene style="aspect-ratio:1/1;width:100%" embedded>
<a-sky src="/assets/pics/puydesancy.jpg" rotation="0 -130 0"></a-sky>
<a-text font="kelsonsans" value="Puy de Sancy, France" width="6" position="-2.5 0.25 -1.5"
rotation="0 15 0"></a-text>
</a-scene>
Image courtesy: A-Frame example
How to compare two pictures
There are ways to create a comparative iframe. For example, How TO - Image Comparison Slider, JuxtaposeJS. Add the following to your post by using JuxtaposeJS.
<div class="juxtapose">
<img src="/assets/pics/img_forest.jpg" />
<img src="/assets/pics/img_snow.jpg" />
</div>
<script src="https://cdn.knightlab.com/libs/juxtapose/latest/js/juxtapose.min.js"></script>
<link rel="stylesheet" href="https://cdn.knightlab.com/libs/juxtapose/latest/css/juxtapose.css">
How to embed a map
a own map - geoJSON map
-
Place the following in any HTML page that supports javascript:
<script src="https://embed.github.com/view/geojson/<username>/<repo>/<ref>/<path_to_file>"></script> -
Set height and weight, default 420px (h) x 620px (w)
<script src="https://embed.github.com/view/geojson/<username>/<repo>/<ref>/<path_to_file>?width=<width>&height=<height>"></script> -
Example
a 3rd party map - google map
How to assign a variable
Assigning a variable in Github Markdown:
{ % assign variableTest = "This is a string variable." % }
{ % capture variableTest2 % }This is a string variable for syntax 2.{ % endcapture % }
- Note that, there is no space between curly bracket
{,}and percent sign%.
The content of variableTest is “ This is a string variable. “.
The content of variableTest2 is “ This is a string variable for syntax 2. “.
Thecontent test.
How to add a emoji 🙈
-
The easiest way is copy and paste
Visit Emojipedia, search , copy, and paste.
-
Use Jemoji
gem install jemojiAdd
gem 'jemoji'to gemfile.Add it as a plugin in
_config.yml.Note: It may cause other problem. For my site, it will confict with lunr.js.
Add a reveal.js presentation
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=500 height=400 src="/slides/2020-08-07-demo-from-revealjs.html#/"></iframe>
Press F to fullscreen mode.
Reference
- Basic syntax - Markdown guide
- markdown-guide
- MathJax in Markdown
- Equation Editor
- Jekyll: Previous And Next Posts
- Jekyll without plugins
- Basic syntax - Liquid template language
- Emojipedia
- How TO - Image Comparison Slider
- JuxtaposeJS - Easy-to-make frame comparisons
- List of Badges, in Markdown
- Basic HTML Codes for Beginners
- 360° image - A-Frame
- Google VRView with Jekyll