Estimated reading time: 2 minutes
Hugo does not have to use a theme, even though it asks you to go download one in the installation process.
Instead you can add your own design to the template files and use a static css with static images and javascript. If you like more control over your site and a little uniqueness, like I do, then this is the way to go.
I often start off learning something by working backwards. In this case (as was the case when I was learning wordpress themes) I start out by creating a mini version of my site that is purely html,css and js. I even use real content. This was you know what you want your html structure to look like.
The idea here is that you can now create a header.html partial and simply cut and paste out all of your header html from your mini site. Then move on to your footer by cutting and pasting your footer content into to your footer.html partial. You get the idea?
Your css file gets copied and pasted into the /static/css/ folder and as long as your mini sites link ref path is /css/cssfile.css then you need not make any changes. If it is not then simply change it to that.
If you have any js files linked like a local version of jQuery, then copy the js file to the /static/js/ folder and ensure any link you have to it is /js/jsfile.js.
If you have any images in your header or footer then add these to the /static/img/ folder and then ensure paths to them are /img/imagefile.png.
The harder part is to control the content section of the pages as these are not done in partials.
Part 10 of 15 in the hugo zero to hero series.