Hugo static site theme positioned for personal blogs and portfolios
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.
Actual screenshot captured by the server browser.
All pages & views 2
Screenshots show visual appearance; interactive behavior may differ.
What stands out
A quick read of the recorded project description.
Example configuration covers site parameters such as author information, main menu, social links, share buttons, related articles, and author box
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
Markdown enables Goldmark extensions such as footnotes, tables, task lists, and definition lists, with dracula code highlighting style
Includes Web App Manifest output and SEO-related toggles such as OpenGraph and Twitter Cards
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.
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
First install Hugo and create a new site, then clone the theme or add it as a git submodule into the themes directory
- 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
Comments require filling in repository under [Params.Comments], and the contact form requires filling in Formspree's formspreeId; both are external services
- 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
The theme code is MIT licensed, but third-party assets such as demo images, fonts, and icons need separate license verification
License & source material
Usage conditions & limitations
Free to use · keep license noticeThis 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
[](https://app.netlify.com/start/deploy?repository=https://github.com/wisnuwiry/personal-site-demo)
Original README
https://github.com/wisnuwiry/personal-site/blob/master/LICENSEhttps://github.com/wisnuwiry/personal-site/blob/master/README.md- [] Integrate series in home - [] Responsive chapter detail - [] Update readme - [] Setup demo repo
Original README
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 []() [](https://github.com/wisnuwiry/personal-site/releases) [](LICENSE) [](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 [](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** [](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:  ## Preview |Light|Dark| |-----|-----| ||| ## 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 [](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
Explore similar templates
Compare previews and descriptions within the same stack and category.

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

hugo-book
Hugo Book is a Hugo documentation theme that aims to make documentation sites as simple as a plain book. It emphasizes clean, lightweight, mobile-friendly, and zero initial configuration, and comes with an example site that doubles as documentation.
Hugo · Documentation

LoveIt
LoveIt is a clean, elegant, and feature-rich Hugo blog theme derived from LeaveIt and KeepIt, MIT-licensed. It offers light/dark modes, responsive layout, multilingual support, and search via Lunr.js or Algolia.
Hugo · Blog

hugo-coder
hugo-coder is a minimalist Hugo blog theme maintained by luizdepra under the MIT license. It provides a clean, text-focused blog appearance, configuration documentation in the docs directory, and a complete exampleSite with hugo.toml.
Hugo · Blog

docsy
Docsy is a Hugo theme for technical documentation sites, governed by the Linux Foundation and licensed under Apache-2.0. It provides simple navigation and site structure for open source project and product documentation.
Hugo · Documentation

blowfish
Blowfish is a Hugo personal website and blog theme built with Tailwind CSS 4, focused on lightness, simplicity, and content-first presentation.
Hugo · Blog
