My personal website built with randomly chosen technologies
This static website is built with Eleventy.
Blog post data and content are generated in the following chain:
posts
provide the slug, title, content and optionally image (used for og:image
).posts/posts.11tydata.js
specifies the layout and prepares an OpenGraph image. If image
is not specified in front matter, an image is generated. Regardless of image generation, the image is resized and optimized and saved into public/cached
._includes/post.njk
renders the post page content and sets a permalink._includes/base.njk
render the entire content.Blog posts are collected as a custom collection called posts
. I didn't use tags
for blog posts collection because I wanted to show a list of tags on each page and it was tedious to ignore the posts
tag there.
The posts
collection is used for the following purposes:
blog/archives.njk
.Static assets and non-markdown files are copied to the output directory by pass-through copy.
A special case is JPEG/PNG images. The imageopt
transformer generates multiple image formats out of them and saves them into the public/cached
directory. Files in public/cached
can be cached forever because their file names have content-based hashes.
Prerequisites:
npm i -g yarn
git clone {this repo}
yarn
Create a new markdown file in the format of YYYY-mm-dd-post-slug.md
.
The content should look like:
---
title: "Post title"
tags: [TagA, TagB]
---
Post content goes here.
yarn start
It will build files and start a dev server. The build doesn't apply slow optimizations such as AVIF image format and Open Graph image generation. In order to enable the optimizations, use OPTIMIZE=1
or run yarn build
.
GitHub Action deploys each push to the main
branch to GitHub Pages.
The domain shuheikagawa.com
is resolved to IP addresses of Cloudflare CDN. Cloudflare CDN serves static contents whose origin is GitHub Pages. Contents in the cached
directory get a long Cache-Control
header.
Other services:
This static website started as an Octopress blog. I re-wrote it using Gulp, added and removed React server-side rendering. Currently, it's built with Eleventy.