rdmolony.github.io

This website uses ...

• Jekyll to transform Markdown files into "static" files which the browser can understand or HTML/CSS/JS

• TailwindCSS¹ to style HTML

Installation

• Clone this repository locally²

• Install ruby³ & thus bundler⁴ & foreman⁵

• Install this project's gems via bundler from Gemfile.lock

  bundle install

• Install nodejs⁶ & thus tailwindcss¹

• Run it ...

  foreman start

How to ...

• Style Python or Mathematica code blocks

Jekyll (>3.0) has builtin support Rouge so the HTML generated by Jekyll for things like ...

    ```python
    def hi():
        print("hi)
    ```

... will automatically include classes that Rouge can hook into for styling.

Rouge needs me to define CSS for these classes which I can generate assets/css/syntax.css via ...

bundle exec rougify style github.dark > assets/css/syntax.css

---

Footnotes

Footnotes

1. Rather than only styling HTML elements via CSS or SCSS files, TailwindCSS encourages targeting specific elements directly in HTML via tailwind classes. It reads these HTML files to generate CSS for you by combining these classes & thus defining things font size, type, color

   I use npm ...

   npm install -D tailwindcss
   

   ↩ ↩²

2. I use git clone ...

   git clone git@github.com:rdmolony/rdmolony.github.io.git
   

   ... since I prefer to authenticate with GitHub via SSH ↩

3. I use nix ...

   nix profile install nixpkgs#ruby
   

   ↩

4. Enables installing gems from Gemfile & Gemfile.lock

   I use gem ...

   gem install bundler
   

   The first time I set this up I had issues which I fixed via bundle config set --global path "$HOME/.bundle/" ↩

5. foreman enables running multiple services at the same time - in this case jekyll & tailwindcss

   I use gem ...

   gem install foreman
   

   ↩

6. A JavaScript runtime

   I use nix ...

   nix profile install nixpkgs#nodejs
   

   ↩