HugoPortfolio

hugo-coder-portfolio — Hugo Portfolio Template

By naro143

A Hugo theme derived from hugo-coder that adds personal presentation and social sharing configuration options to a clean blog appearance, suitable for building a personal portfolio or self-introduction site.

Explore the design

Compare the page layouts and mobile experience. Open any screenshot for a closer look.

1 previews
Author preview
Author-provided preview

Preview provided in the project README.

One original preview is available. Open the full image to inspect the design.

Screenshots show visual appearance; interactive behavior may differ.

Recorded 2026-10-01View source

What stands out

A quick read of the recorded project description.

01

Modified from hugo-coder, retaining a clean blog appearance while adding personal presentation configuration

02

Configure author name, job information, description, keywords, and avatar via params

03

Social links are configured as an array, with optional icon and weight; text is displayed when no icon is set

04

Supports multilingual mode, allowing title, author, description, keywords, and menu to be overridden per language

05

Includes Disqus comments and sharing toggles for Twitter, Facebook, Hatena, Line, and LinkedIn

Template Details

hugo-coder-portfolio is a Hugo theme modified by the author naro143 based on hugo-coder, with the repository under the MIT license. The theme is positioned toward personal presentation: the README states that the purpose of the changes is to allow the site to introduce the author more fully, while the specific list of changes is placed in the FeaturesOfCoderPortfolio article in the exampleSite; the repository itself does not enumerate them one by one.

At the configuration level, the theme provides options through config.toml params for author name, job information, site description, keywords, avatar path, footer content, fixed-column text, whether to hide copyright and acknowledgements, custom CSS, mobile menu centering, and RTL support. Social links are defined as a params.social array, where name, icon, and weight can be specified; when no icon is set, text is displayed. The theme supports multilingual mode, allowing title, author, description, keywords, and menu to be overridden separately for each language, and a langseparator can separate the menu from the language selector.

In terms of features, the theme includes Disqus comments (enabled site-wide for posts after setting disqusShortname, and can be disabled per post via disable_comments), provides toggles at the bottom for sharing on Twitter, Facebook, Hatena, Line, and LinkedIn, and supports setting a default thumbnail for social sharing. Building the demo site requires less and uglifycss, and the README provides commands such as make build, hugo server, and make demo. The repository was last updated in 2021, and the README does not state a compatible Hugo version range; users are advised to verify compatibility with their current Hugo version before use.

HugoPortfolio

Is it right for your project?

Use Cases

  • Building a personal site focused on self-introduction and portfolio display
  • Adding author information and social sharing entry points to a clean blog
  • A personal homepage and blog requiring Chinese-English or multilingual switching
  • Hugo sites using Disqus as the comment system

Suitable For

  • Developers building static sites with Hugo
  • Users who want a site that combines a blog with personal portfolio display
  • Personal sites requiring multilingual menus and a language selector
  • Users comfortable with centrally configuring theme parameters via config.toml

Getting started & customization

Use these recorded setup notes alongside the repository instructions for your chosen version.

  1. 1

    Clone the repository into the themes/coder-portfolio directory of a Hugo project and set theme = "coder-portfolio" in config.toml

  2. 2

    Building the demo or generating compressed CSS requires less and uglifycss to be installed in advance; run npm install -g less uglifycss

  3. 3

    A complete working configuration example is located in the config.toml under the repository's exampleSite directory

  4. 4

    Enabling comments requires setting disqusShortname; individual posts can be disabled with disable_comments: true

  5. 5

    The repository was last updated in 2021, and the README does not state a compatible Hugo version range; verify your current Hugo version before use

Read repository instructions

License & source material

Usage conditions & limitations

Free to use · keep license notice

This entry covers the free version under the MIT license in the public repository; the free scope is the code of this version and does not mean that external services or third-party assets are free.

Must comply with when using

  • Free use, modification, commercial use, and distribution of this version's code are permitted.
  • When distributing copies or substantial portions of the code, retain the original author's copyright notice and the complete MIT license notice.
  • The code is provided as is; warranties and limitations of liability are governed by the original license and applicable law.

Additional costs & items to verify

  • Before building or running the demo site, less and uglifycss must be installed (via npm install -g less uglifycss); otherwise CSS build and demo cannot be completed.
  • Enabling comments requires entering a Disqus shortname in the configuration, i.e., it depends on the third-party Disqus service; comments are unavailable when not configured.
  • Once disqusShortname is set, Disqus comments are enabled by default for all posts site-wide and must be disabled per post via disable_comments.
  • The build process assumes NodeJS/NPM is installed and relies on globally installing less and uglifycss through it, which is an additional external toolchain requirement.
  • Demo images, fonts, icons, and other third-party assets must be checked against their respective licenses; the code's MIT license alone cannot be used to judge them.
  • External services such as domains, hosting, databases, payments, or AI may incur separate charges.
View Original Text Basis

Permission is hereby granted, free of charge

Original License Text

It is necessary to have `less` and `uglifycss` installed to build and run the demo.

Original README

disqusShortname = "yourdiscussshortname" # Enable or disable Disqus.

Original README

Add the following line to your config, ```disqusShortname = "yourdiscussshortname"``` When this is set, all posts are disqus enabled

Original README

It is necessary to have `less` and `uglifycss` installed to build and run the demo. Assuming that already have NodeJS/NPM installed

Original README
https://github.com/naro143/hugo-coder-portfolio/blob/master/LICENSE.mdhttps://github.com/naro143/hugo-coder-portfolio/blob/master/README.md

Compiled by DeepSeek based on repository license and README ·2026-10-01. Results only cover the materials read; dependencies, images, fonts, and subsequent term changes are subject to their respective original texts.

Project checks & description sources

Template Information

Source platforms
GitHub
Documentation and maintenance reference score
Partly documented · 64 / 100
Technologies
Hugo
Website type
Portfolio
How this score is calculated

Our heuristic uses license records (up to 30), a demo link (12), a preview (10), stars (15), recorded maintenance (15), description completeness (8), feature records (5) and classification data (5). It is not a code, security or performance test, or a Google score. A link does not establish tested functionality.

What to verify for this project

Repository update recorded
2021-12-09
Screenshot last checked
2026-10-01

No demo link is recorded. Use the repository instructions to evaluate the project locally; the screenshot alone cannot establish interactive behavior.

The catalog identifies Hugo as the primary stack. Check the actual dependency manifest and lockfile for versions and hosting requirements. These notes use recorded metadata, not a code audit or a deployment test.

Use a selection guide →

How this description was prepared

AI-assisted description based on catalog records and repository material. Repository authors are not automatically the reviewers of this description.

Automatically checked against source and license rules; no manual editorial review.

Inspect the recorded source material

SHA-256: 94e091a4f45d657b25269a4ff856263a9a3f5b5b3fc3e7a5c2b8b44868ad0fbb

2026-10-01T00:47:59.184Z

Source file / repository
---------------------------
This theme is created based on [hugo-coder](https://github.com/luizdepra/hugo-coder).  
I made it possible to tell yourself more by my change.   
Please see [FeaturesOfCoderPortfolio](https://github.com/naro143/hugo-coder-portfolio/blob/master/exampleSite/content/posts/FeaturesOfCoderPortfolio.md) in the post about the change.
Have questions or suggestions? Feel free to [open an issue on GitHub](https://github.com/naro143/hugo-coder-portfolio/issues/new) or [ask me on Twitter](https://twitter.com/naro143).

---------------------------

A simple and clean blog theme for Hugo.

![](https://github.com/naro143/hugo-coder-portfolio/blob/master/images/screenshot.png)

## How to use this theme

To use `hugo-coder-portfolio` go through the following steps.

### Download

Clone this repository into your Hugo project.

```
git clone https://github.com/naro143/hugo-coder-portfolio themes/coder-portfolio
```

### Configuration

Add the following lines to your `config.toml`.

```toml
baseurl = "http://www.example.com" # Hostname (and path) to the root.
title = "Yusuke Ishimi" # Site title.
theme = "coder-portfolio" # Set the theme.
languagecode = "en" # The site’s language code used to generate RSS.
defaultcontentlanguage = "en" # The default content language.

paginate = 20 # Default number of pages per page in pagination.

pygmentsstyle = "b2" # Color-theme or style for syntax highlighting.
pygmentscodefences = true # Enable code fence background highlighting.
pygmentscodefencesguesssyntax = true # Enable syntax guessing for code fences without specified language.
pygmentsUseClasses = true # new add

disqusShortname = "yourdiscussshortname" # Enable or disable Disqus.

[params] # theme parameters
    author = "Yusuke Ishimi" # Author's name.
    info = "WEB AND APPS ENGINEER" # Author's job title or info.
    description = "Yusuke Ishimi's personal website" # Site description.
    keywords = "blog,developer,personal" # Site keywords.
    avatarurl = "images/avatar.jpg" # Contain the path of the optionnal avatar in the static folder.

    footercontent = "Enter a text here." # Add footer content
    fixedbarContent = "Do you want to know me more private?→" # Add fixedbar content
    fixedbarContentAfter = "Thank You! Please share it if you like it→" # Add fixedbar content after click

    # Whether you want to hide copyright and credits in the footer.
    hideCredits = false
    hideCopyright = false

    # Custom CSS
    custom_css = []

    # Alignment of Mobile Menu items
    itemscentered = true

    # RTL support
    rtl = false

    # Bottom sns share
    snsShare = true # new add
    # Popular sns share
    # if you want add sns. please message!
    enableTwitterShare = true  # new add
    enableFacebookShare = true # new add
    enableHatenaShare = true   # new add
    enableLineShare = true     # new add
    enableLinkedInShare = true # new add

    thumbnail = "images/tn.png" # default sns thumbnail

    # Multilanguage mode
    langseparator = "|" # Separates menus from language selectors when site is multilingual.

# Social links
[[params.social]]
    name = "Github"
    icon = "fab fa-github"
    weight = 1
    url = "https://github.com/naro143/"
[[params.social]]
    name = "Twitter"
    icon = "fab fa-twitter"
    weight = 2
    url = "https://twitter.com/naro143/"
[[params.social]]
    name = "LinkedIn"
    icon = "fab fa-linkedin"
    weight = 3
    url = "https://www.linkedin.com/in/naro143/"
[[params.social]]
    # If icon is not set, Text is displayed.
    name = "LinkedIn"
    weight = 4
    url = "https://www.linkedin.com/in/naro143/"

# Menu links
[[menu.main]]
    name = "Blog"
    weight = 1
    url  = "posts"
[[menu.main]]
    name = "About"
    weight = 2
    url = "about"
```

You can look at full working [`config.toml`](https://github.com/naro143/hugo-coder-portfolio/blob/master/exampleSite/config.toml) inside the [exampleSite](https://github.com/naro143/hugo-coder-portfolio/tree/master/exampleSite) folder.

#### Multilingual mode

To use multilingual mode, the configuration above needs to be extended by parameters for the specific languages.
Each `language` section overrides default site's parameters when that language is chosen.

```toml
[params]
    langseparator = "|" # separates menus from language selectors.

[languages]
    [languages.en]
        languagename = "English" # The language name to be displayed in the selector.
        title = "Yusuke Ishimi"

        # You can configure the theme parameter for each language. 
        [languages.en.params]
        author = "Yusuke Ishimi"
        info = "WEB AND APPS ENGINEER"
        description = "Yusuke Ishimi's personal website"
        keywords = "blog,developer,personal"

        [languages.en.menu] # It is possible to change the menu too.

        [[languages.en.menu.main]]
        name = "About"
        weight = 1.0
        url = "about"

        [[languages.en.menu.main]]
        name = "Blog"
        weight = 2.0
        url = "posts"


    [languages.ja]
        languagename = "Japanese"
        title = "石見 優丞"

        [languages.ja.params]
            author = "石見 優丞"
            description = "石見 優丞のサイト"
            keywords = "blog,developer, ブログ, エンジニア"
            info = "WEBとアプリのエンジニア"

        [languages.ja.menu]

            [[languages.ja.menu.main]]
            name = "石見とは"
            weight = 1.0
            url = "ja/about"

            [[languages.ja.menu.main]]
            name = "ブログ"
            weight = 2.0
            url = "ja/posts"


```

It is possible to force Hugo to render all default language content under the language code with `defaultContentLanguageInSubdir = true`.
In this case, remember to update your menus URLs (i.e. `/en/about/`).

### Build & Test

It is necessary to have `less` and `uglifycss` installed to build and run the demo.
Assuming that already have NodeJS/NPM installed, run `npm install -g less uglifycss`.

To update or generate the minified CSS file:

```
make build
```

To build your site and test, run:

```
hugo server
```

To preview the exampleSite, run

```
make demo
```

The above command copies current state of the theme to exampleSite/themes and starts hugo with hugo serve -D (Go does not support Symlink directories)

### Disqus

Add the following line to your config, ```disqusShortname = "yourdiscussshortname"``` When this is set, all posts are disqus enabled   
You can disable comments for a post by adding the following to your page meta data: ```disable_comments: true```.


## License

Coder is licensed under the [MIT license](https://github.com/naro143/hugo-coder-portfolio/blob/master/LICENSE.md).

## Author

[Yusuke Ishimi](https://github.com/naro143)

## Contributors

## Special Thanks

- All contributors, for every PR and Issue reported.
Report a correction

Explore similar templates

Compare previews and descriptions within the same stack and category.

hugo-PaperMod

hugo-PaperMod

A fast, clean, responsive Hugo theme for blogs and lightweight portfolios, with three layout modes (Regular, Home-Info, Profile), automatic and manual light/dark themes, Fuse.js client-side search, multilingual support, and built-in Open Graph, Twitter Cards, and Schema.org data.

Hugo · Portfolio

Congo

Congo

Congo is a minimal Hugo content theme built on Tailwind CSS 3.0, designed for blogs, portfolios, and lightweight content sites. It offers multiple homepage layouts, customizable dark mode, multilingual support including RTL, and built-in client-side search, Mermaid, Chart.js, and KaTeX.

Hugo · Blog

toha

toha

Toha is a Hugo theme for personal portfolios, featuring a minimalist, responsive design with configurable homepage sections such as about, experience timeline, and achievements gallery.

Hugo · Portfolio

hugo-profile

hugo-profile

hugo-profile is a mobile-first Hugo theme for personal portfolios and blogs, with multilingual support, light/dark themes, categories and tags, Google Analytics, Disqus comments, and Formspree contact forms.

Hugo · Portfolio

hugo-theme-introduction

hugo-theme-introduction

Introduction is a minimal Hugo theme that can be configured as a single-page site or a full site with multiple sections. Homepage sections are generated from Markdown files under content/home/, with weight sorting and optional images.

Hugo · Portfolio

hugo-theme-console

hugo-theme-console

A minimalist, responsive Hugo theme inspired by the system terminal and built on Terminal CSS. It includes blog posts, photo galleries, and custom pages, with light/dark theming and style overrides via CSS variables.

Hugo · Portfolio