This is a template for generating static website with Hugo, but that uses TailwindCSS and has dynamic components made with Svelte.
When running npm run build there are 3 stages:
rollup -cwill take Svelte components, generate.jsand put into./staticfoldertailwindcss -i main.css -o ./static/css/bundle.css --minifywill run Tailwind, it will take config from the file, and generate CSS for all .svelte and .html files, put into./staticfolderhugowill generate pages and put into./public, then it will copy everything (our new .js and .css files) from./staticinto./public
npm run dev will do the same but those processes will run and watch for changes. Whenever a change happends, it will do same stuff as above.
Maybe there is a better way, I am not a frontend dev.
-
Init empty npm project
npm init -y -
Add dev dependency. It will make it go into
package.jsonnpm install -D rollup -
Add Svelte
npm i svelte -
Write JS and Svelte - main.js and App.svelte
-
Add plugins - for resolving third-party packages and Svelte:
npm i -D @rollup/plugin-node-resolve rollup-plugin-svelte -
Create Rollup config
touch rollup.config.jsIt exports Rollup config object. Input - all inputs, starting point of bundling; Output - where the stuff goes; Plugins - plugins (yes, cap)
-
Add
scriptssection topackage.jsonto be able to invoke rollup withrpm run x"scripts": { "dev": "rollup -c -w" }
-
Add HTML
touch public/index.html -
Add server to serve the page
npm i -D rollup-plugin-serve -
Add to plugins in rollup config
serve('public') -
Run and check at
http://localhost:10001/npm run dev -
Add live reload
npm i -D rollup-plugin-livereloadUpdate rollup config
import livereload from 'rollup-plugin-livereload' livereload("public/")
- Generate basic site
hugo new site . --force - Remove dirs that are not needed right now
rm -rf assets content data i18n themes - Create js folder
mkdir static/js - Create basic layout:
- Create layouts/home.html
{{ define "body" }} <h1>Home Page</h1> <div id="app"></div> {{ end }} - layouts/_default/baseof.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>My Svelte App</title> <script defer src="js/bundle.js"></script> </head> <body> {{ block "body" . }}{{ end }} </body> </html>
- Create layouts/home.html
The idea is that Hugo will look into /static folder and copy whatever is there into /public. So we want nom and rollup to output JS and css into static, so that Hugo will copy it to public.
The workflow
- Run npm run ... to process Svelte and Tailwind
- Run hugo to copy all that stuff into public directory
- Install additional rollup plugins
npm i -D npm-run-all npm i -D @rollup/plugin-terser
- Update scripts section in
package.json. This will run Rollup and Hugo automatically. First step - rollup generates JS and puts into /static, then Hugo deploys it to /public"scripts": { "build": "rollup -c; hugo", "autobuild": "rollup -c -w", "dev": "run-p autobuild hugo:dev", "hugo:dev": "hugo server --bind=0.0.0.0 -D" }
- Update rollup config:
const production = !process.env.ROLLUP_WATCH; ... production && terser(), ... watch: { clearScreen: false, include: 'src/**' }
- Install TailwindCss
npm i -D tailwindcss - Init Tailwind
npx tailwindcss init
- Adjust
tailwind.config.jsto pick up both Svelte and Hugocontent: [ "./src/**/*.svelte", "./layouts/**/*.html", "./layouts/_default/**/*.html", ],
- Create style basic file
@tailwind base; @tailwind components; @tailwind utilities;
- Add Tailwind to .html and .svelte files
- Update npm run scripts:
"scripts": { "autobuild": "rollup -c -w", "hugo:dev": "hugo server --bind=0.0.0.0 -D", "tailwind:dev": "tailwindcss -i main.css -o ./static/css/bundle.css --watch", "dev": "run-p autobuild tailwind:dev hugo:dev", "build": "rollup -c; tailwindcss -i main.css -o ./static/css/bundle.css --minify; hugo" },
Auto-reload works when running npm run dev, also it generates css when running npm run build