Hugo Nuo is an responsive light & clean hugo theme for blogger. This theme features several page layout, like an about page for your portfolio, a links page for your friends’ blog, a tags page for your tags cloud, a works page is under development. This theme makes many third-party hugo shortcodes, including Codepen, JSFiddle, Video.js, Music 163 and Sheng Xiang.
$ cd themes
$ git clone https://github.com/laozhu/hugo-nuo
For more information read the official setup guide of Hugo.
After installing the hugo-nuo theme successfully it requires just a few more steps to get your site finally running.
The config file
Take a look inside the exampleSite folder of this theme. You’ll find a file called config.toml. To use it, copy the config.toml in the root folder of your Hugo site. Feel free to customize this theme as you like.
The hugo-nuo theme add home, works and tags page to initial site menu, you can add your own menu item here.
You can choose someone to display, the recommend number is 7 icons.
The hugo-nuo theme support Google, Bing, Baidu, Sogou, 360 webmaster’s meta verification tool, you can activate as required. The seotitle and description will show in search results and browser title.
seotitle = "Hugo Blog Title (SEO Version)"
description = "Hugo is one of the most popular open-source static site generators. With its amazing speed and flexibility, Hugo makes building websites fun again."
# Google Webmaster
googleSiteVerification = "google_site_verification_code"
# Bing Webmaster
msValidate = "bing_site_verification_code"
# Baidu Webmaster (China Only)
# baiduSiteVerification = "baidu_site_verification_code"
# Sogou Webmaster (China Only)
# sogouSiteVerification = "sogou_site_verification_code"
# 360 Webmaster (China Only)
# soSiteVerification = "360_site_verification_code"
The links page read data from data/link.yml file, now you can add friend’s links there. The format looks like:
title: chekun's blog
description: A full-stack PHP developer
title: Boof Wang
description: Another full-stack PHP developer
The links page need friend’s avatar, finally you should add friend’s avatar to content/media/links directory and link to avatar in the links.yml file.
The about page
Inside the folder of your Hugo site run:
$ hugo new about.md
$ vim content/about.md
Change the content of about.md, set page layout to about, If you want to add about page to menu, set menu to main and weight to 50.
Write something about you here.
Write your portfolio as a post here, if you want comments in about page, you should turn comments to true.
If you want to modify styles and scripts by yourself, you should install dev packages by npm install, I use sass for styles development, rollup for scripts development, inside the folder of your Hugo site run:
# Install dependences
$ cd themes/hugo-nuo
$ npm install
# Scripts dev
$ npm run dev
$ npm run build
# Styles dev
$ npm run sass
# Copy fonts to static
$ npm run fonts
# Copy images to static
$ npm run images
# Scripts lint
$ npm run eslint
# Styles lint
$ npm run stylelint
# Minify images
$ npm run imagemin
If you want to build hugo-nuo theme, you should have node and npm evironment installed. Besides, you should have dependencies below installed.