ADD hugo with pipline
This commit is contained in:
parent
45a317f7dd
commit
124e58c339
GPG key ID:
37591FAF4E6D3462
99 changed files with 4452 additions and 1 deletions
1273
themes/gokarna/exampleSite/content/posts/emoji-support.md
Normal file
1273
themes/gokarna/exampleSite/content/posts/emoji-support.md
Normal file
File diff suppressed because it is too large
Load diff
49
themes/gokarna/exampleSite/content/posts/lorem-ipsum.md
Normal file
49
themes/gokarna/exampleSite/content/posts/lorem-ipsum.md
Normal 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
|
||||
128
themes/gokarna/exampleSite/content/posts/markdown-syntax.md
Normal file
128
themes/gokarna/exampleSite/content/posts/markdown-syntax.md
Normal 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
|
||||
|
|
@ -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:
|
||||
|
||||
|
||||
|
||||
|
||||
## 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 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.
|
||||
|
||||
|
||||
|
||||
```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"]
|
||||
```
|
||||
|
|
@ -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 don’t 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 theme’s 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 it’s 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. They’re easily created via [favicon.io](https://favicon.io) or [realfavicongenerator.net](https://realfavicongenerator.net/).
|
||||
|
||||
11
themes/gokarna/exampleSite/content/projects/_index.md
Normal file
11
themes/gokarna/exampleSite/content/projects/_index.md
Normal 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/)
|
||||
8
themes/gokarna/exampleSite/content/projects/bludhaven.md
Normal file
8
themes/gokarna/exampleSite/content/projects/bludhaven.md
Normal 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.
|
||||
8
themes/gokarna/exampleSite/content/projects/hydra.md
Normal file
8
themes/gokarna/exampleSite/content/projects/hydra.md
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
---
|
||||
title: Hydra
|
||||
type: page
|
||||
---
|
||||
|
||||
### Motto
|
||||
|
||||
Cut off one head and two will take their place
|
||||
8
themes/gokarna/exampleSite/content/projects/tatooine.md
Normal file
8
themes/gokarna/exampleSite/content/projects/tatooine.md
Normal 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
|
||||
Loading…
Add table
Add a link
Reference in a new issue