Link: https://github.com/pontakornth/hugo-with-windicss
How did I build it?
Hugo actually has some assets processing features such as SCSS and PostCSS. WindiCSS is also available as PostCSS module but the author said that it should be the last resort.
NPM script can actually run other command as well. I can use it to run hugo command. The problem is CSS need to be generated along with Hugo dev server for good developer experience (DX).
npm-run-all comes to rescue
I don't really remember where I know npm-run-all in the first place. It is a package that allow you to run command in parallel or sequence. It is possible to run multiple command using && in Unix-based system. However, it is not supported on Windows CMD.
WindiCSS config
If you read the config files, you will see extract field. It is a field that allow WindiCSS to include and exclude files from building. This feature allow WindiCSS to generate enough CSS to display things correctly but no additional unused CSS.
I don't include anything besides basic template so you can build on your own without having to modify the theme or rebuild from scratch. I hope you enjoy building your site.
Top comments (0)