Hugo Theme SK1 Walk Through
A starting guide for creating Hugo theme.
This guide assume some familiarity on creating a Hugo site using other Hugo themes.
In an empty directory:
This will create a new theme directory
mytheme directory is needed.
resources directory can be deleted.
Shameless self promotion! 🤣
If you have mygit setup, use following to create repository on github/gogs/gitea:
Else do following for local git:
Once git is initialized, pull in Hugo example site content as sub-module:
Open browser to
http://localhost:1313, it should show an empty page. That is correct result for now. Keep it running and you will see changes made to theme in real time.
mytheme/layouts/_default/ contains 3 files:
single. Lets go through them one by one.
_default/baseof.html1 is the base, outer most wrapper of ALL pages generated. No change required for this project.
It include 3 partials:
footer.html, which will be looked at in partials section below.
_default/list.html2 is template for all listing pages. The reason
http://localhost:1313 is blank is because out
list.html is empty.
Base on Hugo documentation, following is a simple
Save and refresh browser. However browser will remain blank at this point. That is because
layouts/index.html is empty.
index.html is used as home page when available, else
list.html is used.
For simplicity of this project, just delete
index.html and refresh browser.
More information about pagination3 is in Hugo doc.
_default/single.html4 is template for all content pages. The generated file is empty. Clicking on any page link in listing page will show page not found, as no content page is generated.
single.html with following content and save.
Content link should be working now.
partials are common section included by other default templates or other partials.
partials/head.html, as seen in
_default/baseof.html, is used outside of
head.html should contain
As this project focus on making a simple Hugo template, the file is left empty.
partials/header.html5, contrary to
head.html, contain display element. It is part of html
<body> and usually consist of page title, menu, etc.
Following is header of SK1:
partials/footer.html6, similar to
header.html, contain display element, but for the bottom of all pages. It is part of html
<body> and usually consist of copyright, menu, etc.
Following is footer of SK1:
The above give a basic idea of how a Hugo theme is put together. Following are more starting points for Hugo theme development:
The search box in Hugo site is your friend!!
For basic theming with CSS, check out hugo-theme-sk2 on GitHub.
|SK2||hugo-theme-sk2||SK2||sk2.jsiu.dev||Fully functional basic Hugo theme with minimum css.|
|SK3||hugo-theme-sk3||SK3||sk3.jsiu.dev||Full feature Hugo theme with Google AdSense support.|