You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: _posts/2025-03-30-setup-deploy-jekyll-v4-tailwindcss-alpinejs.md
+14-14Lines changed: 14 additions & 14 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -13,9 +13,9 @@ Last month, I posted an [overview of how I redesigned my website]({% link _posts
13
13
14
14
## Set up Docker Compose for local development (optional)
15
15
16
-
This is optional but I highly recommend it. Instead of having to install and configure Ruby and other dependencies directly in your system, you'll run them encapsulated and preconfigured in a Docker image, specifically, the [jvconseil/jekyll-docker](https://github.com/JV-conseil/jekyll-docker) image.
16
+
This is optional, but I highly recommend it. Instead of having to install and configure Ruby and other dependencies directly in your system, you'll run them encapsulated and preconfigured in a Docker image, specifically, the [jvconseil/jekyll-docker](https://github.com/JV-conseil/jekyll-docker) image.
17
17
18
-
The first thing you'll need is a `docker-compose.yml` file on your project's root directory with the following content:
18
+
The first thing you'll need is a `docker-compose.yml` file in your project's root directory with the following content:
19
19
20
20
```yaml
21
21
services:
@@ -36,7 +36,7 @@ services:
36
36
37
37
This configuration creates one service called `site`, makes it take the `stable` version of the `jvconseil/jekyll-docker` image as its base, defines a custom default command that will be executed when the service is run, exposes the internal port 4000 of the container as port 4000 in the host machine, defines container-host volume mappings for the Jekyll website directory and Bundler's gems directory, and defines the environment variables. The custom command simply installs Node.js dependencies and then starts the Jekyll development server. The environment variables are pretty self-descriptive, but just in case, don't forget to set `TZ` to your timezone.
38
38
39
-
The other thing you'll need is an `.apk` file on your project's root directory to list additional Alpine Linux packages that will be installed when the image is built and run. Specifically, you need it to install `nodejs` and `npm` to be able to use the Node.js package manager, so the file would look like this:
39
+
The other thing you'll need is a text file named `.apk` in your project's root directory to list additional Alpine Linux packages that will be installed when the image is built and run. Specifically, you need it to install `nodejs` and `npm` to be able to use the Node.js package manager, so the file would look like this:
40
40
41
41
```
42
42
nodejs
@@ -86,7 +86,7 @@ I want to mention that one of the changes introduced in Jekyll v4 is that Jekyll
86
86
87
87
## Install and configure Tailwind CSS as a PostCSS plugin on top of Jekyll
88
88
89
-
We're going to install Tailwind CSS as a PostCSS plugin so that we can integrate it into Jekyll using the [jekyll-postcss-v2](https://github.com/bglw/jekyll-postcss-v2) gem. That gem creates a hook in the Jekyll build process, so that it automatically regenerates the Tailwind CSS classes your website uses every time you build, or every time you save changes to a file when you're running the development server.
89
+
We're going to install Tailwind CSS as a PostCSS plugin so that we can integrate it into Jekyll using the [jekyll-postcss-v2](https://github.com/bglw/jekyll-postcss-v2) gem. That gem creates a hook in the Jekyll build process, so that it automatically regenerates the Tailwind CSS classes your website uses every time you build or every time you save changes to a file when you're running the development server.
90
90
91
91
First, install the latest version of Tailwind CSS, its PostCSS plugin, and PostCSS itself using `npm`:
92
92
@@ -146,7 +146,7 @@ exclude:
146
146
# ...
147
147
```
148
148
149
-
Finally, to actually apply Tailwind CSS to your website you need at least one CSS file with two required features: first, it has to be marked with [Front Matter](https://jekyllrb.com/docs/front-matter/) in the beginning, even if it's empty, so that it's treated as a "page" by Jekyll and thus processed by the `jekyll-postcss-v2` plugin; and second, it has to contain at least one [Tailwind CSS directive](https://tailwindcss.com/docs/functions-and-directives) so that the `@tailwindcss/postcss` plugin detects it as a Tailwind CSS file. Therefore, in the simplest case, you might have a single file, let's say `main.css`, with empty Front Matter in the beginning and a simple `@import` directive to import Tailwind CSS itself:
149
+
Finally, to actually apply Tailwind CSS to your website, you need at least one CSS file with two required features: first, it has to be marked with [Front Matter](https://jekyllrb.com/docs/front-matter/) in the beginning, even if it's empty, so that it's treated as a "page" by Jekyll and thus processed by the `jekyll-postcss-v2` plugin; and second, it has to contain at least one [Tailwind CSS directive](https://tailwindcss.com/docs/functions-and-directives) so that the `@tailwindcss/postcss` plugin detects it as a Tailwind CSS file. Therefore, in the simplest case, you might have a single file, let's say `main.css`, with empty Front Matter in the beginning and a simple `@import` directive to import Tailwind CSS itself:
150
150
151
151
```css
152
152
---
@@ -162,9 +162,9 @@ After you've done all of that, you can start using Tailwind CSS classes in your
162
162
163
163
## Deploy to GitHub Pages using GitHub Actions
164
164
165
-
By default, GitHub Pages takes your main/master branch and builds it using the `github-pages` gem, which is locked to Jekyll v3, as mentioned above, and of course it doesn't install Node.js dependencies. Therefore, to deploy your Jekyll v4 + Tailwind CSS setup to GitHub Pages you'll have to configure a custom deployment workflow using GitHub Pages, which is simpler than it sounds.
165
+
By default, GitHub Pages takes your main/master branch and builds it using the `github-pages` gem, which is locked to Jekyll v3, as mentioned above, and of course it doesn't install Node.js dependencies. Therefore, to deploy your Jekyll v4 + Tailwind CSS setup to GitHub Pages, you'll have to configure a custom deployment workflow using GitHub Pages, which is simpler than it sounds.
166
166
167
-
To create that workflow, simply create a YAML file named something like `github-pages.yml` in the `.github/workflows` directory of your project with the following content and make sure to push it to GitHub:
167
+
To create that workflow, simply create a YAML file named something like `github-pages.yml` in the `.github/workflows` directory of your project with the following content, and make sure to push it to GitHub:
168
168
169
169
```yaml
170
170
name: Build and deploy this site to GitHub Pages
@@ -217,15 +217,15 @@ I'll briefly explain each part of the file:
217
217
2. Set the workflow to be activated whenever there is a push to the `master` branch. Change that to `main` if that's your repository's main branch, of course.
218
218
3. Set the environment variables appropriately. Don't forget to change `TZ` to your timezone.
219
219
4. Define one job named `github-pages` that runs on the latest version of Ubuntu and executes the following steps:
220
-
1. Checkout the repository so that the workflow can access it.
221
-
2. Setup Ruby version 3.3 (update that in the future appropriately), enabling Bundler's cache.
220
+
1. Check out the repository so that the workflow can access it.
221
+
2. Set up Ruby version 3.3 (update that in the future appropriately), enabling Bundler's cache.
222
222
3. Install the apt dependencies specified in the `.apt` file.
223
-
4. Setup Node.js version 20 (update that in the future appropriately).
223
+
4. Set up Node.js version 20 (update that in the future appropriately).
224
224
5. Install Node.js dependencies with `npm install`. In case you didn't know already, you're supposed to push `package.json` and `package-lock.json` to GitHub.
225
225
6. Build the website with Jekyll, enabling verbose mode to have more informative logs.
226
226
7. Deploy the generated static website to a branch named `gh-pages`.
227
227
228
-
The second thing you need, which I briefly mentioned above, is an `.apt` file in your project's root directory, where you'll list all the Ubuntu packages you're gonna need to install. This is **not** the same as the `.apk` package mentioned earlier in the article, which is for _Alpine Linux_ packages and will only be used by the Docker image for local development. Also, because you're getting Node.js in another step of the workflow, you should **not** include `nodejs` and `npm` in the `.apt` file, so in the simplest case the file will be empty.
228
+
The second thing you need, which I briefly mentioned above, is a text file named `.apt` in your project's root directory, where you'll list all the Ubuntu packages you're gonna need to install. This is **not** the same as the `.apk` file mentioned earlier in the article, which is for _Alpine Linux_ packages and will only be used by the Docker image for local development. Also, because you're getting Node.js in another step of the workflow, you should **not** include `nodejs` and `npm` in the `.apt` file, so in the simplest case the file will be empty.
229
229
230
230
Needless to say, you don't need to add `.apt` nor `.github/workflows/github-pages.yml` to Jekyll's exclusion list because they're excluded automatically.
231
231
@@ -247,7 +247,7 @@ First, install Alpine.js and [esbuild](https://esbuild.github.io/) using `npm`:
247
247
npm install alpinejs esbuild
248
248
```
249
249
250
-
I figured out that I had to use something bundle Alpine.js into my JavaScript file after I tried to use it by itself and it didn't work. I asked Claude 3.5 Sonnet and it recommended using esbuild and gave me the command options I needed.
250
+
I figured out that I had to use something to bundle Alpine.js into my JavaScript file after I tried to use it by itself and it didn't work. I asked Claude 3.5 Sonnet and it recommended using esbuild and gave me the command options I needed.
251
251
252
252
On that note, the next thing you need to do is define a Node.js build script so that you can use it to bundle your JavaScript before serving your website. Add a `scripts` section to your `package.json` and define the `build` script like this:
253
253
@@ -315,7 +315,7 @@ Alpine.start();
315
315
316
316
Basically: import the Alpine.js module, add it to the `window` object for easy access on each page, and initialize it.
317
317
318
-
If you want to implement a dark mode toggle like I did, you're gonna need a few more lines before `Alpine.start()`:
318
+
If you want to implement a dark mode toggle like I did, you're going to need a few more lines before `Alpine.start()`:
319
319
320
320
```js
321
321
import Alpine from "alpinejs";
@@ -340,4 +340,4 @@ Alpine.store("darkMode", {
340
340
Alpine.start();
341
341
```
342
342
343
-
I implemented it with an Alpine.js store, its API for global state management. On the first site visit, it enables or disables dark mode based on the user's browser setting, and it will continue to do so as long as the user doesn't use the toggle. Once the user clicks the toggle for the first time, it will save the setting to `localStorage` as well so that the next time the user visits the website it will use the value from there instead of the browser setting.
343
+
I implemented it with an Alpine.js store, its API for global state management. On the first site visit, it enables or disables dark mode based on the user's browser setting, and it will continue to do so as long as the user doesn't use the toggle. Once the user clicks the toggle for the first time, it will save the setting to `localStorage` as well so that the next time the user visits the website, it will use the value from there instead of the browser setting.
Copy file name to clipboardExpand all lines: _posts/2025-03-31-links-march-2025.md
+4-4Lines changed: 4 additions & 4 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -9,18 +9,18 @@ category: personal
9
9
---
10
10
11
11
-_[How Instagram scaled to 14 million users with only 3 engineers](https://read.engineerscodex.com/p/how-instagram-scaled-to-14-million)_ by Engineer's Codex (2023-09-15). Keep it simple, stupid.
12
-
-_[Why I Am Not A Conflict Theorist](https://www.astralcodexten.com/p/why-i-am-not-a-conflict-theorist)_ by Scott Alexander (2025-02-26). A masterful takedown of the theory that political disagreements are only or primarily about material conflict. Scott proposes a psychological theory as his alternative, which I think is pretty mcuh correct _if_ it's supplemented by realism about the heritability of political values and behavior.
12
+
-_[Why I Am Not A Conflict Theorist](https://www.astralcodexten.com/p/why-i-am-not-a-conflict-theorist)_ by Scott Alexander (2025-02-26). A masterful takedown of the theory that political disagreements are only or primarily about material conflict. Scott proposes a psychological theory as his alternative, which I think is pretty much correct _if_ it's supplemented by realism about the heritability of political inclinations and behavior.
13
13
-_[Most Externalities are Solved with Technology, Not Coordination](https://www.maximum-progress.com/p/most-externalities-are-solved-with)_ by Maxwell Tabarrok (2025-03-14). Coordination-based solutions are still important, just overrated. I'd add that coordination-based solutions *do not* require a coercive monopolist of force and authority, but I'd be screaming into the void yet again.
14
14
-_[Cognitive evolution in eastern Eurasia](https://www.aporiamagazine.com/p/cognitive-evolution-in-eastern-eurasia)_ by Peter Frost (2025-02-08).
15
15
- Three articles by Emil Kirkegaard:
16
16
-_[Bayesian hereditarianism](https://www.emilkirkegaard.com/p/bayesian-hereditarianism)_ (2025-02-21). If you use Bayesian reasoning, you should favor hereditarianism.
17
17
-_[Why are female intellectuals crazy?](https://www.emilkirkegaard.com/p/why-are-female-intellectuals-crazy)_ (2025-02-12). Here he presents a speculative model of sex differences among people with statistically uncommon beliefs, which answers the title question.
18
18
-_[People did not used to marry early in the good old times](https://www.emilkirkegaard.com/p/people-did-not-used-to-marry-early)_ (2025-02-28). Arctotherium touched on this point in [his in-depth article](https://arctotherium.substack.com/p/the-western-european-marriage-pattern) about the Western European Marriage Pattern.
19
-
-_[Tegmark's Mathematical Universe Defeats Most Proofs Of God's Existence](https://www.astralcodexten.com/p/tegmarks-mathematical-universe-defeats)_ by Scott Alexander (2025-02-19). Disclaimer: Not saying I agree or disagree with the theory.
20
-
- Supplement with _[Highlights From The Comments On Tegmark's Mathematical Universe](https://www.astralcodexten.com/p/highlights-from-the-comments-on-tegmarks)_ (2025-02-21). Scott pretty much dismisses most of the criticisms but I think some have merit.
19
+
-_[Tegmark's Mathematical Universe Defeats Most Proofs Of God's Existence](https://www.astralcodexten.com/p/tegmarks-mathematical-universe-defeats)_ by Scott Alexander (2025-02-19). Disclaimer: I'm not quite convinced by the theory.
20
+
- Supplement with _[Highlights From The Comments On Tegmark's Mathematical Universe](https://www.astralcodexten.com/p/highlights-from-the-comments-on-tegmarks)_ (2025-02-21). Scott dismisses most of the criticisms, but I think some have merit.
21
21
- Three articles by Michael Huemer:
22
22
-_[An Introduction to the Problem of Authority](https://fakenous.substack.com/p/an-introduction-to-the-problem-of)_ (2025-02-22). A brief summary of his intuitionist case for libertarianism.
23
23
-_[Are Men and Women Different?](https://fakenous.substack.com/p/are-men-and-women-different)_ (2025-02-01). Yes, obviously.
24
24
-_[The Theory of Love](https://fakenous.substack.com/p/the-theory-of-love)_ (2025-03-15).
25
25
-_[Can Systems Stop Culture Drift?](https://www.overcomingbias.com/p/can-systems-stop-culture-drift)_ by Robin Hanson (2025-02-27).
26
-
-_[Only About 40% Of The Cruz "Woke Science" Database Is Woke Science](https://www.astralcodexten.com/p/only-about-40-of-the-cruz-woke-science)_ by Scott Alexander (2025-02-14). He's mostly right, but the fact that the US government was incentivizing assertions of wokeness, even if superficial, to get grants is bad by itself. Also, the government shouldn't be giving grants for scientific research anyway.
26
+
-_[Only About 40% Of The Cruz "Woke Science" Database Is Woke Science](https://www.astralcodexten.com/p/only-about-40-of-the-cruz-woke-science)_ by Scott Alexander (2025-02-14). He's mostly right, but the point is that it's bad that the US government was incentivizing assertions of wokeness, even if superficial, to get grants. Also, the government shouldn't be giving grants for scientific research anyway.
0 commit comments