Hugo-Sewing

Demo site

Hugo-Sewing is a simple, clean, and flexible Hugo theme suitable for personal blogs, academic websites, and group websites.

Screenshots

Made by Am I Responsive?

Other tools: everysize

Background

Hugo-Sewing is heavily based on Hugo-Xmin, with modifications mainly inspired by Shayan Hosseini's website, Hugo-Astatine-Theme, and Hugo-Holy:

• The base of Hugo-ht is Yihui Xie's Hugo-Xmin.

• The academic layout ("Home", "Project", "Publication", and "People") is modified the code from Shayan Hosseini's website by Shayan Hosseini and Hugo-Astatine-Theme by Hugo Cisneros

• The visual styles (navigation, index list, and footer) based on the Hugo-Holy theme by SerKo.

• Markdown style based on Hugo-HT theme by Hongtao Hao.

• Shortcode ported from: tutorial by https://www.sleepymoon.cyou/ and tutorial by https://fourxiajiao.github.io/.

• Toc style ported from: tutorial by Kevin Xu.

• Memos page ported from memos.top by eallion.

• ......

This amalgamation of influences led to the name "Hugo-Sewing," symbolizing the process of intricately stitching together these diverse elements to create a cohesive theme.

Features

• Includes various shortcodes to meet diverse needs, more detais can see this Blog.
• Mobile-friendly and widescreen-friendly designs.
• Supports the integration of the Giscus comment system, powered by GitHub Discussions.
• Academic style: with publication, project, and people Page.
• Utilizes the Memos system for the "Memos" page, allowing to post personal moments, group galleries, and news.
• "Contact" page features the comment system and enables easy addition of map images.

Installation

This theme requires Hugo Extended >= 0.111.3.

Note: If you encounter a "443: Timed out" error when using either method, it's likely due to internet connectivity issues. In that case, you can download the repository and place the hugo-sewing folder inside the themes directory. Then, simply copy the files from hugo-sewing/exampleSite to the root folder and run hugo server -D.

Direct Clone

hugo new site demosite
cd demosite/themes
git clone https://github.com/HaiyanKong/hugo-sewing
cd ..
cp -r themes/hugo-sewing/exampleSite/* .

hugo server -D

Then, open http://localhost:1313/, then you will see the website like the demo site.

Submodule

You can also add hugo-sewing as a submodule:

hugo new site demosite
cd demosite
git init
git submodule add https://github.com/HaiyanKong/hugo-sewing.git themes/hugo-sewing
cp -r themes/hugo-sewing/exampleSite/* .

hugo server -D

Then, open http://localhost:1313/, then you will see the website like the demo site.

Update with submodule

cd themes/hugo-sewing
git checkout main && git pull
cd ..
git add hugo-sewing
git commit -m "updating submodule to latest"
cd ..

The above code copied from hongtaoh/hugo-ht The difference between two methods:

If you add it as a submodule, the hugo-sewing theme you use is connected to this repository. The benefit is that you can keep it updated, but there is a caveat: if you make lots of changes to the styles based on your personal preferences, these changes might be lost.

Simply git clone is recommended if:

• You pretty satisfied with the current version of hugo-sewing; and/or
• You are going to make changes according to your personal taste; and/or
• You are not familiar with Git and do not know how to update the submodule.

To update the submodule, run the following codes at the root directory of your hugo project:

cd themes/hugo-ht
git checkout main && git pull
cd ..
git add hugo-ht
git commit -m "updating submodule to latest"
cd ..

The above codes came from paularmstrong.

Excellent Hugo website building tutorials

• How to Deploy A Hugo Website Using GitHub Pages Action
• How to Build a Website Using Hugo without Programming Skills
• Create and host a blog with Hugo and GitHub Pages in less than 30 minutes
• Blogging With Hugo

Folder Structure

.
│  .gitignore
│  LICENSE
│  README.md
│  theme.toml
│  
├─archetypes
│  └─default.md
│      
├─assets
│      
├─exampleSite
│  │  config.toml
│  │  
│  ├─content
│  │  │  contact.md
│  │  │  cv.md
│  │  │  memos.md
│  │  │  publication.md
│  │  │  _index.md
│  │  │  
│  │  ├─archive
│  │  │      
│  │  ├─blog
│  │  │      
│  │  ├─people
│  │  │      
│  │  └─project
│  │          
│  └─static
│      ├─blog
│      │      
│      ├─contact
│      │      
│      ├─info
│      │      
│      ├─people
│      │      
│      ├─project
│      │      
│      └─publication
│              
├─i18n
│      en.yaml
│      zh.yaml
│      
├─layouts
│  │  404.html
│  │  index.html
│  │  
│  ├─partials
│  │      
│  ├─shortcodes
│  │      
│  └─_default
│          
└─static
    ├─css
    │      fonts.css
    │      style.css
    │      
    └─readme