Skip to content

J-Siu/hugo-theme-sk3

BranchesTags

Repository files navigation

Hugo Theme - SK3 (Skeleton 3) Paypal donate

Full feature Hugo theme build on top of hugo-theme-sk2 with Google AdSense (UA/GA4) support.

SK Themes

Theme GitHub Hugo Demo Description
SK1 hugo-theme-sk1 SK1 sk1.jsiu.dev Fully functional basic Hugo theme with no css, no javascript.
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.

Sites

SK3 demo site: https://sk3.jsiu.dev/ with content from hugoBasicExample.

John Siu Blog: JohnSiu.com

Version 2 Breaking Changes

When upgrading from v1.x.x to v2.x.x, config file need to be updated as there are lot of name changes.

Install

In site directory:

  • Using clone

    git clone https://github.com/J-Siu/hugo-theme-sk3 themes/sk3

  • Using submodule

    git submodule add https://github.com/J-Siu/hugo-theme-sk3 themes/sk3

  • Update submodule

    git submodule update --recursive --remote

Testing

git clone https://github.com/J-Siu/hugo-theme-sk3 sk3
cd sk3

# Pull example site.
git submodule update --recursive --init

cd exampleSite
hugo server -D --bind :: \
--config config.toml,../config.demo.toml \
--disableFastRender \
--renderToMemory \
--theme sk3 \
--themesDir ../../

Features

  • Blog
  • Custom CSS
  • Custom Javascript
  • Customizable
  • Disqus
  • Google AdSense
  • Google Analytics
  • Iubenda (GDPR/CCPA)
  • PayPal
  • Minimalist Design
  • Responsive
  • Social Links
  • Social Share

Layout

Markdown Style

Headline in markdown should start at level 3 (###), as site title is H1 and page title is H2.

Site Config

[Params]

Field Type Default Value Description
customCss text array [] See Custom CSS
customJs text array [] See Custom Javascript
description text "" Open Graph / Twitter Card description
enableExternalSvg bool false true will load social icon using Font Awesome external css.
enableInfoBox bool false Enable page info box style
enableListLastModify bool false Use last modify date in list page.
enableOpenGraph bool false Enable Open Graph
enableOpenToc bool true Control if table of content(Toc) is open By default
enableTwitterCard bool false Enable Twitter Card
enableUserCanonical bool false Add rel="canonical" meta link with absolute URL to each page. Only use this if site require user-declared canonical meta. This is not related to Hugo Canonicalization nor canonifyurls.
favicon text "" See Favicon
images text array [] Open Graph / Twitter Card image
mainSections text n/a Hugo default to section with most entries when For generating homepage list.
pagewidth text(px) "1200px" Page width will automatically set to 100% on small screen(<993px).
startdate text "" eg. "2012-12-02". Year is extracted and generate copyright line "2012-(current year)". Site copyright override this behavior.
subtitle text "" If defined, sub-title appear after site title in smaller font.
title text "" Open Graph / Twitter Card title

Social Network

[Params.sociallink] Show social network buttons if IDs are provided.

Field Type Default Value
facebook text ""
flickr text ""
instagram text ""
linkedin text ""
pinterest text ""
reddit text ""
rss bool false
tumblr text ""
twitter text ""
vimeo text ""
youtubechannel text ""
youtubeuser text ""

Share Button

[Params.socialshare] Control if share buttons appear at the bottom of page.

Field Type Default Value
facebook bool false
instagram bool false
linkedin bool false
pinterest bool false
reddit bool false
telegram bool false
twitter bool false
vk bool false

Theme Color

[Params.color] Control theme color. Default is a dark theme.

Field Type Default Value Light Theme**
bg text "#181a1b" "white"
border text "white" ""black"
link text "#3d84ff" "#3d84ff"
text text "white" "black"

Layout Dimensions

[Params.card] Control list page layout.

Field Type Default Value Description
date bool true Show data for each item in list
summary bool true Show summary for each item in list
width text(%) "32%" Control list page column width on desktop(>992px). 32% for 3 columns. 24% for 4 columns, etc. Single column use 100%.

Custom CSS

If you add custom css files abc.css and def.css like following:

./
├── archetypes/
├── content/
├── public/
├── resources/
├── static/
│   └── css/
│       ├── abc.css
│       └── def.css
├── themes/
└── config.toml

The final path of your css files will be /css/abc.css and /css/def.css:

[Params]
customCss = ["/css/abc.css", "/css/def.css"]

Custom Javascript

If you add custom javascript abc.js and def.js like following:

./
├── archetypes/
├── content/
├── public/
├── resources/
├── static/
│   └── js/
│       ├── abc.js
│       └── def.js
├── themes/
└── config.toml

The final path of your javascript files will be /js/abc.js and /js/def.js:

[Params]
customJs = ["/js/abc.js", "/js/def.js"]

Favicon

Path of favicon of the published site.

If favicon logo.svg is put inside static like following:

./
├── archetypes/
├── content/
├── public/
├── resources/
├── static/
│   └── logo.svg
├── themes/
└── config.toml

The final path will be /logo.svg:

[Params]
favicon = "/logo.svg"

SK themes come with default favicon. To disable it:

# At Hugo site root
touch static/favicon.ico

Disqus

Section [services.disqus]

Field Type Default Value Description
shortname text "" Disqus shortname.

Google

AdSense

Section [Params.google]

Field Type Default Value Description
AdSenseId text "" AdSense ID/Tag.
enablePageLevelAd bool false Enable/Disable page level ads.
Analytics

Section [services.googleAnalytics]:

Field Type Default Value Description
id text "" Google Analytics ID

Paypal Button

[Params.paypal] Enable Paypal donation button along side share buttons.

Field Type Default Value Description
amount text "0" Default amount.
businessId text "" Paypal business Id. Button will only show if this is set.
currency text "" Currency code, eg. "CAD", "USD".
enableRecurring bool false Show recurring check-box.

Information can be obtain by going through Paypal Donate Button. You need your own Paypal account to go through the button creation process.

Per Page Settings

  • Disable Disqus

  • Disable Prev/Next

  • Disable Related

  • Disable Table of Content

    To disable the above, in front matter:

    comment = false
prevnext = false
related = false
toc = false

Sample Config

Font Awesome

Social buttons provided by Font Awesome Brands(free).

fa-svg-extract.sh is used to extract icon from Font Awesome sprites/brands.svg and sprites/solid.svg.

./fa-svg-extract.sh brands.svg > sk3-fa.svg
./fa-svg-extract.sh solid.svg >> sk3-fa.svg

Thank You

Contributors

Change Log

License

The MIT License (MIT)

Copyright (c) 2025 John, Sing Dao, Siu

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

About

Hugo Theme - SK3 (Skeleton 3)

sk3.jsiu.dev

Topics

hugo-theme adsense

Resources

Readme

License

MIT license
Activity

Stars

22 stars

Watchers

1 watching

Forks

5 forks
Report repository

Releases

25 tags

Packages

 
 
 

Contributors

Languages