rdmolony.github.io

rdmolony.github.io

My personal blog

#jekyll#tailwindcss
Demo Download

rdmolony.github.io

This website uses ...

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

  • TailwindCSS[^TAILWIND] to style HTML

Installation

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

[^BUNDLER]:

Enables installing `gems` from `Gemfile` & `Gemfile.lock` 

I use [`gem`](https://ruby-lang.org/) ...

```sh
gem install bundler
```

The first time I set this up [I had issues](https://github.com/rdmolony/til/blob/2b968e9e27516516c1afdbd979a4e183f640acae/til/fix-gem-not-installed-on-my-machine.md) which I fixed via `bundle config set --global path "$HOME/.bundle/"`

[^FOREMAN]:

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

I use [`gem`](https://ruby-lang.org/) ...

```sh
gem install foreman
```

[^GITHUB]:

I use [`git clone`](https://git-scm.com/) ...

```sh
git clone [email protected]:rdmolony/rdmolony.github.io.git
```

... since I prefer to [authenticate with `GitHub` via `SSH`](https://docs.github.com/en/authentication/connecting-to-github-with-ssh)

[^NODEJS]:

A `JavaScript` runtime

I use [`nix`](https://github.com/DeterminateSystems/nix-installer) ...

```sh
nix profile install nixpkgs#nodejs
```

[^RUBY]:

I use [`nix`](https://github.com/DeterminateSystems/nix-installer) ...

```sh
nix profile install nixpkgs#ruby
```

[^TAILWIND]:

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`](https://nodejs.org/) ...

```sh
npm install -D tailwindcss
```
minimalacademicresumeportfoliodocumentationwikitailwindbootstrapdarkecommercegithub-pagesblog