Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/rdmolony/rdmolony.github.io
My personal blog
https://github.com/rdmolony/rdmolony.github.io
jekyll tailwindcss
Last synced: 25 days ago
JSON representation
My personal blog
- Host: GitHub
- URL: https://github.com/rdmolony/rdmolony.github.io
- Owner: rdmolony
- License: gpl-3.0
- Created: 2021-07-21T18:05:56.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2024-01-22T08:55:13.000Z (12 months ago)
- Last Synced: 2024-12-16T01:52:59.302Z (26 days ago)
- Topics: jekyll, tailwindcss
- Language: CSS
- Homepage: https://www.rowanmolony.com
- Size: 6.95 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# `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
- [Clone this repository locally](https://docs.github.com/en/repositories/creating-and-managing-repositories/cloning-a-repository)[^GITHUB]
- Install [`ruby`](https://ruby-lang.org/)[^RUBY] & thus [`bundler`](https://github.com/rubygems/bundler)[^BUNDLER] & [`foreman`](https://github.com/ddollar/foreman)[^FOREMAN]
- Install this project's `gems` via `bundler` from `Gemfile.lock`
```sh
bundle install
```
- Install [`nodejs`](https://nodejs.org/)[^NODEJS] & thus [`tailwindcss`](https://tailwindcss.com/)[^TAILWIND]
- **Run it** ...
```sh
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 ...
```markdown
```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 ...
```sh
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
```