<a href="https://gohugo.io/" target="_blank">Hugo</a> is a static site generator framework. It is open source and fast. The site for Friedger Pool is using it. We wanted to add a more personalized experience to that site and therefore, the site should become a Stacks app. That means that the app uses the Stacks authentication provided by the <a href="https://github.com/blockstack/connect" target="_blank">@stacks/connect</a> library.It is possible to add React single page app into a hugo site as demonstrated by <a href="https://github.com/kaihendry/react-hugo-esbuild" target="_blank">Kai Hendry</a> using esbuild. Unfortunately, the connect library does not play nicely with esbuild. Polyfills are missing. We didn't want to handle these. We decided to keep the Hugo part and the React part separate and then merge the two static parts for publishing.The result is a git repo with a <code>hugo</code> folder and a <code>stacks</code>folder. In the Hugo site we add to one page a <code>div</code> that will contain the react app. That generated page ideally is <code>index.html</code> in a subfolder (e.g. <code>members</code>). This <code>index.html</code> page is copied over to the react app into the <code>public</code> folder of the react app. Now the react app can find the <code>div</code> for rendering. After creating the production build with <code>yarn build</code> (from create-react-app), the files from need to be copied into the root folder that contains the site for publishing. The files of react's <code>static</code> folder go next to the files of hugo's <code>public</code> folder. React's <code>index.html</code> goes into hugo's subfolder replacing the <code>index.html</code> that we copied over to the react folder earlier. This can be done in a single script:<code>cd packages/hugo hugo -D cp public/members/index.html ../react/public cd ../react yarn build cd ../.. cp -r packages/hugo/public . cp -r packages/react/build/static public cp packages/react/build/* public/members</code>Now you can serve the public folder and have a hugo site with a react app.The source code for Friedger Pool's site is available on <a href="https://github.com/friedger/stacking/tree/dev" target="_blank">github</a>.

How to include stacks authentication into a Hugo site

Bringing Hugo and Stacks together