HugoPortfolioBlogDocumentation

personal-site — Hugo Portfolio Template

By wisnuwiry

A Hugo-based personal site theme for building blogs and portfolios, with configuration for PWA, light/dark themes, table of contents, comments, and sharing.

Explore the design

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

2 previews
Desktop homepage1 / 2
Desktop captureTop of page

Actual screenshot captured by the server browser.

All pages & views 2

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

Hugo static site theme positioned for personal blogs and portfolios

02

Example configuration covers site parameters such as author information, main menu, social links, share buttons, related articles, and author box

03

Articles support cover images, tags, table of contents, and featured article markers; pages can individually disable modules such as table of contents, comments, and sharing

04

Markdown enables Goldmark extensions such as footnotes, tables, task lists, and definition lists, with dracula code highlighting style

05

Includes Web App Manifest output and SEO-related toggles such as OpenGraph and Twitter Cards

06

README lists unfinished items such as homepage series integration and responsive chapter detail pages

Template Details

This is a personal website theme powered by the Hugo static site generator. The repository describes it as "Hugo Theme for Personal Site (Blog & Portfolio)", and the demo site is wisnuwiry.space. The theme targets personal blog and portfolio use cases, and is also categorized for documentation purposes.

Based on the example configuration, the theme provides fairly complete site-level parameters: author information (name, bio, avatar, occupation, email), Hero title and description, main menu (the example includes Post, Snippet, About, Contact), breadcrumbs, social links (Twitter, Telegram, LinkedIn, GitHub, GitLab, Medium), article share buttons (Facebook, Twitter, Reddit, Telegram, LinkedIn, Pinterest), related articles, author box, comments, MathJax toggle, pagination length, date format, custom CSS/JS, and more.

At the content level, articles support cover images, tags, table of contents (can be expanded by default), and featured article markers (featured: true). Pages can individually disable the table of contents, author box, breadcrumbs, comments, and sharing. Markdown rendering enables Goldmark extensions such as definition lists, footnotes, link auto-detection, strikethrough, tables, and task lists, with the dracula code highlighting style. The theme also includes PWA-related Web App Manifest output configuration, as well as SEO-related toggles for OpenGraph, Twitter Cards, Robots, and more.

The README's TODO lists unfinished items: integrating series on the homepage, responsive chapter detail pages, updating the readme, and setting up a demo repository, indicating these areas may still be incomplete. Comments are configured using the repository parameter, and the contact form relies on Formspree's formspreeId; both require connecting to external services yourself. The README also mentions that content management can be done by importing the site through Forestry, and provides a one-click Netlify deploy button.

HugoPortfolioBlogDocumentation

Is it right for your project?

Use Cases

  • Building a personal blog and publishing long-form articles with tags and table of contents
  • Organizing and displaying personal portfolio pages
  • Maintaining documentation-type content in Markdown and generating a static site
  • Deploying the site via Netlify, or importing it through Forestry for content management

Suitable For

  • Users familiar with Hugo who want to configure theme parameters themselves
  • Personal sites that need a combined blog and portfolio with customizable social and sharing entry points
  • Users willing to connect external services such as comment repositories and Formspree forms themselves

Getting started & customization

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

  1. 1

    First install Hugo and create a new site, then clone the theme or add it as a git submodule into the themes directory

  2. 2

    Copy exampleSite/content to the site directory, and configure parameters such as baseURL, language, title, author, and menu according to the example config.toml

  3. 3

    Comments require filling in repository under [Params.Comments], and the contact form requires filling in Formspree's formspreeId; both are external services

  4. 4

    The TODO in the README indicates that homepage series integration and responsive chapter detail pages are not yet complete; it is advisable to verify actual behavior before use

  5. 5

    The theme code is MIT licensed, but third-party assets such as demo images, fonts, and icons need separate license verification

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 external services or third-party assets are free.

Must comply with when using

  • The code of this version may be used, modified, used commercially, and distributed free of charge.
  • When distributing copies or substantial portions of the code, retain the original author's copyright notice and the full 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

  • Using Forestry for content management requires registering a Forestry account and importing the site yourself; this is an external service dependency.
  • The contact form depends on the external Formspree service; you must apply for it yourself and fill in formspreeId for it to work.
  • The comment feature depends on an external repository (such as a GitHub repository) for hosting, and requires configuring the repository parameter yourself.
  • Site search uses Google Custom Search, which requires applying for a customSearchId yourself and depends on Google's external service.
  • One-click deployment depends on the external Netlify platform, requiring a Netlify account.
  • The TODO in the README indicates that homepage series integration, responsive chapter detail pages, and the demo repository are not yet complete; related features may be incomplete.
  • The README mentions the Formspree form service; actual submission requires configuring a service endpoint, and its usage quotas and fees need separate verification.
  • Demo images, fonts, icons, and other third-party assets need to be checked under their respective licenses and cannot be judged solely by the code's MIT license.
  • External services such as domains, hosting, databases, payments, or AI may incur additional charges.
View Original Text Basis

Permission is hereby granted, free of charge

Original License Text

Go to your forestry account and click on `import your site now`. declare your config.toml file [exampleSite] and fill up basic settings .

Original README

# Formspree form contact id, more info: https://cse.google.com/cse/all formspreeId = ""

Original README

repository = "" # Repository to host your comment, ex: username/repo

Original README

customSearchId = "004021659876411083349:a2ysxpichpc"

Original README

[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/wisnuwiry/personal-site-demo)

Original README

- [] Integrate series in home - [] Responsive chapter detail - [] Update readme - [] Setup demo repo

Original README
https://github.com/wisnuwiry/personal-site/blob/master/LICENSEhttps://github.com/wisnuwiry/personal-site/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
More documented · 86 / 100
Technologies
Hugo
Website type
Portfolio · Blog · Documentation
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
2025-01-01
Screenshot last checked
2026-10-01

A demo link is listed. Check it with your own content and viewport sizes; its presence does not confirm that forms, authentication or payments work.

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: 30c888bf8ebdf07628183e826d1a4e4f1684341f6720c611cb5013b0eaf77d2c

2026-10-01T00:54:13.721Z

Source file / repository
# Hugo Personal Site
[![state](https://img.shields.io/badge/state-stable-green.svg)]() [![release](https://img.shields.io/github/release/wisnuwiry/personal-site.svg)](https://github.com/wisnuwiry/personal-site/releases) [![license](https://img.shields.io/github/license/wisnuwiry/personal-site.svg)](LICENSE)
[![Netlify Status](https://api.netlify.com/api/v1/badges/19d195ca-0cec-478e-9cfa-fa9527644a60/deploy-status)](https://app.netlify.com/sites/wisnuwiry/deploys)

This is web made by Hugo static site generator, [Live Preview](https://wisnuwiry.space), more reference to example use this theme please check [my blog repo](https://github.com/wisnuwiry/blog-v2)

## TODO:

- [] Integrate series in home
- [] Responsive chapter detail
- [] Update readme
- [] Setup demo repo

## Instant Deploy

[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/wisnuwiry/personal-site-demo)

## Content Management

Go to your forestry account and click on `import your site now`. declare your config.toml file [exampleSite] and fill up basic settings .

**Or just click this button for one click installation** [![import to Forestry](https://assets.forestry.io/import-to-forestryK.svg)](https://app.forestry.io/quick-start?repo=wisnuwiry/personal-site-demo2&engine=hugo&version=0.74.3&config=exampleSite)

Now mark everything as done, then go to configuration to change the base url . You can put any url but this have to similar as netlify . So for now put a name which you are going to put in netlify as netlify subdomain.


## Main Feature:
1. PWA
2. Fast Loading
3. Lazy loading
4. Full Responsive
5. Easy Customize
6. Dynamic Theme
7. Ready to Ads
8. Advance SEO (JSON-LD, OpenGraph, TwitterCard, Meta)
9. etc..

## Test Result:
![Test Result with Lighthouse](https://i.ibb.co/vvksSnW/test-result.png)


## Preview

|Light|Dark|
|-----|-----|
|![](https://i.ibb.co/BCzMSNX/Screenshot-1.png)![](https://i.ibb.co/f1RCWr4/Screenshot-1.png)|![](https://i.ibb.co/ZzHJ2Gd/light.png)![](https://i.ibb.co/tMkDs3N/Screenshot-1.png)|


## Setup in your workspace

Before starting, please be sure that you have [installed Hugo](https://gohugo.io/getting-started/quick-start/#step-1-install-hugo) and [created a new site](https://gohugo.io/getting-started/quick-start/#step-2-create-a-new-site). After that, you ready to install **personal-site**.

Create new project hugo

```bash
hugo new site site_name
```
Go to folder themes

```bash
cd site_name/themes
```

In your Hugo site themes directory, run:

```bash
git clone [email protected]:wisnuwiry/personal-site.git
```

Or, if you don’t plan to make any significant changes, but want to track and update the theme, you can add it as a git submodule via the following command:

```bash
git submodule add [email protected]:wisnuwiry/personal-site.git
```

Copy files `exampleSite/content` paste to `site_name`

Next, open `config.toml` and copy paste example config below.

### Example Config

```
baseURL                       = "https://example.com/"
languageCode                  = "id"
title                         = "Wisnuwiry"
theme                         = "personal-site"
summaryLength                 = 10

[Author] # Used in authorbox
  name                        = "Jhon Doe"
  bio                         = ""
  avatar                      = "img/avatar.webp"
  job                         = "Software Engineer"
  gender                      = "male"
  email                       = "[email protected]"


[Params]
  subTitle                    = "Personal site, Blog, and Portfolio"
  description                 = "Sebuah catatan dan blog pribadi saya. Saya juga akan membagi tentang pengalaman saya dan teknologi-teknolgi yang saya gunakan/pelajari atau yang sedang populer." # Site Description. Used in meta description
  images                      = ["img/avatar.webp"]
  copyright                   = "Wisnuwiry" # Copyright holder, otherwise will use .Site.Title
  opengraph                   = true # Enable OpenGraph if true
  twitter_cards               = true # Enable Twitter Cards if true
  mainSections                = ["post"] # Set main page sections
  dateFormat                  = "January 02, 2006" # Change the format of dates
  # customCSS                 = ["css/custom.css"] # Include custom CSS files
  customJS                    = []
  mainMenuAlignment           = "right" # Align main menu (desktop version) to the right side
  authorbox                   = true # Show authorbox at bottom of single pages if true
  comments                    = true # Enable comments for all site pages
  related                     = true # Enable Related content for single pages
  relatedMax                  = 5
  mathjax                     = false # Enable MathJax for all site pages
  hideNoPostsWarning          = false # Don't show no posts empty state warning in main page, if true
  fontUnit                    = "em"
  largestFontSize             = 2.5
  smallestFontSize            = 1
  googleSearchConsole         = ""
  # GoogleAnalytics             = ""
  # fb_admins                   = 
  # fb_app_id                   = 
  paginateLength              = 5
  # adsenseId                   = 

  # Google Search custom, more info: https://cse.google.com/cse/all
  customSearchId              = "004021659876411083349:a2ysxpichpc"

  endMessagePost              = "Wrong content? "
  
  # Link repo to edit content
  editContentPageLink         = "https://github.com/wisnuwiry/personal-site-demo/edit/master/content/"
  
  # Formspree form contact id, more info: https://cse.google.com/cse/all
  formspreeId                 = ""
  


[Params.Hero]
  title                       = "A Personal Site By Jhon Doe"
  desc                        = "Welcome to my Blog :)"

[Params.Entry]
  meta                        = ["date"] # Enable meta fields in given order
  toc                         = true # Enable Table of Contents
  tocOpen                     = false # Open Table of Contents block. Optional

[Params.Featured]
  previewOnly                 = false # Show only preview featured image

[Params.Comments]
  repository                  = "" # Repository to host your comment, ex: username/repo

# Navigation bar
[menu]

[[menu.main]]
identifier = "Post"
pre = "📝"
url = "/post" 
weight = 1 

[[menu.main]]
identifier = "Snippet"
pre = "⚒️"
url = "/snippet" 
weight = 2 

[[menu.main]]
identifier = "About"
pre = "😃"
url = "/about" 
weight = 4

[[menu.main]]
identifier = "Contact"
pre = "🤙"
url = "/contact" 
weight = 5

[Params.Breadcrumb]
  enable                      = true # Enable breadcrumb block globally
  homeText                    = "Home" # Home node text

[Params.Social]
  twitter                     = "jhon-doe"
  telegram                    = "jhon-doe"
# instagram                   = "jhon-doe"
  linkedin                    = "wisnu-saputra"
  github                      = "jhon-doe"
  gitlab                      = "jhon-doe"
  medium                      = "jhon-doe"

[Params.Share] # Entry Share block
  facebook                    = true
  twitter                     = true
  reddit                      = true
  telegram                    = true
  linkedin                    = true
  pinterest                   = true

# Web App Manifest settings
# https://www.w3.org/TR/appmanifest/
# https://developers.google.com/web/fundamentals/web-app-manifest/
[Params.Manifest]
  name                        = "Wisnuwiry"
  shortName                   = "Wisnuwiry"
  display                     = "standalone"
  startUrl                    = "/?utm_source=homescreen"
  backgroundColor             = "#8dc153"
  themeColor                  = "#1da1f2"
  description                 = "Personal Site By Wisnuwiry"
  orientation                 = "portrait"
  scope                       = "/"

[outputFormats]
  [outputFormats.MANIFEST]
    mediaType                 = "application/json"
    baseName                  = "manifest"
    isPlainText               = true
    notAlternative            = true

[outputs]
  home                        = ["HTML", "RSS", "MANIFEST"]

enableRobotsTXT               = true

# Pagination
Paginate                      = 3
 

# Code
[markup]
  # defaultMarkdownHandler    = "blackfriday"
  [markup.goldmark]
    [markup.goldmark.extensions]
      definitionList          = true
      footnote                = true
      linkify                 = true
      strikethrough           = true
      table                   = true
      taskList                = true
      typographer             = true
    [markup.goldmark.parser]
      attribute               = true
      autoHeadingID           = true
      autoHeadingIDType       = "github"
    [markup.goldmark.renderer]
      hardWraps               = false
      unsafe                  = true
      xhtml                   = false
  [markup.blackFriday]
    angledQuotes              = false
    footnoteAnchorPrefix      = ""
    footnoteReturnLinkContents= ""
    fractions                 = true
    hrefTargetBlank           = false
    latexDashes               = true
    nofollowLinks             = false
    noreferrerLinks           = false
    plainIDAnchors            = true
    skipHTML                  = false
    smartDashes               = true
    smartypants               = true
    smartypantsQuotesNBSP     = false
    taskLists                 = true
  [markup.highlight]
    codeFences                = true
    guessSyntax               = false
    hl_Lines                  = ""
    lineNoStart               = 1
    lineNos                   = false
    lineNumbersInTable        = false
    noClasses                 = false
    style                     = "dracula"
    tabWidth                  = 4
  [markup.tableOfContents]
    endLevel                  = 6
    ordered                   = false
    startLevel                = 2
```

### Create new Post

```
hugo new content/post/name_post.md
```

**Example Param:**

```
---
title: "Atomic Design"
date: 2020-10-29T10:22:10+07:00
images: [
    https://miro.medium.com/max/1000/1*V5oi-JrH4RlEQuYdVrQXig.png,
    https://i.ibb.co/BTRn8m6/Untitled.png,
]
tags: ["atomic","design"]
---
```

### Create new Page

```bash
hugo new content/about.md
```

Example params:

```
---
title: About 😃
menu: main
toc: false
authorBox: false
breadcrumb: false
comments: false
share: false
page: true
---
```

### Set Featured Post
In any content post add this param, to set featured post.

```
featured: true
```

## Support Us (Author) 
This project needs you! If you would like to support this project's further development, the creator of this project or the continuous maintenance of this project, feel free to donate. Your donation is highly appreciated . Thank you!

* **[Donate $10](https://www.paypal.me/wisnuwiry/10USD)**: Thank's for creating this project, here's a tea (or some juice) for you!
* **[Donate $20](https://www.paypal.me/wisnuwiry/20USD)**: Wow, I am stunned. Let me take you to the movies!
* **[Donate $30](https://www.paypal.me/wisnuwiry/30USD)**: I really appreciate your work, let's grab some lunch!
* **[Donate $40](https://www.paypal.me/wisnuwiry/40USD)**: That's some awesome stuff you did right there, dinner is on me!
* **[Donate $50](https://www.paypal.me/wisnuwiry/50USD)**: I really really want to support this project, great job!
* **[Donate $100](https://www.paypal.me/wisnuwiry/100USD)**: You are the man! This project saved me hours (if not days) of struggle and hard work, simply awesome!
* **[Donate $1500](https://www.paypal.me/wisnuwiry/1500USD)**: Go buddy, buy Macbook Pro for yourself!

Of course, you can also choose what you want to donate, all donations are awesome ! 

## Showcase
1. [Wisnuwiry Blog](https://wisnuwiry.space)

## Release Notes
[Show more..](CHANGELOG.md)

## Maintainers
1. @wisnuwiry
    
    [![Wisnuwiry](https://github.com/wisnuwiry.png?size=38)](https://github.com/wisnuwiry)


## Contributing 

Have you found a bug or got an idea for a new feature? Feel free to use the [issue tracker](https://github.com/Vimux/mainroad/issues) to let me know. Or make directly a [pull request](https://github.com/Vimux/mainroad/pulls).



## Thanks to

@bep
@gohugoio
Report a correction

Explore similar templates

Compare previews and descriptions within the same stack and category.