Getting Started
Follow this guide to install and set up the ModernDuang theme on your Hexo blog.
Prerequisites
- Node.js (v14 or later recommended)
- Hexo (v6 or later)
- An existing Hexo site, or create one with
hexo init
Tip: If hexo init fails due to network issues, you can manually clone the official Hexo starter template:
git clone https://github.com/hexojs/hexo-starter.git your-hexo-site
cd your-hexo-site
npm install
Installation
Step 1: Install the Theme
Navigate to your Hexo site directory and install the theme via npm:
cd your-hexo-site
npm install hexo-theme-modernduang --save
Step 2: Switch to the Theme
Edit your Hexo site's root _config.yml and set the theme:
Step 3: Copy the Default Configuration
Copy the theme's default config to your site root as _config.modernduang.yml:
cp themes/modernduang/_config.yml _config.modernduang.yml
Note: Hexo automatically merges _config.modernduang.yml with the theme's defaults. You only need to specify the options you want to override.
First, edit Hexo's main _config.yml to set your site name, description, and subtitle:
# Site
title: My Blog # Site name — displayed in the hero section and browser tab
subtitle: '' # Site subtitle
description: Tech & Life # Site description — used for SEO and the links page
author: YourName # Author name — displayed on the profile card
language: en # Site language
The theme automatically reads title and description — title is shown in the homepage hero and browser tab, description is used for SEO and the friend links page site info.
Then open _config.modernduang.yml and set the theme options:
# Profile card on homepage
profile:
avatar: https://your-avatar-url.png
motto: Your motto here
social:
- name: GitHub
url: https://github.com/yourname
icon: github
# Footer
footer:
since: 2024
author: YourName
powered: true
social:
travelling: true
github: true
email: false
Step 5: Create Pages
Use hexo new page to create the pages required by the theme:
hexo new page tags
hexo new page categories
hexo new page about
hexo new page links
Important: Pages generated by hexo new page only include title and date fields by default. You must manually add a layout field for each page so the theme knows which template to use.
The required layout for each page:
For example, source/links/index.md is generated as:
---
title: Links
date: 2024-01-01 00:00:00
---
Replace the date line with layout: links. The title can be anything you like — it's displayed at the top of the page:
---
title: Links
layout: links
---
Step 6: Generate and Start
Run hexo generate first to build the static files, then start the dev server:
hexo generate
hexo server
Open http://localhost:4000 in your browser. You should see your blog with the ModernDuang theme!
Quick Configuration Overview
Here's a minimal working configuration to get started quickly:
# _config.modernduang.yml
favicon: /img/favicon.ico
menu:
首页: /
归档: /archives
标签: /tags
分类: /categories
友链: /links
关于: /about
dark_mode:
enable: true
default: light
hero:
mode: fixed
text: 欢迎来到我的博客
profile:
avatar: ''
motto: ''
social: []
footer:
since: 2024
author: ''
powered: true
Project Structure
After installation, your Hexo site will be organized like this:
your-hexo-site/
├── _config.yml # Hexo main config (set theme: modernduang)
├── _config.modernduang.yml # Theme-specific configuration
├── package.json # Project dependencies
├── node_modules/ # Installed npm packages
├── scaffolds/ # Post/page/draft templates
│ ├── draft.md
│ ├── page.md
│ └── post.md
├── source/ # Site content source
│ ├── _posts/ # Blog posts (Markdown files)
│ │ └── hello-world.md
│ ├── about/ # About page (created in Step 6)
│ │ └── index.md
│ ├── links/ # Friend links page (created in Step 6)
│ │ └── index.md
│ ├── tags/ # Tags page (created in Step 6)
│ │ └── index.md
│ ├── categories/ # Categories page (created in Step 6)
│ │ └── index.md
│ └── img/ # Site image assets
├── themes/
│ └── modernduang/
│ ├── _config.yml # Default theme config (do not edit directly)
│ ├── package.json
│ ├── README.md
│ ├── screenshot.png
│ ├── layout/ # EJS template files
│ │ ├── _link-apply.md # Link exchange section content
│ │ ├── layout.ejs # Base layout
│ │ ├── index.ejs # Homepage
│ │ ├── post.ejs # Article page
│ │ ├── archive.ejs # Archive page
│ │ ├── tags.ejs # Tags listing page
│ │ ├── tag.ejs # Single tag page
│ │ ├── categories.ejs # Categories listing page
│ │ ├── category.ejs # Single category page
│ │ ├── links.ejs # Friend links page
│ │ ├── about.ejs # About page
│ │ ├── 404.ejs # 404 error page
│ │ └── partials/ # Reusable components
│ │ ├── header.ejs
│ │ ├── footer.ejs
│ │ └── comments/
│ │ └── twikoo.ejs
│ ├── source/ # Theme static assets
│ │ ├── css/main.css # All theme styles
│ │ ├── js/main.js # Theme JavaScript
│ │ └── img/ # Built-in images (ICP icons, etc.)
│ └── scripts/ # Hexo helper scripts
│ ├── mermaid.js # Mermaid diagram support
│ ├── note-tags.js # Custom blockquote tags
│ └── link-apply.js # Link exchange section rendering
└── public/ # Generated static site (after hexo generate)
Next Steps
