Quick static site template
source link: https://willschenk.com/howto/2024/quick_static_site_template/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Quick static site template
I've been trying to figure out minimal ways to try out ideas. Basically an easy way to throw up some code on the browser to test out what is possible without going through a whole thing. Right now I'm settling on vite and unocss, which just lets you start going with one HTML file and slowly be able to put stuff on it.
This lets me add npm
packages, see if I can get something working or
not, and leave it at that. I'll record my notes somewhere, but the
code and the node_modules
thankfully disappear into the aether
afterwards.
This is script I use to boilerplate things:
- Create a new temp directory
- Install vite and unocss
- Setup the
dev
andbuild
actions - Setup
unocss.config.js
so I can play with fonts - Mock out a simple HTML file
#!/bin/bash
cd $(mktemp -d)
echo We are now working in $(pwd)
echo Installing vite and unocss
npm i vite unocss
echo Setting up .gitignore
echo node_modules/ >> .gitignore
echo Adding scripts to package.json
mv package.json _package.json
cat > scripts.json <<SCRIPTEOF
{
"scripts": {
"dev": "unocss \"**/*.html\" -o main.css --watch & vite",
"build": "unocss \"**/*.html\" -o main.css && vite build"
}
}
SCRIPTEOF
jq '. + input' scripts.json _package.json > package.json
rm scripts.json _package.json
echo unocss.config
cat > unocss.config.js <<UNOEOF
// uno.config.ts
import {
defineConfig,
presetAttributify,
presetTypography,
presetUno
} from 'unocss'
import presetWebFonts from '@unocss/preset-web-fonts';
const fonts = presetWebFonts({
provider: 'google', // default provider
fonts: {
header: [ {
name: "Montserrat",
weights: ['400', '700']
} ],
sans: [ { name: 'Inter' } ]
}
})
export default defineConfig({
presets: [
presetAttributify(), // required when using attributify mode
presetUno(), // required
presetTypography(),
fonts,
],
})
UNOEOF
echo main.js
cat > main.js <<MAINEOF
import '@unocss/reset/tailwind.css';
import './main.css';
MAINEOF
echo index.html
cat > index.html <<INDEXEOF
<html>
<head>
<title>Hello</title>
<script src="main.js" type="module"></script>
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body >
<div max-w-prose mx-auto prose>
<h1 font-header text-4xl font-bold>Hello world</h1>
<p font-sans>This is my text, and I really like it</p>
</div>
</body>
</html>
INDEXEOF
pwd
Example: Adding shoelace
Run the script, and then in the generated directory:
npm install @shoelace-style/shoelace
Add in main.js
:
import '@shoelace-style/shoelace/dist/themes/light.css';
import '@shoelace-style/shoelace/dist/shoelace.js';
And then start using the web components inside of your html
file.
<sl-qr-code value="https://willschenk.com/" radius="0.5"></sl-qr-code>
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK