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\longavailable.github.io
    
  • Execute the following command:

    bundle exec jekyll serve
    

    or with --drafts tag.

    bundle exec jekyll serve --drafts
    
  • Check the githubpages website from http://127.0.0.1:4000.

  • 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

    ![Pic01](/assets/pics/pic01_green_test.png)
    

    Pic01

  • 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

    ![Pic01](https://raw.githubusercontent.com/mzlogin/mzlogin.github.io/master/images/posts/markdown/demo.png)
    

    Pic01

  • 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>
Demo pic for test

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

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.

Reference


Share on:

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