Getting Started with Hugo Paper

Introduction

Hugo Paper is a minimal, fast, and responsive Hugo theme designed for bloggers and developers. This guide will help you get started with the theme quickly.

Installation

Step 1: Download Hugo Paper

First, you need to have Hugo installed on your system. If you haven’t installed Hugo yet, visit the official Hugo website.

Step 2: Create a New Site

hugo new site my-blog
cd my-blog

Step 3: Add Hugo Paper Theme

# Using git submodule
git init
git submodule add https://github.com/ouraihub-hugo-themes/hugo-paper.git themes/hugo-paper

# Update hugo.toml
echo 'theme = "hugo-paper"' >> hugo.toml

Configuration

Basic Configuration

Edit your hugo.toml file:

baseURL = "https://yourdomain.com/"
languageCode = "en-us"
title = "My Awesome Blog"
theme = "hugo-paper"

Customize Parameters

Create or edit params.toml:

[params]
[params.header]
logo = "/logo.svg"
logoText = "My Blog"

[params.footer]
copyright = "© 2024 My Blog. All rights reserved."

Creating Content

Create Your First Post

hugo new post/hello-world.md

Edit the generated file:

---
title: "Hello World"
description: "My first blog post"
date: 2024-11-11
draft: false
categories:
  - "Welcome"
tags:
  - "hello"
---

This is my first post!

Create a Page

hugo new about.md

Running Locally

# Development server with live reload
hugo server

# Build for production
hugo

Visit http://localhost:1313 to see your site.

Customization

Changing Colors

Edit assets/css/main.css and modify the CSS variables in :root:

:root {
  --color-primary: #0ea5e9;
  --color-accent: #f43f5e;
  /* ... more colors ... */
}

Adding Custom CSS

Create assets/css/custom.css and import it in main.css:

@import "custom.css";

Next Steps

Happy blogging!