A nice purple theme for a blog.
You need the following files in your blog sources to make the theme work properly:
./static/images/logo.svg
./static/apple-touch-icon.png
./static/favicon-16x16.svg
./static/favicon-32x32.svg
./static/favicon-120x120.svg
./static/favicon.ico
./static/site.webmanifest
./static/safari-pinned-tab.svg
The theme generates the following set of related HTML headers:
<link rel="apple-touch-icon" sizes="180x180" href="{{ "/apple-touch-icon.png" | relURL }}">
<link rel="icon" type="image/svg+xml" sizes="16x16" href="{{ "/favicon-16x16.svg" | relURL }}">
<link rel="icon" type="image/svg+xml" sizes="32x32" href="{{ "/favicon-32x32.svg" | relURL }}">
<link rel="icon" type="image/svg+xml" sizes="120x120" href="{{ "/favicon-120x120.svg" | relURL }}">
<link rel="manifest" href="{{ "/site.webmanifest" | relURL }}">
<link rel="mask-icon" href="{{ "/safari-pinned-tab.svg" | relURL }}" color="#5a2673">
<meta name="apple-mobile-web-app-title" content="{{ .Site.Title }}">
<meta name="application-name" content="{{ .Site.Title }}">
<meta name="msapplication-TileColor" content="#5a2673">
<meta name="theme-color" content="#5a2673">
Highly recommended to use https://realfavicongenerator.net to generate the whole package of files which covers all platforms and browsers and will include some additional files that are supposed to be placed in these locations:
./static/android-chrome-192x192.png
./static/android-chrome-512x512.png
./static/browserconfig.xml
./static/mstile-70x70.png
./static/mstile-144x144.png
./static/mstile-150x150.png
./static/mstile-310x150.png
./static/mstile-310x310.png
This is a configuration file example that can be used with the theme:
baseURL = "https://website.local/" # absolute URL of the deployed web-site
languageCode = "en-us"
title = "Some fancy blog" # the main title of the web-site
theme = "dark-pragma" # this theme
relativeURLs = true # recommended to use relative URLs if possible
sectionPagesMenu = "main"
enableRobotsTXT = true
pygmentsCodefences = true
# recommended markup parameters
[markup]
defaultMarkdownHandler = "blackFriday"
[markup.blackFriday]
hrefTargetBlank = true
nofollowLinks = true
noreferrerLinks = true
# theme-specific parameters
[params]
UserPicture = "https://url-to-your-avatar" # your userpic that will be used for the small author description in posts
AuthorName = "John Doe" # your name
Description = "Some more detailed description"
Github = "johndoe" # this will show a GitHub icon/link in bottom right
Reddit = "johndoe" # this will show a Reddit icon/link in bottom right
Twitter = "johndoe" # this will show a Twitter icon/link in bottom right
Email = "john@doe.local" # this email goes to the footer of the web-site as your contact
License = "Any HTML you want" # this will be placed as raw HTML in the footer after words "licensed under", so feel free to insert links and small images with inline styles.
# this is an example content structure that you might want to have.
# the section builds the main navigation panel in the header of the web-site, aligned to the right. Many root level items can cause layout problems on small screens
[menu]
[[menu.main]]
identifier = "posts"
name = "Posts"
title = "Blog posts"
url = "/posts/"
weight = -120
[[menu.main]]
identifier = "about"
name = "About"
title = "About the author"
url = "/about/"
weight = -110
In order to generate your static web-site with Hugo you need to maintain the following file structure of your blog sources:
./content
_index.md
about/
index.md
posts/
post1/
index.md
post2/
index.md
./themes/
dark-pragma
./static
images/
logo.svg
apple-touch-icon.png
favicon-16x16.png
favicon-32x32.png
favicon.ico
site.webmanifest
safari-pinned-tab.svg
android-chrome-192x192.png
android-chrome-512x512.png
browserconfig.xml
mstile-70x70.png
mstile-144x144.png
mstile-150x150.png
mstile-310x150.png
mstile-310x310.png