rdmolony.github.io

rdmolony.github.io

My personal website

#jekyll#tailwindcss
Demo Download

rdmolony.github.io

This website uses ...

  • Jekyll to transform Markdown files (in _posts/ & _pages/) into files which a web browser can understand[^JEKYLL]

  • TailwindCSS to style it[^TAILWINDCSS]

Installation

  • Clone this repository[^GITHUB]

  • Install nix

  • (Optional) Install direnv - to automatically activate this environment on cd'ing to this directory

  • Or run ...

    nix develop

    ... to manually activate this nix environment

  • Install all Jekyll dependencies ...

    bundle install

[!NOTE] bundle installs all Jekyll Ruby dependencies via Gemfile & Gemfile.lock

How to ...

Launch a Jekyll server?

run-jekyll

... to watch changes to _posts, _pages, _layouts etc & automatically rebuild the site

Launch a TailwindCSS server?

run-tailwind

... to watch style changes to tailwind.css & propagate them to Jekyll via assets/

Style code blocks?

Jekyll (>3.0) has builtin support for 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

[^JEKYLL]:

Each `Markdown` file in `_pages/` and `_posts/` contains both:

- `Markdown` language specifying content. It allows me use special symbols (like `# Header`) instead of `HTML` (`<h1>Header</h1>`). This makes the content way more human readable in textual form.
- `Liquid` language specifying everything else. It allows me to specify page metadata (like dates), or perform special operations like linking one page to multiple other pages.

`Jekyll` understands both, and uses this understanding to transform transform these `Markdown` files into `HTML/CSS/Javascript`. Web browsers understand `HTML/CSS/Javascript`, humans, however, don't tend to find them particularly legible!

[^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)

[^TAILWINDCSS]:

`TailwindCSS` is being used in an atypical manner here. Typically, one would use it alongside a frontend framework to let one specify style in components directly in component `class` attributes, and the file watcher then propagates these attributes from `JS/JSX/TS/TSX` files (etc) to a `CSS` file. 

I'm using it here as one would normally use plain old `CSS`, by overriding top-level classes in a `CSS` file, since I find it to be a bit more concise as a language.
minimalacademicresumeportfoliodocumentationwikitailwindbootstrapdarkecommercegithub-pagesblog