I Made A Blog

Hello, I made this blog and this is how.

Framework

React

I've been using React since 2015 (v0.14 I think!) and I don't see myself switching anytime soon. What I love about React is that it's just JavaScript, there's JSX but you can opt to write createElement if you'd prefer.

Remix + Vite

For a framework I chose Remix + Vite. Remix has been something I've been looking into and this blog was the perfect chance to finally try it out.

When looking at the landscape of React frameworks there's purely client side options like CRA or Vite, and SSR/SSG options like Next.js, Gatsby, and Remix.

I knew I wanted a SSR/SSG option because it would provide better searching engine indexing support. So I was between Next.js, Gatsby, and Remix. Out of the three Remix felt the most flexible. While I think Next.js and Gatsby would fit my needs well for this blog Remix was the only option that fits my needs both for simple content sites like this and complex webapps.

And now that Remix supports Vite as a compiler it was a no brainer.

Configuration

import {vitePlugin as remix} from '@remix-run/dev'
import {defineConfig} from 'vite'
import autoprefixer from 'autoprefixer'
import tsconfigPaths from 'vite-tsconfig-paths'

export default defineConfig({
  css: {
    postcss: {
      plugins: [autoprefixer({})],
    },
  },
  plugins: [
    remix({
      ignoredRouteFiles: ['**/.*'],
      serverModuleFormat: 'esm',
    }),
    tsconfigPaths(),
  ],
})

Styling

Pico.css

I just wanted a lightweight, semantic friendly CSS library to build off of. Pico.css fit that perfectly.

So far I've only had to make the following customizations:

:root {
  --pico-font-family: 'Lato', sans-serif;
  --pico-font-family-monospace: 'Victor Mono', monospace
}


h1,
h2,
h3,
h4,
h5,
h6 {
  --pico-font-family: 'Merriweather', serif;
}

body > header {
  padding-bottom: 0;
}

body > main {
  padding-bottom: 0;
}

body > footer {
  padding-bottom: 0;
}

section:last-child {
  margin-bottom: 0;
}

:where(ol, ul) li:last-child {
  margin-bottom: 0;
}

flexboxgrid

One thing Pico doesn't come with is a grid system. Rather than build one myself I decided to just use flexboxgrid. It's pretty close to what I usually end up with anyways. Like Pico, flexboxgrid is small and mostly gets out of your way.

Future Work

px => rem

picocss is great but it's styled with px and I prefer using rem. To make styling with rem easier I also scale the base font-size to make 1rem === 10px.

html {
  /* set the document's font size to 10px */
  font-size: 62.5%;
}

body {
  /* set the body's font size back to 16px */
  font-size: 1.6rem;
}

.my-component {
  padding-right: 1.2rem; /* 12px */
}

Content

mdx + mdx-bundler

I wanted to write my blog posts in markdown. Maybe adding some occasional additional behavior. MDX is the perfect solution to this.

Rather than build the all the MDX posts prior to deploy I wanted them to be built on demand by the Remix server. This way there's no additional build step during deploy.

Deplopy

GitHub Actions

My CI of choice is GitHub Actions. There's great community plugins and the frist 2,000 minutes are free which is plenty to push updates to this blog.

Fly.io

Fly has first class support for Remix apps.

app = "jacehensleydotdev"
primary_region = "sea"
kill_signal = "SIGINT"
kill_timeout = "5s"

[http_service]
  internal_port = 3000
  force_https = true
  auto_stop_machines = true
  auto_start_machines = true
  min_machines_running = 0
  processes = ["app"]

In the future I'm looking to add health checks and monitoring to my Fly configuration.