https://github.com/peaceiris/hugo-theme-iris

Hugo IRIS Theme - Portfolio and Blog
https://github.com/peaceiris/hugo-theme-iris
hugo hugo-module hugo-theme
Last synced: over 1 year ago
JSON representation
Hugo IRIS Theme - Portfolio and Blog
Host: GitHub
URL: https://github.com/peaceiris/hugo-theme-iris
Owner: peaceiris
License: mit
Created: 2018-07-28T14:56:18.000Z (almost 8 years ago)
Default Branch: main
Last Pushed: 2024-10-29T15:16:46.000Z (over 1 year ago)
Last Synced: 2024-10-29T16:03:54.019Z (over 1 year ago)
Topics: hugo, hugo-module, hugo-theme
Language: HTML
Homepage: https://hugothemeiris.peaceiris.com/
Size: 131 MB
Stars: 70
Watchers: 4
Forks: 18
Open Issues: 59
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project

README

          


Hugo IRIS Theme





  

[![LICENSE](https://img.shields.io/github/license/mashape/apistatus.svg)](https://github.com/peaceiris/hugo-theme-iris/blob/main/LICENSE)

[![release](https://img.shields.io/github/release/peaceiris/hugo-theme-iris.svg)](https://github.com/peaceiris/hugo-theme-iris/releases/latest)

[![release date](https://img.shields.io/github/release-date/peaceiris/hugo-theme-iris.svg)](https://github.com/peaceiris/hugo-theme-iris/releases)

[![release feed](https://img.shields.io/badge/release-feed-yellow)](https://github.com/peaceiris/hugo-theme-iris/releases.atom)

![deploy status](https://github.com/peaceiris/hugo-theme-iris/workflows/CI/badge.svg?branch=main&event=push)

[![hugo themes](https://img.shields.io/static/v1?label=Hugo%20Themes&message=IRIS&color=blueviolet)](https://themes.gohugo.io/themes/hugo-theme-iris/)

[![lighthouse score](https://img.shields.io/static/v1?label=Lighthouse%20Score&message=Good&color=green)](https://hugothemeiris.peaceiris.com/report.html)



[Go to the demo site](https://hugothemeiris.peaceiris.com/).

## Table of Contents

- [Overview](#overview)

  - [Features](#features)

  - [Roadmap](#roadmap)

- [Getting Started](#getting-started)

  - [Install Hugo](#install-hugo)

  - [Install Go](#install-go)

  - [Install Node.js and npm](#install-nodejs-and-npm)

  - [Initialize New Hugo Project](#initialize-new-hugo-project)

  - [Create a Post Page](#create-a-post-page)

  - [Create a Slide Page](#create-a-slide-page)

- [Customize Theme](#customize-theme)

  - [config](#config)

  - [content](#content)

  - [assets](#assets)

  - [data](#data)

  - [i18n](#i18n)

  - [static](#static)

- [Hosting](#hosting)

  - [Netlify](#netlify)

  - [GitHub Pages using Actions](#github-pages-using-actions)

- [Shortcodes](#shortcodes)

  - [circle](#circle)

  - [button](#button)

  - [mermaid](#mermaid)

  - [repo](#repo)

  - [github-sponsors-list](#github-sponsors-list)

  - [table](#table)

  - [math](#math)

- [How to Update the Theme](#how-to-update-the-theme)

- [Special Thanks](#special-thanks)

- [Changelog](#changelog)

- [Maintainer](#maintainer)

- [Contributing](#contributing)

- [License](#license)

- [Development](#development)

## Overview

This repository includes a [Hugo] theme.

### Features

- Dark Theme

- Responsive

- Support Multilingual

- Pagination

- SEO

  - Google Analytics

  - Open Graph Protocol

  - JSON-LD

  - Canonical URL on header

- Performance

  - [PageSpeed Insights Scores: Good](https://developers.google.com/speed/pagespeed/insights/?hl=EN&url=https%3A%2F%2Fhugothemeiris.peaceiris.com%2F)

  - [Lighthouse Scores: Good](https://hugothemeiris.peaceiris.com/report.html)

- Contents

  - Breadcrumb List

  - Syntax Highlighting

  - Table of Contents

  - Random Post List

  - [MathJax]: Beautiful math in all browsers.

  - [mermaid]: Generation of diagram and flowchart from text in a similar manner as markdown.

  - [reveal.js]: Writing slides using Markdown.

- Image

  - Responsive

  - Eye-catching Image

  - OGP Image

  - WebP: requiring a Hugo extended version

- Disqus Comment System

- Keyboard Shortcut: Press `?` (`Shift+/`) to show help modal.

### Roadmap

- Share Buttons

- Netlify, Netlify CMS

- Categories, Tags, Authors

- Font Awesome

- Related posts, next and previous post

Back to TOC ☝️


## Getting Started

### Install Hugo

You can find the minimum supported Hugo version in [theme.toml] `min_version`. Using Hugo extended version is desirable.

[theme.toml]: https://github.com/peaceiris/hugo-theme-iris/blob/main/theme.toml

### Install Go

This theme depends on Hugo Modules.

- [Download and install - The Go Programming Language](https://golang.org/doc/install)

### Install Node.js and npm

This theme depends on `node` and `npm`.

cf. [Installing Node.js via package manager | Node.js](https://nodejs.org/en/download/package-manager/)

### Initialize New Hugo Project

Here is [the setup script](https://github.com/peaceiris/hugo-theme-iris/blob/main/scripts/setup.sh).

```sh

mkdir homepage

wget https://raw.githubusercontent.com/peaceiris/hugo-theme-iris/main/scripts/setup.sh

bash ./setup.sh homepage "your_github_id"

cd homepage

npm ci

hugo server

```

- http://localhost:1313/

*Customize your site! ʕ◔ϖ◔ʔ*

### Create a Post Page

```sh

hugo new posts/new.md

```

### Create a Slide Page

```sh

hugo new --kind slide posts/new-slide.md

```

Back to TOC ☝️


## Customize Theme

TBW.

### config

### content

### assets

### data

### i18n

### static

Back to TOC ☝️


## Hosting

### Netlify

[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/peaceiris/hugo-theme-iris)

### GitHub Pages using Actions

The following actions are useful to deploy your site to GitHub Pages using GitHub Actions.

- [peaceiris/actions-hugo: GitHub Actions for Hugo](https://github.com/peaceiris/actions-hugo)

- [peaceiris/actions-gh-pages: GitHub Actions for GitHub Pages](https://github.com/peaceiris/actions-gh-pages)

Back to TOC ☝️


## Shortcodes

### circle

If your logo image is located at `assets/images/logo.jpg`.

```md

{{< circle src="images/logo.jpg" alt="hugo-theme-iris logo" >}}

```



### button

```md



  {{< button href="https://gohugo.io/" txt="Hugo Homepage" >}}

  {{< button href="https://github.com/gohugoio/" txt="Hugo GitHub" >}}

  {{< button href="https://discourse.gohugo.io/" txt="Hugo Forum" >}}

  {{< button href="https://twitter.com/GoHugoIO" txt="Hugo Twitter" >}}



```



### mermaid

```md

{{< mermaid >}}

sequenceDiagram

  participant Alice

  participant Bob

  Alice->>John: Hello John, how are you?

  loop Healthcheck

    John->>John: Fight against hypochondria

  end

  Note right of John: Rational thoughts 
prevail!

  John-->>Alice: Great!

  John->>Bob: How about you?

  Bob-->>John: Jolly good!

{{< /mermaid >}}

```



### repo

Run the following script to get the latest repository data.

The script requires the [gh] command.

[gh]: https://github.com/cli/cli

For more details: [scripts/fetch_data.sh](https://github.com/peaceiris/hugo-theme-iris/blob/main/exampleSite/scripts/fetch_data.sh)

```sh

brew install gh

gh auth login

```

```sh

cd ./your_hugo_project

export GH_USER_ID="peaceiris"

bash ./scripts/fetch_data.sh "${GH_USER_ID}" > "./data/github/${GH_USER_ID}.json"

```

We can show a repository card like as follows.

```md

{{< repo id="peaceiris" name="actions-gh-pages" >}}

{{< repo id="peaceiris" name="actions-hugo" >}}

```



### github-sponsors-list

Please follow the instruction as the same as the `repo` shortcode.

```md

{{< github-sponsors-list id="peaceiris" >}}

```



### table

```md

{{< table >}}

| Key | Value |

|---|---|

| Static Site Generator | Hugo |

| Language | Go |

{{< /table >}}

```

| Mouse out | Mouse over |

|---|---|

| ![Shortcode table mouse out](https://raw.githubusercontent.com/peaceiris/hugo-theme-iris/main/exampleSite/assets/images/shortcode_table_1.jpg) | ![Shortcode table mouse over](https://raw.githubusercontent.com/peaceiris/hugo-theme-iris/main/exampleSite/assets/images/shortcode_table_2.jpg) |

### math

See also [the example page](https://hugothemeiris.peaceiris.com/posts/math/).

When you use the ampersand sign `&`, you need to use the following math shortcode.

```md

{{< math >}}

\begin{vmatrix}a & b\\

c & d

\end{vmatrix}

{{< /math >}}

```

Back to TOC ☝️


## How to Update the Theme

```sh

cd your_hugo_project

hugo mod get -u hugo mod get -u github.com/peaceiris/hugo-theme-iris

hugo mod tidy && hugo mod verify

git add go.mod go.sum

git commit -m "deps: bump hugo-theme-iris"

```

Back to TOC ☝️


## Special Thanks

- [Hugo]

- [Bulma]

- [reveal.js]

- [MathJax]

- [mermaid]

- [jaywcjlove/hotkeys](https://github.com/jaywcjlove/hotkeys)

Back to TOC ☝️


## Changelog

- [hugo-theme-iris/CHANGELOG.md](https://github.com/peaceiris/hugo-theme-iris/blob/main/CHANGELOG.md)

## Maintainer

- [peaceiris homepage](https://peaceiris.com)

## Contributing

To contribute to this Hugo theme.

You can find more detail in our [Contributing Guide].

## License

- [MIT License - peaceiris/hugo-theme-iris](https://github.com/peaceiris/hugo-theme-iris/blob/main/LICENSE)

## Development

```sh

{{ partial "console-log" $hoge }}

```

---

Back to TOC ☝️


[Contributing Guide]: https://github.com/peaceiris/hugo-theme-iris/blob/main/CONTRIBUTING.md

[Hugo]: https://gohugo.io/

[Bulma]: https://bulma.io/

[reveal.js]: https://github.com/hakimel/reveal.js/

[MathJax]: https://www.mathjax.org/

[mermaid]: https://github.com/knsv/mermaid
ecosyste.ms

Data

Tools

Indexes

Applications

Experiments

Awesome

https://github.com/peaceiris/hugo-theme-iris

Awesome Lists containing this project

README

Hugo IRIS Theme
