Embedding videos in Jekyll

Screenshot from 2017-04-25 04-38-02

One of the main reasons I went with a markdown -> pandoc portfolio site instead of using jekyll: I couldn’t figure out how to embed “local” videos (video files inside my site, not from youtube or vimeo) in the jekyll sites.

Screenshot from 2017-04-25 04-44-42

Previously I was using the Jekyll Freelancer theme. With some modifications to allow for arrow key navigation.


However, any file that had a youtube video, I had to drop down to raw HTML. This was pretty painful. And since I was coercing the posts format to deal with “projects”, I had a crazy directory structure, something like “2015-01-01-project1.html”, which made editing lots of projects at once really annoying.

Thus, recently I switched to making my portfolio/project site in Markdown.
This was still kind of painful, but gave me a lot more control over the look.
I also enjoyed the minimalist structure of the final site, as compared to the glossy-yet-not-super-functional previous look when I built my site on top of the jekyll freelancer theme.

With my new webdev experience from bashing at grav for days on end, I was pretty easily able to modify this youtube embed script to do what I wanted.

I still find the post-first nature of jekyll annoying, yet it seems very reasonable to me now that I can just ignore that functionality entirely and build the rest of the site taking advantage of the templating engine and data / yaml features. After bashing at Grav, I’m also a lot more comfortable writing my own “page templates” for iterating through data files.

That is, I now understand how to leave the posts folder blank (ignore it entirely) and just write pages using my own Liquid templates.

Tutorial here: https://jekyllrb.com/tutorials/navigation/

Before, the Jekyll structure seemed overwhelming, at as always I’m only updating/creating a portfolio site when I’m applying to something. So I would always get frustrated and give up halfway through when creating/updating the portfolio site would take at least two entire days away from applications.

I also just tried and really enjoy the jekyll admin plugin, which allows me to upload files (via drag-and-drop) and provides a convenient browser-based GUI for creating pages.

The markdown file format I ended up settling down on started getting tedious and hard to organize as well. There was a lot of repetition that Liquid templating would solve. And a lot of “magic filenames” that were not human-readable, and annoying to keep consistent.

Screenshot from 2017-04-25 04-49-45

So it may be time to redo my portfolio site again.

Grav is more powerful, but even more “jargon heavy” / heavier of a web framework. You can do fancy things such as user authentication etc. in Grav. But dangnggg it is a heavy framework with a really complex file structure that appears like magical voodoo that is impossible to understad to newcomers…

For a sample of the craziness, see: https://github.com/nouyang/grav-plugin-milestones


On to the actual video-embedding plugin. The key was figuring out how to access the Jekyll site variables from within the plugin file. Turns out you use the syntax Jekyll.configuration({})['url' (and use “||” to provide a default value).


1. https://jekyllrb.com/docs/quickstart/
2. Create a file, “my_site/_plugins
(create the _plugins folder if it doesn’t exist yet in your jekyll install)
3. Create a file called “video.rb” (or whatever you want) with the code at the bottom of this page
4. Put a video file in your site. Usually you can create an “assets” or “downloads” folder. For instance, I put a “spacetestSMALL_512kb.mp4” file into “my_site/assets” folder
Note: mp4 works consistently in all my browsers. ogv did not.
4. Use in your posts with following format:
{% Video spacetestSMALL_512kb.mp4 500 400 %}


class Video < Liquid::Tag
  Syntax = /^\s*([^\s]+)(\s+(\d+)\s+(\d+)\s*)?/

  def initialize(tagName, markup, tokens)

    @url = Jekyll.configuration({})['url'] || 'http://example.com'

    if markup =~ Syntax then
      @id = $1

      if $2.nil? then
          @width = 560
          @height = 420
          @width = $2.to_i
          @height = $3.to_i
      raise "No Video Source provided"


  def lookup(context, name)
    lookup = context
    name.split(".").each { |value| lookup = lookup[value] }

  def render(context)
     "<iframe width=\"#{@width}\" height=\"#{@height}\" src=\"#{@base_url}/#{@id}\" ></iframe>"

  Liquid::Template.register_tag "Video", self



Screenshot from 2017-04-25 04-38-02

getting started contributing to jekyll admin (front end) & feature “specify folder to upload static files to”

Screenshot from 2017-04-25 04-32-28

I was able to get static file upload to a different directory. directory is automatically created by jekyll admin. Thumbnail even populates in http://localhost:3000/admin/staticfiles !

First steps for addressing: https://github.com/jekyll/jekyll-admin/issues/201
Feature request: Specify folder to upload static files to #201

Next steps: make a little GUI button for toggling “assets” or something like that (not sure how to make it not an arbitrary folder, but still allow user input into it)


const foo = "static/" + staticfileAPIUrl(file.name);

return fetch(foo, {
          method: 'PUT',
          body: payload



==================================== INSTALL ======================

my distribution had ruby installed already.

sudo apt install ruby-dev

git clone https://github.com/jekyll/jekyll-admin && cd jekyll-admin

sudo gem update –system

Gem::Ext::BuildError: ERROR: Failed to build gem native extension.
An error occurred while installing rainbow (2.2.2), and Bundler cannot continue.

sudo gem install rake


Bundle complete! 9 Gemfile dependencies, 46 gems now installed.
Use `bundle show [gemname]` to see where a bundled gem is installed.
script/bootstrap: line 7: npm: command not found

sudo apt install npm

nrw@chai:~/projects/jekyll-admin$ script/server-frontend

sh: 1: npm-run-all: not found

npm install npm-run-all

nrw@chai:~/projects/jekyll-admin$ script/server-frontend

/usr/bin/env: ‘node’: No such file or directory

sudo apt install nodejs –> already installed’




curl -sL https://deb.nodesource.com/setup_6.x | sudo -E bash -
sudo apt-get install -y nodejs


sh: 1: babel-node: not found

nrw@chai:~/projects/jekyll-admin$ npm-run-all clean lint build:*
npm-run-all: command not found





nrw@chai:~/projects/jekyll-admin$ npm install babel-node

> babel-node@6.5.3 postinstall /home/nrw/projects/jekyll-admin/node_modules/babel-node
> node message.js; sleep 10; exit 1;

| Hello there undefined 😛 │
| You tried to install babel-node. This is not babel-node 🚫 │
| You should npm install -g babel-cli instead 💁 . │
| I took this module to prevent somebody from pushing malicious code. 🕵 │
| Be careful out there, undefined! 👍 │

npm install babel-cli


npm ERR! Failed at the jekyll-admin@0.4.1 start-message script ‘babel-node tools/startMessage.js’.

npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the jekyll-admin package,
npm ERR! not with npm itself.

nodejs –version

npm –version


npm update npm -g


nrw@chai:~/projects/jekyll-admin$ script/server-frontend
> jekyll-admin@0.4.1 remove-dist /home/nrw/projects/jekyll-admin
> rimraf ./lib/jekyll-admin/public

throw e;

Error: Couldn’t find preset “stage-0” relative to directory “/home/nrw/projects/jekyll-admin”


nrw@chai:~/projects/jekyll-admin$ npm install babel-preset-stage-0
throw e;

Error: Couldn’t find preset “react” relative to directory “/home/nrw/projects/jekyll-admin”
throw e;

Error: Couldn’t find preset “react” relative to directory “/home/nrw/projects/jekyll-admin”


npm install react


$ script/boostrap


==================================== static file URL ======================






// send the put request

return fetch(staticfileAPIUrl(file.name), { method: ‘PUT’, body: payload })








vi staticfiles.js

Fixing vi paragraph motion: change empty line definition to include blank lines with spaces and tabs

Vim Paragraph Motions

(code from udacity “AI for robotics” class, lesson 8 particle filters)

I was feeling frustrated as the command I use all the time, moving forward or backward by a paragraph using `{` or `}`, was skipping a complete screen up and down. In the above screenshotted example, I was moving from the start of the class definition (up an entire screen) to the end,  instead of the behavior I expected of moving from function to function within the class.

Turns out that the vim’s paragraph definition only includes completely empty lines, and does not include lines that appear empty but have whitespace such as spaces or indents.


I installed vundle and installed the vim-paragraph-motion plugin. That is, in vim.rc, I added the following bundle line below the plugin vundle.vim line.

Plugin ‘VundleVim/Vundle.vim’
Bundle ‘dbakker/vim-paragraph-motion’

Then I closed and reopened vim, and ran `:BundleInstall`.

Reopened the file I was editing, and voila, paragraph motion commands behaved as I was expecting.

Credit to this post.

Debugging: show whitespace including spaces and tabs

I was confused debugging this for a while, as `:set list` doesn’t show spaces and tabs! So the end character was appearing as a magically “indented” end-of-line character. My search terms were all out of whack.

def some func():

vs, with help from this post, using `:set listchars=eol:$,tab:>-,trail:~,extends:>,precedes:<`

def some func():

Bonus! vim: go to definition of variable under cursor

Also, today I discovered the use of `gd` , which moves you to where the variable under your cursor is defined!

Then you can use `Ctrl-O` to move back to where you started (and `Ctrl-I` if you want to go forward in your jump list).

Credit to this post.