ADD hugo with pipline
All checks were successful
build-to-pages / build (push) Successful in 15s
build-to-pages / push (push) Successful in 10s

This commit is contained in:
Hoernschen 2023-10-31 14:04:49 +01:00
parent 45a317f7dd
commit 124e58c339
Signed by: hoernschen
GPG key ID: 37591FAF4E6D3462
99 changed files with 4452 additions and 1 deletions

View file

@ -0,0 +1,96 @@
baseURL = "https://gokarna-hugo.netlify.app"
title = "Gokarna"
theme = "gokarna"
languageCode = "en"
defaultContentLanguage = "en"
enableEmoji = true
enableRobotsTXT = true
# Choose one of emacs, trac or perldoc
pygmentsStyle = "monokai"
[params]
footer = "The Marauders"
description = "Sky above, sand below and peace within"
avatarURL = "/images/avatar.webp"
AvatarAltText = "avatar"
avatarSize = "size-m"
customHeadHTML = """
<!-- KaTeX -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.0/dist/katex.min.css" integrity="sha384-Xi8rHCmBmhbuyyhbI88391ZKP2dmfnOl4rT9ZfRI7mLTdk1wblIUnrIq35nqwEvC" crossorigin="anonymous">
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.0/dist/katex.min.js" integrity="sha384-X/XCfMm41VSsqRNQgDerQczD69XqmjOOOwYQvr/uuC+j4OPoNhVgjdGFwhvN02Ja" crossorigin="anonymous"></script>
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.0/dist/contrib/auto-render.min.js" integrity="sha384-+XBljXPPiv+OzfbB3cVmLHf4hdUFHlWNZN5spNQ7rmHTXpd7WvJum6fIACpNNfIR" crossorigin="anonymous"></script>
<script>
document.addEventListener("DOMContentLoaded", function() {
renderMathInElement(document.body, {
// customised options
// auto-render specific keys, e.g.:
delimiters: [
{left: '$$', right: '$$', display: true},
{left: '$', right: '$', display: false},
],
// rendering keys, e.g.:
throwOnError : false
});
});
</script>
"""
socialIcons = [
{name = "twitter", url = "https://example.com"},
{name = "linkedin", url = "https://example.com"},
{name = "stackoverflow", url = "https://example.com"},
{name = "dribbble", url = "https://example.com"},
{name = "instagram", url = "https://example.com"},
{name = "twitch", url = "https://example.com"},
{name = "email", url = "mailto:example@example.com"}
]
metaKeywords = ["blog", "gokarna", "hugo"]
[menu]
[[menu.main]]
name = "Home"
pre = "<span data-feather='home'></span>"
url = "/"
weight = 1
[[menu.main]]
name = "Posts"
pre = "<span data-feather='book'></span>"
url = "/posts/"
weight = 2
[[menu.main]]
name = "Projects"
pre = "<span data-feather='code'></span>"
url = "/projects/"
weight = 3
[[menu.main]]
name = "Tags"
pre = "<span data-feather='tag'></span>"
url = "/tags/"
weight = 4
[[menu.main]]
identifier = "github"
pre = "<span data-feather='github'></span>"
url = "https://github.com/526avijitgupta/gokarna"
weight = 5
[[menu.main]]
identifier = "buymeacoffee"
pre = "<span data-feather='coffee'></span>"
url = "https://www.buymeacoffee.com/avijitgupta"
weight = 6
[[menu.main]]
identifier = "rss"
pre = "<span data-feather='rss'></span>"
url = "/index.xml"
weight = 7
[markup]
[markup.tableOfContents]
startLevel = 1
endLevel = 4
ordered = false

File diff suppressed because it is too large Load diff

View file

@ -0,0 +1,49 @@
---
title: "Lorem Ipsum"
date: 2021-04-15T23:39:49+05:30
tags: ["xyz", "def"]
type: "post"
image: "/images/lorem-ipsum/quick-fox.png"
showTableOfContents: false
---
# Heading 1
"Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
This continues at length and variously. The text is not really Greek, but badly garbled Latin. It started life as extracted phrases from sections 1.10.32 and 1.10.33 of Cicero's "De Finibus Bonorum et Malorum" ("The Extremes of Good and Evil"), which read:
## Heading 2
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
### Heading 3
"Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
This continues at length and variously. The text is not really Greek, but badly garbled Latin. It started life as extracted phrases from sections 1.10.32 and 1.10.33 of Cicero's "De Finibus Bonorum et Malorum" ("The Extremes of Good and Evil"), which read:
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
#### Heading 4
At ver
"Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
This continues at length and variously. The text is not really Greek, but badly garbled Latin. It started life as extracted phrases from sections 1.10.32 and 1.10.33 of Cicero's "De Finibus Bonorum et Malorum" ("The Extremes of Good and Evil"), which read:
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
##### Heading 5
At ver
"Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
This continues at length and variously. The text is not really Greek, but badly garbled Latin. It started life as extracted phrases from sections 1.10.32 and 1.10.33 of Cicero's "De Finibus Bonorum et Malorum" ("The Extremes of Good and Evil"), which read:
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
At ver

View file

@ -0,0 +1,128 @@
---
title: "Markdown Syntax Guide"
date: 2019-06-19
description: "Sample article showcasing basic Markdown syntax and formatting for HTML elements."
tags: ["markdown", "css", "html"]
type: post
weight: 20
showTableOfContents: true
---
This article offers a sample of basic Markdown syntax that can be used in Hugo content files, also it shows whether basic HTML elements are decorated with CSS in a Hugo theme.
<!--more-->
# Headings
The following HTML `<h1>``<h6>` elements represent six levels of section headings. `<h1>` is the highest section level while `<h6>` is the lowest.
# H1
## H2
### H3
#### H4
##### H5
###### H6
## Paragraph
Xerum, quo qui aut unt expliquam qui dolut labo. Aque venitatiusda cum, voluptionse latur sitiae dolessi aut parist aut dollo enim qui voluptate ma dolestendit peritin re plis aut quas inctum laceat est volestemque commosa as cus endigna tectur, offic to cor sequas etum rerum idem sintibus eiur? Quianimin porecus evelectur, cum que nis nust voloribus ratem aut omnimi, sitatur? Quiatem. Nam, omnis sum am facea corem alique molestrunt et eos evelece arcillit ut aut eos eos nus, sin conecerem erum fuga. Ri oditatquam, ad quibus unda veliamenimin cusam et facea ipsamus es exerum sitate dolores editium rerore eost, temped molorro ratiae volorro te reribus dolorer sperchicium faceata tiustia prat.
Itatur? Quiatae cullecum rem ent aut odis in re eossequodi nonsequ idebis ne sapicia is sinveli squiatum, core et que aut hariosam ex eat.
## Blockquotes
The blockquote element represents content that is quoted from another source, optionally with a citation which must be within a `footer` or `cite` element, and optionally with in-line changes such as annotations and abbreviations.
#### Blockquote without attribution
> Tiam, ad mint andaepu dandae nostion secatur sequo quae.
> **Note** that you can use *Markdown syntax* within a blockquote.
#### Blockquote with attribution
> Don't communicate by sharing memory, share memory by communicating.<br>
> — <cite>Rob Pike[^1]</cite>
[^1]: The above quote is excerpted from Rob Pike's [talk](https://www.youtube.com/watch?v=PAAkCSZUG1c) during Gopherfest, November 18, 2015.
## Tables
Tables aren't part of the core Markdown spec, but Hugo supports them out-of-the-box.
Name | Age
--------|------
Bob | 27
Alice | 23
#### Inline Markdown within tables
| Italics | Bold | Code |
| -------- | -------- | ------ |
| *italics* | **bold** | `code` |
## Code Blocks
#### Code block with backticks
```html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example HTML5 Document</title>
</head>
<body>
<p>Test</p>
</body>
</html>
```
#### Code block indented with four spaces
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example HTML5 Document</title>
</head>
<body>
<p>Test</p>
</body>
</html>
#### Code block with Hugo's internal highlight shortcode
{{< highlight html >}}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example HTML5 Document</title>
</head>
<body>
<p>Test</p>
</body>
</html>
{{< /highlight >}}
## List Types
#### Ordered List
1. First item
2. Second item
3. Third item
#### Unordered List
* List item
* Another item
* And another item
#### Nested list
* Fruit
* Apple
* Orange
* Banana
* Dairy
* Milk
* Cheese

View file

@ -0,0 +1,290 @@
---
weight: 15
title: "Theme Documentation - Advanced"
date: 2020-05-06T21:29:01+08:00
description: "Discover how to maximise Gokarna's potential"
tags: ["installation", "configuration", "markdown"]
type: post
showTableOfContents: true
---
Gokarna is an opinionated theme with a focus on minimalism and simplicity.
## Content Types
This theme supports two types of content types: `post` and `page`. To specify them, you need to add them in your markdown metadata.
### Post
This is the default blog post type which will be shown in your "Posts" section and who's tags will be indexed. Basically, a normal blog post.
```markdown
---
title: "Hello, world!"
date: 2021-01-01
description: "A blog post"
image: "/path/to/image.png"
type: "post"
tags: ["blog"]
---
# Hello World!
This is my blog.
```
### Page
We introduced this type to distinguish between blog posts and normal markdown pages. The reason to create this was to give the user complete freedom in creating their website. You can use this to create a portfolio of your projects or showcase your designs. The possibilites are endless and the choice is yours.
```markdown
---
title: "Hello, world!"
image: "/path/to/image.png"
type: "page"
---
# Projects
Keep an eye on this space for my upcoming projects
```
### Table of Contents
To show `Table of Contents`, update your config by adding
```toml
[markup]
[markup.tableOfContents]
startLevel = 1
endLevel = 3
ordered = false
```
And then on each page add the attribute `showTableOfContents: true` **(Note: It is disabled by default)**
```markdown
---
title: "Hello, world!"
image: "/path/to/image.png"
type: "page"
showTableOfContents: true
---
```
Detailed configuration can be found on [Hugo's official documentation](https://gohugo.io/getting-started/configuration-markup/#table-of-contents)
## Weights
The `weight` attribute can be added in the markdown metadata for `post` types. We have an option in our config.toml: `params.showPostsOnHomePage` which allows you to:
1. Show popular posts on home page if the value is set to `popular`. It sorts the all the posts by it's weight attribute in ascending order.
2. Show recent posts on home page if the value is set to `recent`
3. Do not show anything if the variable is unset or an empty string.
## Homepage
### About description text
In extension to the basic configuration with the `description` field, it's also possible to write the about section using markdown.
Create a file called `index-about.md` in the `content` directory and write your content there.
> **Attention**: Don't use frontmatter in this file. It would also render it.
```markdown
# Gokarna
Gokarna is a small temple town located in the Uttara Kannada district of Karnataka state in southern India.
## Beaches
Something about beaches, **which is *very* important**.
- every
- beach
- is beautiful
```
Having the above about section in place, results in the following homepage:
![Markdown about description](/images/theme-documentation-advanced/homepage-markdown-about-description.png "Markdown about description")
## Icons
Gokarna supports popular social media icons (Github, Linkedin, Twitter, StackOverflow, Dribbble, etc.) out of the box. See full list of supported icons [here](https://github.com/526avijitgupta/gokarna/tree/main/static/icons).
### Icons on homepage
To display icons on the homepage, simply update the `socialIcons` config param with a list of name and url of each icon. The specified `name` should exactly match one of the names from [here](https://github.com/526avijitgupta/gokarna/tree/main/static/icons).
If you want to add more icons, you can download the svg directly from [here](https://simpleicons.org/) and place them in your local icons directory (`/static/icons/`)
```toml
[params]
socialIcons = [
{name = "twitter", url = "https://example.com"},
{name = "linkedin", url = "https://example.com"},
{name = "stackoverflow", url = "https://example.com"},
]
```
Preview:
![Icons on homepage Preview](/images/theme-documentation-advanced/icons-homepage-preview.png "Icons on homepage Preview")
### Icons in header
[Feather](https://feathericons.com) icons has a comprehensive list of icons which are more general purpose and not limited to social media.
Therefore, we use feather as an additional source of icons. Here is an example of how to add custom icons in the header using feather:
```toml
[[menu.main]]
identifier = "github"
url = "https://github.com"
weight = 3
# Using feather-icons
pre = "<span data-feather='github'></span>"
```
The same icon in this case could also be added without feather:
```toml
[[menu.main]]
identifier = "github"
url = "https://www.buymeacoffee.com/"
weight = 3
# Without using feather-icons
pre = "<img class='svg-inject' src='/icons/github.svg' />"
```
## Custom Head and Footer HTML
The goal of this feature is to give the user more control over the theme. It's functioning is very straightforward - "You can inject any HTML you want in the `<head>` tag" . This may seem simple at first, but it opens up a lot of possibilities.
### Bring your own scripts
Add your own JavaScript or CSS by putting them in the `static/` folder and importing them into your HTML.
```toml
[params]
customHeadHTML = '''
<script>console.log("Custom script or import");</script>
<script src="/js/custom.js"></script>
'''
customFooterHTML = '''
<div>Comment SDK Integration</div>
<script>console.log("Custom script or import");</script>
<script src="/js/custom.js"></script>
'''
```
### Analytics
Integration with any analytics tool: This was a personal pet peeve. User privacy is our primary concern and this meant not using Google Analytics or any of the popular tools.
We preferred privacy friendly tools like [Umami](https://umami.is/) & [Fathom Analytics](https://usefathom.com/), but the downside was that no theme supported them out of the box which led to either changing the theme source code or contributing supporting code to the original theme (both of which are good ways to extend the theme, but not our ideal choice)
Giving users the freedom to add anything in the HTML via config.toml seemed like an elegant way to solve the problem.
```toml
[params]
customHeadHTML = '''
<script async defer data-website-id="website-id" src="https://analytics.example.com/script.js"></script>
'''
```
### Katex
Katex is a math typesetting library for the web which lets you write beautiful equations. To use it, add the javascript as mentioned in [their documentation](https://katex.org/docs/browser.html) in our `params.customHeadHTML`.
```toml
[params]
customHeadHTML = '''
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.0/dist/katex.min.css" integrity="sha384-Xi8rHCmBmhbuyyhbI88391ZKP2dmfnOl4rT9ZfRI7mLTdk1wblIUnrIq35nqwEvC" crossorigin="anonymous">
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.0/dist/katex.min.js" integrity="sha384-X/XCfMm41VSsqRNQgDerQczD69XqmjOOOwYQvr/uuC+j4OPoNhVgjdGFwhvN02Ja" crossorigin="anonymous"></script>
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.0/dist/contrib/auto-render.min.js" integrity="sha384-+XBljXPPiv+OzfbB3cVmLHf4hdUFHlWNZN5spNQ7rmHTXpd7WvJum6fIACpNNfIR" crossorigin="anonymous"></script>
<script>
document.addEventListener("DOMContentLoaded", function() {
renderMathInElement(document.body, {
// customised options
// • auto-render specific keys, e.g.:
delimiters: [
{left: '$$', right: '$$', display: true},
{left: '$', right: '$', display: false},
],
// • rendering keys, e.g.:
throwOnError : false
});
});
</script>
'''
```
> Note: Make sure you use the latest version of katex and use the correct script tags as described in [their documentation](https://katex.org/docs/browser.html)
Then the equation `$$y_t = \beta_0 + \beta_1 x_t + \epsilon_t$$` wrapped by double `$$` would be displayed as:
$$y_t = \beta_0 + \beta_1 x_t + \epsilon_t$$
The equation `$y_t = \beta_0 + \beta_1 x_t + \epsilon_t$` wrapped by single `$` would be displayed inline as $y_t = \beta_0 + \beta_1 x_t + \epsilon_t$.
### Comments
Integration with any comments SDK is possible. All you have to do is add the relevant HTML/JavaScript in the `customFooterHTML` param.
An example with commento:
```toml
[params]
customFooterHTML = '''
<div id="commento"></div>
<script defer src="{{ .Site.Params.CommentoURL }}/js/commento.js"></script>
<noscript>Please enable JavaScript to load the comments.</noscript>
'''
```
## Syntax Highlighting
Hugo lets you choose the color scheme for the codeblocks. You can choose from the options here: https://xyproto.github.io/splash/docs/all.html
After choosing your theme, just update the `pygmentsStyle` attribute in config.toml.
```toml
pygmentsStyle = "monokai"
```
You can read more about syntax highlighting on the [official hugo docs](https://gohugo.io/content-management/syntax-highlighting/).
## Site Metadata
Gokarna enables you to improve the SEO performance of your website with minimal effort.
### Image preview
We make sure your pages are social media ready.
![Social Media Preview](/images/theme-documentation-advanced/preview.png "Social Media Preview")
```markdown
---
title: "Hello, world!"
image: "/path/to/image.png"
---
```
> Note: If no image is specified in the markdown metadata, the site avatar is automatically used instead.
### SEO keywords
The keywords relevant for SEO are composed of the page `tags` as defined below:
```markdown
---
title: "Hello, world!"
tags: ["hello", "world"]
---
```
and the `metaKeywords` specified in the config.toml:
```markdown
[params]
metaKeywords = ["blog", "gokarna", "hugo"]
```

View file

@ -0,0 +1,272 @@
---
weight: 10
title: "Theme Documentation - Basics"
date: 2020-03-06T21:29:01+08:00
description: "A guide to getting started with Gokarna"
tags: ["installation", "configuration", "markdown"]
type: post
showTableOfContents: true
---
Gokarna is an opinionated theme with a focus on minimalism and simplicity.
## Installation
The following steps are here to help you initialize your new website. If you dont know Hugo at all, we strongly suggest you learn more about it by following this [great documentation for beginners](https://gohugo.io/getting-started/quick-start/).
### a. Create Your Project
Hugo provides a `new` command to create a new website:
```bash
hugo new site my_website
cd my_website
```
### b. Install the Theme
The themes repository is: [https://github.com/526avijitgupta/gokarna](https://github.com/526avijitgupta/gokarna).
You can download the [latest release :books: .zip file](https://github.com/526avijitgupta/gokarna/releases) of the theme and extract it in the `themes` directory.
Alternatively, clone this repository to the `themes` directory:
```bash
git clone https://github.com/526avijitgupta/gokarna.git themes/gokarna
```
Or, create an empty git repository and make this repository a submodule of your site directory:
```bash
git init
git submodule add https://github.com/526avijitgupta/gokarna.git themes/gokarna
```
### c. Basic Configuration {#basic-configuration}
The following is a basic configuration for the gokarna theme:
```toml
baseURL = "http://example.org/"
defaultContentLanguage = "en"
languageCode = "en"
title = "My New Hugo Site"
theme = "gokarna"
# Automatically generate robots.txt
enableRobotsTXT = true
[menu]
[[menu.main]]
# Unique identifier for a menu item
identifier = "posts"
url = "/posts/"
# You can add extra information before the name (HTML format is supported), such as icons
pre = ""
# You can add extra information after the name (HTML format is supported), such as icons
post = ""
# Display name
name = "Posts"
# Weights are used to determine the ordering
weight = 1
[[menu.main]]
identifier = "tags"
name = "Tags"
url = "/tags/"
weight = 2
[[menu.main]]
identifier = "github"
url = "https://github.com"
weight = 3
# We use feather-icons: https://feathericons.com/
pre = "<span data-feather='github'></span>"
```
### d. Create Your First Post
Here is the way to create your first post:
```bash
hugo new posts/first_post.md
```
Feel free to edit the post file by adding some sample content and replacing the title value in the beginning of the file.
For posts you need to add `type: "post"` in the markdown metadata. We currently support 2 types of content:
1. Post (`type: "post"`): A normal blog-post with tags, date, & content.
2. Page (`type: "page"`): A standalone content page that will just render the markdown you wrote. You can use it to write custom pages which should not be a part of posts. Like showing your projects portfolio. You can read in detail about this on the [Theme Documentation - Advanced](/posts/theme-documentation-advanced/#content-types) page.
### e. Launching the Website Locally
Launch by using the following command:
```bash
hugo serve
```
Go to `http://localhost:1313`.
### f. Build the Website
When your site is ready to deploy, run the following command:
```bash
hugo
```
A `public` folder will be generated, containing all static content and assets for your website. It can now be deployed on any web server.
The website can be automatically published and hosted with [Netlify](https://www.netlify.com/), [AWS Amplify](https://gohugo.io/hosting-and-deployment/hosting-on-aws-amplify/), [Github pages](https://gohugo.io/hosting-and-deployment/hosting-on-github/), [Render](https://gohugo.io/hosting-and-deployment/hosting-on-render/) and more...
## Configuration
In addition to [Hugo global configuration](https://gohugo.io/overview/configuration/) and [menu configuration](#basic-configuration), **gokarna** lets you define the following parameters in your site configuration (here is a `config.toml`, whose values are default).
```toml
[params]
# URL for the avatar on homepage
avatarURL = ""
# Choose one of size-xs, size-s, size-m, size-l & size-xl. (Default: size-m)
avatarSize = ""
# Description to display on homepage
description = "Sky above, sand below & peace within"
# Accent color is displayed when you hover over <a> tags
accentColor = "#FF4D4D"
# You can use this to inject any HTML in the <head> tag.
# Ideal usecase for this is to import custom js/css or add your analytics snippet
customHeadHTML = ""
# Keywords relevant for SEO
metaKeywords = ["blog", "gokarna", "hugo"]
# If you want to display posts on the homepage, the options are
# "popular" (order posts by weight), "recent" (order posts by date)
# or "" (do not display, default option)
showPostsOnHomePage = ""
# Footer text
footer = "The Marauders"
```
### Avatar URL
This is the image url for the avatar on the homepage and the header.
```toml
[params]
avatarURL = "/images/avatar.jpg"
```
### Avatar Size
You have an option to change the avatar size on the homepage. Options are: `size-xs`, `size-s`, `size-m`, `size-l` & `size-xl`. (Default: `size-m`)
```toml
[params]
avatarSize = "size-l"
```
### Description
Description to display on homepage below the title and avatar.
```toml
[params]
description = "Hello, world!"
```
### Accent Color
Accent color is displayed when you hover over `<a>` tags. It takes a hex/rgb color code. Default is `#FF4D4D`
```toml
[params]
accentColor = "#08F"
```
### Posts on home page
If you want to display posts on the homepage, the options are:
- `popular`: Show popular posts on home page if the value is set to popular. It sorts the all the posts by its weight attribute in ascending order. Read more about it [here](/posts/theme-documentation-advanced/#weights).
- `recent`: Show recent posts on home page if the value is set to recent
- Do not show anything if the variable is unset or an empty string.
```toml
[params]
showPostsOnHomePage = "popular"
```
### Footer
Text to display in the footer section
```toml
[params]
footer = "Text in footer"
```
### Previous and Next buttons
At the bottom of a post, show the previous and next post chronologically.
**Warning**: Not compatible with the `.Weight` parameter.
If any post YAML contains `weight:`, the posts will not appear by Date. See [Hugo's default sort](https://gohugo.io/templates/lists#default-weight--date--linktitle--filepath).
```toml
[params]
togglePreviousAndNextButtons = "true"
```
### Displaying content on the homepage
Content to display on homepage below the social icons, using the contents of `content/_index.md`.
### Custom Head HTML
You can add custom HTML in head section
```toml
[params]
customHeadHTML = "<script>console.log('Any HTML')</script>"
```
Read more in the advanced section [here](/posts/theme-documentation-advanced/#custom-head-html)
### robots.txt
Automatically generate robots.txt
```toml
enableRobotsTXT = true
```
### Favicons, Browserconfig, Manifest
It is recommended to put your own favicons:
* apple-touch-icon.png (180x180)
* favicon-32x32.png (32x32)
* favicon-16x16.png (16x16)
* mstile-150x150.png (150x150)
* android-chrome-192x192.png (192x192)
* android-chrome-512x512.png (512x512)
into `/static` directory. Theyre easily created via [favicon.io](https://favicon.io) or [realfavicongenerator.net](https://realfavicongenerator.net/).

View file

@ -0,0 +1,11 @@
---
title: "Projects"
type: page
---
### Hello my projects are
1. [Tatooine](/projects/tatooine/)
2. [Hydra](/projects/hydra/)
3. [Bludhaven](/projects/bludhaven/)

View file

@ -0,0 +1,8 @@
---
title: Blüdhaven
type: page
---
### History
Blüdhaven was a former whaling town, which was officially incorporated as a "Commonwealth" in 1912. The town had a generally poor socio-economic populace, owing in part to failed efforts to transform itself into a manufacturing and shipping center.

View file

@ -0,0 +1,8 @@
---
title: Hydra
type: page
---
### Motto
Cut off one head and two will take their place

View file

@ -0,0 +1,8 @@
---
title: Tatooine
type: page
---
### A long time ago in a galaxy far, far away....
A project was planned, but never completed

Binary file not shown.

After

Width:  |  Height:  |  Size: 56 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 306 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 50 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 811 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 32 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 81 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 70 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 71 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 439 KiB

View file

@ -0,0 +1 @@
{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}

View file

@ -0,0 +1 @@
../../