Best Practice: CodePen to Hugo

Hi Everyone!

I’m wondering what the best practice would be for the following situation:

  • Using a hugo theme
  • I say to myself, “man, this CodPen project would be great on my site” (or widget/ mock up that involves html/css/js)

What is the best practice to put the html/ css/ js into my hugo website so that the it doesn’t disrupt my hugo theme?

It’s manual labor. I would say, you need to copy the theme files so they are project files (if you look at the theme folder structure it is the same, and you can just copy the files up a level), then start incorporating your other stuff from the codepen. If the theme’s look and code still is a significant part of your site then, I’d say it is best to cite the theme and/or theme author.

I’d say while you’re at it, read the manual from top to bottom too, because the knowledge will help you while you build.

Here’s a document page to help you:

Also maybe I should have said move the theme files up two levels. If you look at it, you’ll see the structure is similar.