Selina is a simple theme specialized in presenting writing layout like technical writing.
This theme was originally developed by b. avianto and funkydan2 named Hugo-Kiera, this is a forked by hemashushu.
- Simple, 'no-nonsense' styling.
- Excellent code highlight support thanks to Hugo Chroma.
- Use Font Awesome for icons.
- Utilize normalize.css for consistent styling (Cloudflare CDN).
- Disqus or Utterances comments loaded on demand.
Change into Hugo directory then:
$ cd themes
$ git clone https://github.com/hemashushu/hugo-selina.git hugo-selina
More detailed instruction at Hugo Docs.
Using git submodule
is recommended instead of git clone
as per recommendation from Netlify.
$ cd /path/to/the/root/of/your/project/themes
$ git submodule add https://github.com/hemashushu/hugo-selina.git
Use git
to merge latest commits into your project by running:
$ cd /path/to/the/root/of/your/project/
$ git submodule update --rebase --remote
Delete the directory corresponding to the theme and download the latest version of the theme by cloning the repo:
$ cd /path/to/the/root/of/your/project/
$ rm -rf themes/hugo-selina/
$ git clone https://github.com/hemashushu/hugo-selina.git themes/hugo-selina/
For reference look inside folder exampleSite
for content example and config.toml
.
Important: don't delete or move archetypes
folder from root unless it is necessary. Current Hugo priority lookup will look into this folder first before any other archetypes
folder and could cause problem.
Recommended optional config.toml
:
pygmentsCodeFences = true
disqusShortname = "" #Disqus shortname
googleAnalytics = "" #Google Analytics ID
[author]
name = "" #Author name
github = "" #Github username
gitlab = "" #Gitlab username
linkedin = "" #LinkedIn username
facebook = "" #Facebook username
twitter = "" #Twitter username
instagram = "" #Instagram username
stackoverflow = "" #StackOverflow username
devto = "" #Dev.to username
[params]
tagline = "the tagline for this website"
customCSS = [] #Optional Customised CSS
disableDarkModeCSS = false # disables css style for users using dark-mode
To add non-posts related page (eq. About page) to the main menu, adding these lines to the page front matter:
TOML:
menu = "main"
meta = "false"
YAML:
menu: "main"
meta: "false"
meta
refers to time, categories, tags and reading time which are not necessary for this kind of page.
For posts listing page, add _index.md
file inside content\posts
folder with these front matter:
TOML:
title = "Posts"
menu = "main"
weight = "10"
YAML:
title : "Posts"
menu : "main"
weight : "10"
Following menus are available:
main
, displayed in the navigation bar at the top of the pagefooter
, displayed on the lower right, in the footer
Pages can include both, either, or neither Categories or Tags.
To link to tags use the url /tags/
(e.g. https://example.com/tags/
) and /categories/
for categories.
A side header can be added in config.toml
.
site_logo = "/link/to/image"
It is possible to use full width image as well, using either /link/to/image#full
(which will affect only this image and
not the featured images for posts which may override the site header image) or site_logo_classes = "full-image"
in config.toml
(which
will affect all header images, even if a featured image of a post overrides the site logo).
A featured image for a post which will be shown in list overviews and at the top of the post page can be added in the frontmatter.
images: ["/link/to/image"]
Here, too, it is possible to display the image in full width appending #full
or #float
to the URL (see below).
Featured images can override the site logo on the post page, using replace_site_logo: false
in the frontmatter.
Using fenced code with Chroma support.
For usage, refer to Font Awesome.
Set Params.mathjax
to true to enable support of mathematics display using MathJax. Math should be, by default, surrounded by dollar signs and produced using LaTeX syntax. Options may be overriden using static/js/mathjax-config.js
.
Disqus comments are loaded on demand, by clicking the View Comments button. Disqus comments can be automatically loaded and displayed by setting CommentAutoload = true
in config.toml
.
Utterances, a Git based comment system, is also available. Utterance comments are loaded and displayed by default.
Comments can be disabled for a single page by setting disableComments = true
in the page frontmatter.
If the lastmod
option is set on a page/post, either manually or because enableGitInfo
is set to true, a line including the page's last modification will be shown after the post date.
Please use GitHub issues to file bugs. If you can help fixing bugs, optimize the theme or adding features, please do pull requests, I really love to see what others can come up with.