How to write a Jekyll blog

Posted by Bruce Liu on September 1, 2019 , updated on August 24, 2023

🏷️ Tags: first blog , Jekyll , markdown , map , picture , emoji

How to test a blog using bundle:

  • Navigate to path of the githubpages repository.

    cd D:\git\githubPages\
  • Execute the following command:

    bundle exec jekyll serve

    or with --drafts tag.

    bundle exec jekyll serve --drafts
  • Check the githubpages website from

  • Ctrl + C quit the bundle serve.

Markdown skills

Space, tab, and blank line

## Header line h2.

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=""/></div>
Demo pic for test

360° image

Place a <a-scene> tag and its scripts supported by A-Frame.

<script src=""></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>

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" />
<script src=""></script>
<link rel="stylesheet" href="">

How to embed a map

a own map - geoJSON map

  • Place the following in any HTML page that supports javascript:

    <script src="<username>/<repo>/<ref>/<path_to_file>"></script>
  • Set height and weight, default 420px (h) x 620px (w)

    <script src="<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. “.

The​content test.

How to add a emoji 🙈

  • The easiest way is copy and paste

    Visit Emojipedia, search , copy, and paste.

  • Use Jemoji

    gem install jemoji

    Add 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.


Share on:

« PREVIOUS: The detailed steps of installing Home Assistant Operating System on Ubuntu
NEXT: 鄱阳湖三部曲 »