The Making of This Site
Principles
In building this site, I prioritized:
- readability: layout and formatting indistinguishable from ‘reader view’
- speed: 100/100 score on PageSpeed Insights.
- maintainability: No JS, prefer low dependency and modern open source tools.
This site is designed to last (jeffhuang.com).
Implementation
Central Workflow
I use Hugo to locally generate static HTML from Markdown, using a customized theme. It is currently served through Netlify from a Github repository.
Peripheral Modifications
Favicons are the little icon you see next to the site name in the browser, and what your iPhone uses as the icon if you add a page to home screen.
Upload a PNG image to https://realfavicongenerator.net/, then place the output files in the root.
Then, in themes/jam/layouts/_default/baseof.html
, place the following right after the <head>
tag:
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#00a300">
<meta name="theme-color" content="#ffffff">
Attributions
- Jam theme by Ronalds Vilciņš
- Favicon turtle by Freepik from flaticon.com
Posted on