Working with Jekyll

My helpful screenshot

This blog post has been created to remind myself the complete process to install an initial functionin bundle and how to mantain it.

Create the initial bundle

The following step are the ordered list of the commands that need to be exectued to get a new and fresh version on the initial bundle.

  • If a suddend close of the command line occours, reinstall a new bundle and substitute the old folder into the fresh one.
  1. jekyll new Your New Blog
  2. cd your new blog
  3. gem install bundler
  4. (bundle add webrick)
  5. bundle install
  6. bundle exec jekyll serve

Create and modify posts

To modify posts simply add an .md file to the _post directory.

Create new sections in the head bar

In _site folder copy About folder and change name at the new directory.

I don’t have _includes foldes in the default jekyll website creation?

Find additional forlders _includes:

Basically Jekyll wants you to use themes, so you can’t see _layouts (evidenzia parola), _includes, _sass, _assets anymore.

To use previous behaviour simply copy from the gemfile:

open $(bundle show minima)

Copy the 4 folders into your jekyll directory

Ref:

  • https://stackoverflow.com/questions/38891463/jekyll-default-installation-doesnt-have-layouts-directory

How to remove the subscribe via RSS from home

Include MathJax

Here’s a brief summary:

  • In the _config.yml, add the following lines:
# Build settings
  markdown: kramdown
  • On the top of the posts that you’d like to add mathjax support (it’s called the YAML ‘‘front matter’’) , add the following line:
usemathjax: true
  • Add these lines to _includes/head.html:
  <script>
    MathJax = {
      tex: {
        inlineMath: [['$', '$'], ['\\(', '\\)']],
        packages: ['base', 'newcommand', 'configMacros']
      },
      svg: {
        fontCache: 'global'
      }
    };
    </script>
      


<script type="text/x-mathjax-config">
  MathJax.Hub.Config({
  TeX: { equationNumbers: { autoNumber: "AMS" } }
  });
</script>
<script type="text/javascript" async src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
  • After that, simply wrap the math symbols with two double-dollar sign $$ for page equations and \\( \\) for in-line math:
$$E=mc^2$$

You should be able to see it in your post as: \(E=mc^2\)

A note on Matrices rendering:

Matrices are rendering if all the correct keywords are in the equations.

\[\hat{y_3}= \left[\begin{array}{rr} 4 & 8 \end{array}\right] \left[\begin{array}{r} 24 \\ 4 \\ \end{array}\right] = 128 > 0\]

Ref:

  • http://webdocs.cs.ualberta.ca/~zichen2/blog/coding/setup/2019/02/17/how-to-add-mathjax-support-to-jekyll.html
  • https://alanduan.me/random/mathjax/
  • https://docs.mathjax.org/en/latest/basic/mathematics.html

Mathjax inline mode not rendering

You can enable the $ … $-style inline mode by inserting the following code into the <head> section of your HTML before MathJax is being loaded. This way, you can invent new delimiters, too.

  <script>
    MathJax = {
      tex: {
        inlineMath: [['$', '$'], ['\\(', '\\)']],
        packages: ['base', 'newcommand', 'configMacros']
      },
      svg: {
        fontCache: 'global'
      }
    };
    </script>

Ref:

  • https://tex.stackexchange.com/questions/27633/mathjax-inline-mode-not-rendering

Learn how to write in Jekyll markdown

_posts : by using ` to delimit the word to highlight the effect will be showed

Include pieces of code:

def print_hi(name)
  puts "Hi, #{name}"
end
print_hi('Tom')
#=> prints 'Hi, Tom' to STDOUT.

Useful cheat-sheet

Check out the Jekyll cheat-sheet

My page shows fine locally but on github the theme is gone: Deploy GitHub Pages

  • Please follow the instructions of the following source:

How To Deploy GH Pages

  • To do this we have to use command line, and authentication will be required: make sure you follow the instruction to obtain a Token:

Obtain Token

  • Add to config.yml remote theme: /directory

  • To render MathJax in Posts add at the top of each post:

<script type="text/javascript" async
  src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-MML-AM_CHTML">
</script>

  • To not rendere future Posts online add this to the config.yml file: future: false

  • If pictures doesn’t render in Posts set the right directory:

Render Pictrues in Posts

How to include links:

Check out the Jekyll docs for more info on how to get the most out of Jekyll. File all bugs/feature requests at Jekyll’s GitHub repo. If you have questions, you can ask them on Jekyll Talk.