HugoPaper

Complete SEO Optimization Guide for Hugo Paper: Rank Higher on Google

Hugo Paper Team — Fri, 15 Nov 2024 12:00:00 +0800

Hugo Paper comes with comprehensive SEO optimization built-in. Learn how to leverage Schema.org structured data, meta tags, and best practices to rank higher on Google and drive organic traffic.

Why SEO Matters

Impact of good SEO:

📈 53% of website traffic comes from organic search
🎯 75% of users never scroll past first page
💰 SEO leads have 14.6% close rate vs 1.7% for outbound
⏱️ Long-term results - Compounds over time

Hugo Paper’s SEO advantages:

✅ Fast loading (static HTML)
✅ Mobile-friendly (responsive design)
✅ Clean URLs (SEO-friendly slugs)
✅ Structured data (Schema.org)
✅ Semantic HTML (proper tags)

Hugo Paper’s SEO Features

1. Comprehensive Meta Tags

Hugo Paper automatically generates:

<!-- Basic Meta Tags -->
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<meta name="description" content="Your post description" />
<meta name="keywords" content="keyword1, keyword2" />
<meta name="author" content="Author Name" />

<!-- Open Graph (Facebook) -->
<meta property="og:title" content="Post Title" />
<meta property="og:description" content="Description" />
<meta property="og:image" content="Image URL" />
<meta property="og:url" content="Post URL" />

<!-- Twitter Cards -->
<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:title" content="Post Title" />
<meta property="twitter:description" content="Description" />
<meta property="twitter:image" content="Image URL" />

<!-- Article Meta -->
<meta property="article:published_time" content="2024-01-15T10:00:00Z" />
<meta property="article:modified_time" content="2024-01-15T10:00:00Z" />
<meta property="article:author" content="Author Name" />
<meta property="article:section" content="Category" />
<meta property="article:tag" content="Tag1" />

2. Schema.org Structured Data

Hugo Paper includes three types of structured data:

{
 "@context": "https://schema.org",
 "@type": "BreadcrumbList",
 "itemListElement": [
 {
 "@type": "ListItem",
 "position": 1,
 "name": "Home",
 "item": "https://yourblog.com"
 },
 {
 "@type": "ListItem",
 "position": 2,
 "name": "Post",
 "item": "https://yourblog.com/post/"
 },
 {
 "@type": "ListItem",
 "position": 3,
 "name": "Article Title",
 "item": "https://yourblog.com/post/article/"
 }
 ]
}

Article Schema

{
 "@context": "https://schema.org",
 "@type": "BlogPosting",
 "headline": "Article Title",
 "description": "Article description",
 "image": "Image URL",
 "datePublished": "2024-01-15T10:00:00Z",
 "dateModified": "2024-01-15T10:00:00Z",
 "keywords": "keyword1, keyword2",
 "timeRequired": "PT5M",
 "wordCount": 1500,
 "author": {
 "@type": "Person",
 "name": "Author Name",
 "url": "Author URL"
 },
 "publisher": {
 "@type": "Organization",
 "name": "Site Name",
 "logo": {
 "@type": "ImageObject",
 "url": "Logo URL"
 }
 }
}

Website Schema

{
 "@context": "https://schema.org",
 "@type": "WebSite",
 "name": "Site Name",
 "description": "Site description",
 "url": "https://yourblog.com",
 "logo": "Logo URL",
 "sameAs": [
 "https://twitter.com/yourhandle",
 "https://github.com/yourhandle"
 ]
}

3. SEO-Friendly URLs

Hugo Paper generates clean, SEO-friendly URLs:

Dynamic OG Image Generation in Hugo Paper: Boost Social Media Engagement

Hugo Paper Team — Fri, 15 Nov 2024 11:00:00 +0800

Open Graph (OG) images are crucial for social media sharing. Hugo Paper’s dynamic OG image generation automatically creates beautiful, relevant preview images using the Unsplash API—no manual work required.

What Are OG Images?

Open Graph images are the preview images that appear when you share a link on social media platforms like:

Facebook - Shows in news feed and timeline
Twitter - Displays as Twitter Card
LinkedIn - Appears in professional posts
Discord/Slack - Shows in message previews
WhatsApp - Displays in link previews

Why OG Images Matter

Impact on engagement:

📈 30-50% higher click-through rates
👁️ 3x more visual attention
🔄 2x more shares
💬 Better conversation starters

Without OG image:

[Generic site icon]
Your Amazing Blog Post
yourblog.com

With OG image:

[Beautiful relevant image 1200x630px]
Your Amazing Blog Post
A compelling description that makes people want to click
yourblog.com

The Traditional Problem

Manual Approach

Most Hugo themes require you to:

Create images manually - Design in Photoshop/Canva
Save and optimize - Export at correct size
Upload to static folder - Manage file organization
Reference in frontmatter - Add path to each post

Time cost: 10-15 minutes per post

Problems:

❌ Time-consuming
❌ Requires design skills
❌ Inconsistent quality
❌ Storage overhead
❌ Easy to forget

Static Fallback Approach

Using one default image for all posts:

How to Create SEO-Optimized Blog Posts with Hugo Paper's New-Post Script

Hugo Paper Team — Fri, 15 Nov 2024 10:00:00 +0800

Creating blog posts with proper SEO optimization can be time-consuming. Hugo Paper’s new-post script automates this process, helping you create well-structured, SEO-friendly posts in seconds.

Why Use the New-Post Script?

Traditional blog post creation requires manually setting up frontmatter with numerous SEO fields. The new-post script streamlines this by:

✅ Interactive prompts - Guides you through all SEO fields
✅ Automatic slug generation - Creates SEO-friendly URLs
✅ Timestamp management - Adds proper date/time formats
✅ Multilingual support - Creates posts in English or Chinese
✅ SEO best practices - Ensures all required fields are present
✅ Consistent structure - Maintains uniform post format

Prerequisites

Before using the script, ensure you have:

# Check Node.js version (18.0+)
node --version

# Check pnpm version (8.0+)
pnpm --version

# Install dependencies if needed
pnpm install

Two Ways to Create Posts

Hugo Paper provides two scripts for different workflows:

1. Interactive Mode (Recommended)

The new-post script provides an interactive experience with prompts for all fields:

# Basic usage
pnpm new-post

# With title
pnpm new-post "Getting Started with Hugo"

# With title and language
pnpm new-post "Hugo Getting Started Guide" en

2. Quick Mode

The quick-post script uses sensible defaults for rapid post creation:

Dynamic OG Image Generation in Hugo Paper

Hugo Paper Team — Fri, 15 Nov 2024 00:00:00 +0000

Hugo Paper introduces a powerful dynamic OG image generation feature that automatically creates beautiful, relevant social media preview images for your blog posts using the Unsplash API.

Introduction

Open Graph (OG) images are crucial for social media sharing, providing visual previews when your blog posts are shared on platforms like Twitter, Facebook, LinkedIn, and others. These preview images can increase click-through rates by 30-50% and significantly improve engagement.

While Twitter technically uses “Twitter Cards” rather than Open Graph, we’ll use the term “OG image” to refer to all social media preview images for simplicity.

The Traditional Approach

Traditionally, Hugo themes handle OG images in one of two ways:

Manual specification: Authors specify an image path in the frontmatter (cover or image field)
Static fallback: A single default image is used for all posts without a specified image

The problem: The static fallback approach means every blog post without a custom image uses the same generic preview, regardless of the post’s content. This results in:

Poor visual differentiation between posts
Lower engagement rates
Time-consuming manual image creation for each post

Hugo Paper’s Dynamic Solution

Hugo Paper takes a different, more efficient approach using the Unsplash Source API to dynamically generate relevant OG images based on your post’s content.

Getting Started with Hugo Paper

Hugo Paper Team — Mon, 11 Nov 2024 00:00:00 +0000

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:

Tailwind CSS v4 Best Practices

Hugo Paper Team — Sun, 10 Nov 2024 00:00:00 +0000

Introduction

Tailwind CSS v4 brings powerful new features and improvements. Let’s explore some best practices for using it effectively in your Hugo Paper projects.

Utility-First Approach

The core philosophy of Tailwind CSS is utility-first. Instead of writing custom CSS, you compose styles using utility classes.

Good Example

<div class="flex items-center justify-between p-4 bg-primary text-white rounded-lg">
 <h2 class="text-lg font-bold">Title</h2>
 <button class="px-4 py-2 bg-white text-primary rounded hover:bg-gray-100 transition-colors">
 Action
 </button>
</div>

Avoid Custom CSS for Simple Styles

❌ Don’t do this:

.card {
 padding: 1rem;
 border-radius: 0.5rem;
 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

✅ Do this instead:

<div class="p-4 rounded-lg shadow-sm">...</div>

Component Extraction

When styles are repeated, extract them into components or use @apply.

@layer components {
 .btn-primary {
 @apply px-4 py-2 bg-primary text-white rounded-lg font-medium
 hover:bg-accent transition-colors duration-200;
 }
}

Then use it:

<button class="btn-primary">Click me</button>

Responsive Design

Tailwind makes responsive design simple with breakpoint prefixes:

<!-- Mobile: 1 column, Tablet: 2 columns, Desktop: 3 columns -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
 <!-- content -->
</div>

Dark Mode

Hugo Paper includes dark mode support using CSS variables:

<!-- This will automatically adjust for dark mode -->
<div class="bg-background text-foreground">
 <p class="text-muted">This text adjusts based on theme</p>
</div>

Performance Tips

1. Avoid Arbitrary Values When Possible

❌ Avoid: class="w-[347px]"
✅ Prefer: class="w-full max-w-md"

2. Use Content Configuration

Make sure your tailwind.config.js has the correct content paths:

How to add LaTeX Equations in Astro blog posts

Alberto Perdomo — Sun, 08 Sep 2024 20:58:52 +0000

This document demonstrates how to use LaTeX equations in your Markdown files for AstroPaper. LaTeX is a powerful typesetting system often used for mathematical and scientific documents.

Photo by Vitaly Gariev

Instructions

In this section, you will find instructions on how to add support for LaTeX in your Markdown files for AstroPaper.

Install the necessary remark and rehype plugins by running:
```
pnpm install rehype-katex remark-math katex
```

Update the Astro configuration to use the these plugins:

// ...
import remarkMath from "remark-math";
import rehypeKatex from "rehype-katex";

export default defineConfig({
 // ...
 markdown: {
 remarkPlugins: [
 remarkMath, // [!code ++]
 remarkToc,
 [remarkCollapse, { test: "Table of contents" }],
 ],
 rehypePlugins: [rehypeKatex], // [!code ++]
 shikiConfig: {
 // For more themes, visit https://shiki.style/themes
 themes: { light: "min-light", dark: "night-owl" },
 wrap: false,
 },
 },
 // ...
});

Import KaTeX CSS in the main layout file

---
import { SITE } from "@config";
// astro code
---
<!doctype html>
<!-- others... -->
<script is:inline src="/toggle-theme.js"></script>
<!-- [!code highlight:4] -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/katex@0.15.2/dist/katex.min.css"
/>
<body>
<slot />
</body>

As the last step, add a text-color for katex in typography.css.

@plugin '@tailwindcss/typography';

@layer base {
 /* other classes */

 /* Katex text color */
 /* [!code highlight:3] */
 .prose .katex-display {
 @apply text-foreground;
 }

 /* ===== Code Blocks & Syntax Highlighting ===== */
 /* other classes */
}

And voilà, this setup allows you to write LaTeX equations in your Markdown files, which will be rendered properly when the site is built. Once you do it, the rest of the document will appear rendered correctly.

How to integrate Giscus comments into AstroPaper

FjellOverflow — Thu, 25 Jul 2024 11:11:53 +0000

Hosting a thin static blog on a platform like GitHub Pages has numerous advantages, but also takes away some interactivity. Fortunately, Giscus exists and offers a way to embed user comments on static sites.

How Giscus works

Giscus uses the GitHub API to read and store comments made by GitHub users in the Discussions associated with a repository.

Embed the Giscus client-side script bundle on your site, configure it with the correct repository URL, and users can view and write comments (when logged into GitHub).

The approach is serverless, as the comments are stored on GitHub and dynamically loaded from there on client side, hence perfect for a static blog, like AstroPaper.

Setting up Giscus

Giscus can be set up easily on giscus.app, but I will outline the process shortly still.

Prerequisites

Prerequisites to get Giscus working are

the repository is public
the Giscus app is installed
the Discussions feature is turned on for your repository

If any of these conditions cannot be fulfilled for any reason, unfortunately, Giscus cannot be integrated.

Configuring Giscus

Next, configuring Giscus is necessary. In most cases, the preselected defaults are suitable, and you should only modify them if you have a specific reason and know what you are doing. Don’t worry too much about making the wrong choices; you can always adjust the configuration later on.

How to use Git Hooks to set Created and Modified Dates

Simon Smale — Wed, 03 Jan 2024 20:40:08 +0000

In this post I will explain how to use the pre-commit Git hook to automate the input of the created (pubDatetime) and modified (modDatetime) in the AstroPaper blog theme frontmatter

Have them Everywhere

Git hooks are great for automating tasks like adding or checking the branch name to your commit messages or stopping you committing plain text secrets. Their biggest flaw is that client-side hooks are per machine.

You can get around this by having a hooks directory and manually copy them to the .git/hooks directory or set up a symlink, but this all requires you to remember to set it up, and that is not something I am good at doing.

As this project uses npm, we are able to make use of a package called Husky (this is already installed in AstroPaper) to automatically install the hooks for us.

Update! In AstroPaper v4.3.0, the pre-commit hook has been removed in favor of GitHub Actions. However, you can easily install Husky yourself.

The Hook

As we want this hook to run as we commit the code to update the dates and then have that as part of our change we are going to use the pre-commit hook. This has already been set up by this AstroPaper project, but if it hadn’t, you would run npx husky add .husky/pre-commit 'echo "This is our new pre-commit hook"'.

How to update dependencies of AstroPaper

Sat Naing — Thu, 20 Jul 2023 15:33:05 +0000

Updating the dependencies of a project can be tedious. However, neglecting to update project dependencies is not a good idea either 😬. In this post, I will share how I usually update my projects, focusing on AstroPaper as an example. Nonetheless, these steps can be applied to other js/node projects as well.

Updating Package Dependencies

There are several ways to update dependencies, and I’ve tried various methods to find the easiest path. One way to do it is by manually updating each package using npm install package-name@latest. This method is the most straightforward way of updating. However, it may not be the most efficient option.

My recommended way of updating dependencies is by using the npm-check-updates package. There’s a good article from freeCodeCamp about that, so I won’t be explaining the details of what it is and how to use that package. Instead, I’ll show you my typical approach.

First, install npm-check-updates package globally.

npm install -g npm-check-updates

Before making any updates, it’s a good idea to check all new dependencies that can be updated.

ncu

Most of the time, patch dependencies can be updated without affecting the project at all. So, I usually update patch dependencies by running either ncu -i --target patch or ncu -u --target patch. The difference is that ncu -u --target patch will update all the patches, while ncu -i --target patch will give an option to toggle which package to update. It’s up to you to decide which approach to take.

Predefined color schemes

Sat Naing — Mon, 26 Sep 2022 12:13:24 +0000

I’ve crafted some predefined color schemes for this AstroPaper blog theme. You can replace these color schemes with the original ones.

If you don’t know how you can configure color schemes, check this blog post.

Light color schemes

Light color scheme has to be defined using the css selector :root and html[data-theme="light"].

Lobster

:root,
html[data-theme="light"] {
 --background: #f6eee1;
 --foreground: #012c56;
 --accent: #e14a39;
 --muted: #efd8b0;
 --border: #dc9891;
}

Leaf Blue

:root,
html[data-theme="light"] {
 --background: #f2f5ec;
 --foreground: #353538;
 --accent: #1158d1;
 --muted: #bbc789;
 --border: #7cadff;
}

Pinky light

:root,
html[data-theme="light"] {
 --background: #fafcfc;
 --foreground: #222e36;
 --accent: #d3006a;
 --muted: #f1bad4;
 --border: #e3a9c6;
}

Dark color schemes

Dark color scheme has to be defined as html[data-theme="dark"].

AstroPaper 1 original Dark Theme

html[data-theme="dark"] {
 --background: #2f3741;
 --foreground: #e6e6e6;
 --accent: #1ad9d9;
 --muted: #596b81;
 --border: #3b4655;
}

Deep Oyster

html[data-theme="dark"] {
 --background: #21233d;
 --foreground: #f4f7f5;
 --accent: #ff5256;
 --muted: #4a4e86;
 --border: #b12f32;
}

Pikky dark

html[data-theme="dark"] {
 --background: #353640;
 --foreground: #e9edf1;
 --accent: #ff78c8;
 --muted: #715566;
 --border: #86436b;
}

Astro dark (High Contrast)

html[data-theme="dark"] {
 --background: #212737;
 --foreground: #eaedf3;
 --accent: #ff6b01;
 --muted: #8a3302;
 --border: #ab4b08;
}

Astro dark (New default dark theme in AstroPaper 2)

html[data-theme="dark"] {
 --background: #212737; /* lower contrast background */
 --foreground: #eaedf3;
 --accent: #ff6b01;
 --muted: #8a3302;
 --border: #ab4b08;
}

Astro Deep Purple (New dark theme in AstroPaper 3)

html[data-theme="dark"] {
 --background: #212737;
 --foreground: #eaedf3;
 --accent: #eb3fd3;
 --muted: #7d4f7c;
 --border: #642451;
}

AstroPaper v4 Special (New dark theme in AstroPaper 4)

Customizing AstroPaper theme color schemes

Sat Naing — Sun, 25 Sep 2022 15:20:35 +0000

This post will explain how you can enable/disable light & dark mode for the website. Moreover, you’ll learn how you can customize color schemes of the entire website.

Enable/disable light & dark mode

AstroPaper theme will include light and dark mode by default. In other words, there will be two color schemes_ one for light mode and another for dark mode. This default behavior can be disabled in SITE configuration object.

export const SITE = {
 website: "https://astro-paper.pages.dev/", // replace this with your deployed domain
 author: "Sat Naing",
 profile: "https://satnaing.dev/",
 desc: "A minimal, responsive and SEO-friendly Astro blog theme.",
 title: "AstroPaper",
 ogImage: "astropaper-og.jpg",
 lightAndDarkMode: true, // [!code highlight]
 postPerIndex: 4,
 postPerPage: 4,
 scheduledPostMargin: 15 * 60 * 1000, // 15 minutes
 showArchives: true,
 showBackButton: true, // show back button in post detail
 editPost: {
 enabled: true,
 text: "Suggest Changes",
 url: "https://github.com/satnaing/astro-paper/edit/main/",
 },
 dynamicOgImage: true,
 lang: "en", // html lang code. Set this empty and default will be "en"
 timezone: "Asia/Bangkok", // Default global timezone (IANA format) https://en.wikipedia.org/wiki/List_of_tz_database_time_zones
} as const;

To disable light & dark mode set SITE.lightAndDarkMode to false.

Choose primary color scheme

By default, if we disable SITE.lightAndDarkMode, we will only get system’s prefers-color-scheme.

Thus, to choose primary color scheme instead of prefers-color-scheme, we have to set color scheme in the primaryColorScheme variable inside toggle-theme.js.

const primaryColorScheme = ""; // "light" | "dark" // [!code hl]

// Get theme data from local storage
const currentTheme = localStorage.getItem("theme");

// ...

The primaryColorScheme variable can hold two values_ "light", "dark". You can leave the empty string (default) if you don’t want to specify the primary color scheme.

Adding new posts in AstroPaper theme

Sat Naing — Fri, 23 Sep 2022 15:22:00 +0000

Here are some rules/recommendations, tips & ticks for creating new posts in AstroPaper blog theme.

Photo by Pixabay

Creating a Blog Post

To write a new blog post, create a markdown file inside the src/data/blog/ directory.

Prior to AstroPaper v5.1.0, all blog posts had to be in src/data/blog/, meaning you couldn’t organize them into subdirectories.

Starting from AstroPaper v5.1.0, you can now organize blog posts into subdirectories, making it easier to manage your content.

For example, if you want to group posts under 2025, you can place them in src/data/blog/2025/. This also affects the post URL, so src/data/blog/2025/example-post.md will be available at /posts/2025/example-post.

If you don’t want subdirectories to affect the post URL, just prefix the folder name with an underscore _.

# Example: blog post structure and URLs
src/data/blog/very-first-post.md -> mysite.com/posts/very-first-post
src/data/blog/2025/example-post.md -> mysite.com/posts/2025/example-post
src/data/blog/_2026/another-post.md -> mysite.com/posts/another-post
src/data/blog/docs/_legacy/how-to.md -> mysite.com/posts/docs/how-to
src/data/blog/Example Dir/Dummy Post.md -> mysite.com/posts/example-dir/dummy-post

💡 Tip: You can override a blog post’s slug in the frontmatter as well. See the next section for more details.

If the subdirectory URL doesn’t appear in the build output, remove node_modules, reinstall packages, and then rebuild.

Adding new posts in HugoPaper theme

Sat Naing — Fri, 23 Sep 2022 15:22:00 +0000

Here are some rules/recommendations, tips & ticks for creating new posts in HugoPaper blog theme.

Photo by Pixabay

Creating a Blog Post

To write a new blog post, create a markdown file inside the content/post/ directory.

You can organize blog posts into subdirectories, making it easier to manage your content.

For example, if you want to group posts under 2025, you can place them in content/post/2025/. Hugo will automatically generate the appropriate URLs.

# Example: blog post structure and URLs
content/post/very-first-post.md -> mysite.com/post/very-first-post
content/post/2025/example-post.md -> mysite.com/post/2025/example-post
content/post/docs/how-to.md -> mysite.com/post/docs/how-to

💡 Tip: You can override a blog post’s slug in the frontmatter using the slug parameter.

Frontmatter

Frontmatter is the main place to store some important information about the blog post (article). Frontmatter lies at the top of the article and is written in YAML format. Read more about frontmatter and its usage in Hugo documentation.

Here is the list of frontmatter property for each post.

Property	Description	Remark
*title*	Title of the post. (h1)	required^*
*description*	Description of the post. Used in post excerpt and site description of the post.	required^*
*date*	Published datetime in ISO 8601 format.	required^*
*lastmod*	Modified datetime in ISO 8601 format. (only add this property when a blog post is modified)	optional
*author*	Author of the post.	default = site author
*slug*	Slug for the post. This field is optional.	default = slugified file name
*featured*	Whether or not display this post in featured section of home page	default = false
*draft*	Mark this post ‘unpublished’.	default = false
*tags*	Related keywords for this post. Written in array yaml format.	default = []
*categories*	Categories for this post. Written in array yaml format.	default = []
*image*	Featured image of the post. Useful for social media sharing and SEO.	optional
*hideEditPost*	Hide editPost button under blog title. This applies only to the current blog post.	default = false

Only title, description and date fields in frontmatter must be specified.

How to configure AstroPaper theme

Sat Naing — Fri, 23 Sep 2022 04:58:53 +0000

AstroPaper is a highly customizable Astro blog theme. With AstroPaper, you can customize everything according to your personal taste. This article will explain how you can make some customizations easily in the config file.

Configuring SITE

The important configurations resides in src/config.ts file. Within that file, you’ll see the SITE object where you can specify your website’s main configurations.

During development, it’s okay to leave SITE.website empty. But in production mode, you should specify your deployed url in SITE.website option since this will be used for canonical URL, social card URL etc.. which are important for SEO.

export const SITE = {
 website: "https://astro-paper.pages.dev/", // replace this with your deployed domain
 author: "Sat Naing",
 profile: "https://satnaing.dev/",
 desc: "A minimal, responsive and SEO-friendly Astro blog theme.",
 title: "AstroPaper",
 ogImage: "astropaper-og.jpg",
 lightAndDarkMode: true,
 postPerIndex: 4,
 postPerPage: 4,
 scheduledPostMargin: 15 * 60 * 1000, // 15 minutes
 showArchives: true,
 showBackButton: true, // show back button in post detail
 editPost: {
 enabled: true,
 text: "Suggest Changes",
 url: "https://github.com/satnaing/astro-paper/edit/main/",
 },
 dynamicOgImage: true, // enable automatic dynamic og-image generation
 dir: "ltr", // "rtl" | "auto"
 lang: "en", // html lang code. Set this empty and default will be "en"
 timezone: "Asia/Bangkok", // Default global timezone (IANA format) https://en.wikipedia.org/wiki/List_of_tz_database_time_zones
} as const;

Here are SITE configuration options

Options	Description
`website`	Your deployed website URL
`author`	Your name
`profile`	Your personal/portfolio website URL which is used for better SEO. Put `null` or empty string `""` if you don’t have any.
`desc`	Your site description. Useful for SEO and social media sharing.
`title`	Your site name
`ogImage`	Your default OG image for the site. Useful for social media sharing. OG images can be an external image URL or they can be placed under `/public` directory.
`lightAndDarkMode`	Enable or disable `light & dark mode` for the website. If disabled, primary color scheme will be used. This option is enabled by default.
`postPerIndex`	The number of posts to be displayed at the home page under `Recent` section.
`postPerPage`	You can specify how many posts will be displayed in each posts page. (eg: if you set `SITE.postPerPage` to 3, each page will only show 3 posts per page)
`scheduledPostMargin`	In Production mode, posts with a future `pubDatetime` will not be visible. However, if a post’s `pubDatetime` is within the next 15 minutes, it will be visible. You can set `scheduledPostMargin` if you don’t like the default 15 minutes margin.
`showArchives`	Determines whether to display the `Archives` menu (positioned between the `About` and `Search` menus) and its corresponding page on the site. This option is set to `true` by default.
`showBackButton`	Determines whether to display the `Go back` button in each blog post.
`editPost`	This option allows users to suggest changes to a blog post by providing an edit link under blog post titles. This feature can be disabled by setting `SITE.editPost.enabled` to `false`.
`dynamicOgImage`	This option controls whether to generate dynamic og-image if no `ogImage` is specified in the blog post frontmatter. If you have many blog posts, you might want to disable this feature. See the trade-off for more details.
`dir`	Specifies the text direction of the entire blog. Used as HTML dir attribute in `<html dir="ltr">`. Supported values: `ltr` \| `rtl` \| `auto`
`lang`	Used as HTML ISO Language code in `<html lang"en">`. Default is `en`.
`timezone`	This option allows you to specify your timezone using the IANA format. Setting this ensures consistent timestamps across your localhost and deployed site, eliminating time differences.

Update layout width

The default max-width for the entire blog is 768px (max-w-3xl). If you’d like to change it, you can easily update the max-w-app utility in your global.css. For instance:

Tailwind Typography Plugin

Sat Naing — Tue, 05 Jul 2022 02:05:51 +0000

This article is from TailwindLabs. I put this article to demonstrate how you can write blog posts/articles using AstroPaper theme.

By default, Tailwind removes all of the default browser styling from paragraphs, headings, lists and more. This ends up being really useful for building application UIs because you spend less time undoing user-agent styles, but when you really are just trying to style some content that came from a rich-text editor in a CMS or a markdown file, it can be surprising and unintuitive.

We get lots of complaints about it actually, with people regularly asking us things like:

Why is Tailwind removing the default styles on my h1 elements? How do I disable this? What do you mean I lose all the other base styles too? We hear you, but we’re not convinced that simply disabling our base styles is what you really want. You don’t want to have to remove annoying margins every time you use a p element in a piece of your dashboard UI. And I doubt you really want your blog posts to use the user-agent styles either — you want them to look awesome, not awful.

The @tailwindcss/typography plugin is our attempt to give you what you actually want, without any of the downsides of doing something stupid like disabling our base styles.

How Do I Develop My Terminal Portfolio Website with React

Sat Naing — Thu, 09 Jun 2022 03:42:51 +0000

This article is originally from my blog post. I put this article to demonstrate how you can write blog posts/articles using AstroPaper theme.

Developing a terminal-like website using ReactJS, TypeScript and Styled-Components. Includes features like autocomplete, multiple themes, command hints etc.

Intro

Recently, I’ve developed and published my portfolio + a blog. I’m glad I got some good feedback for it. Today, I want to introduce my new terminal-like portfolio website. It is developed using ReactJS, TypeScript. I got this idea from CodePen and YouTube.

Tech Stack

This project is a frontend project without any backend codes. The UI/UX part is designed in Figma. For the frontend user-interface, I chose React over pain JavaScript and NextJS. Why?

Firstly, I want to write declarative code. Managing HTML DOM using JavaScript imperatively is really tedious.
Secondly, because it is React!!! It is fast, and reliable.
Lastly, I don’t need much of the SEO features, routing and image optimization provided by NextJS.

And of course there’s TypeScript for type checking.

For styling, I took a different approach than what I usually do. Instead of choosing Pure CSS, Sass, or Utility CSS Framework like TailwindCSS, I chose the CSS-in-JS way (Styled-Components). Although I’ve known about Styled-Components for some time, I’ve never tried it out. So, the writing style and structures of Styled-Components in this project may not be very organized or very good.

How Do I Develop My Portfolio Website & Blog

Sat Naing — Fri, 25 Mar 2022 16:55:12 +0000

This article is originally from my blog post. I put this article to demonstrate how you can write blog posts/articles using AstroPaper theme.

My experience about developing my first portfolio website and a blog using NextJS and a headless CMS.

Motivation

I’ve been always thinking about launching my own website with my custom domain name (satnaing.dev) since my college student life. But that never happened until this project. I’ve done several projects and works about web application development but I didn’t make an effort to do this.

So, “what about blog?” you may ask. Yeah, blog also has been in my project list for some time. I always wanted to make a blog project using some of the latest technologies. However, I’ve been busy with my works and other projects so that blog project has never been started.

In these days, I tend to develop my own projects with the focus in good quality rather than quantity. After the project is done, I usually put a proper readme file in the GitHub repo. But GitHub repo readme is only suitable for technical aspects (this is just my thought). I want to write down my experiences and challenges. Thus, I decided to make my own blog. Plus, at this point, I have decent experiences and confidence to develop this project.

About

Mon, 01 Jan 0001 00:00:00 +0000

HugoPaper is a minimal, accessible and SEO-friendly blog theme built with Hugo and Tailwind CSS.

HugoPaper provides a solid foundation for blogs, or even portfolios_ with full markdown support, built-in dark mode, and a clean layout that works out-of-the-box.

The blog posts in this theme also serve as guides, docs or example articles_ making HugoPaper a flexible starting point for your next content-driven site.

Features

HugoPaper comes with a set of useful features that make content publishing easy and effective:

SEO-friendly
Fast performance
Light & dark mode
Highly customizable
Organizable blog posts
Responsive & accessible
Static search with Fuse.js
Automatic social image generation

and so much more.

Show your support

If you like HugoPaper, consider giving it a star ⭐️.

Found a bug 🐛 or have an improvement ✨ in mind? Feel free to open an issue, submit a pull request or start a discussion.

If you find this theme helpful, you can also sponsor me on GitHub or buy me a coffee to show your support — every penny counts.

Thank you! 🙏🏼

Contact

Mon, 01 Jan 0001 00:00:00 +0000

GitHub — @ouraihub
Email — contact@ouraihub.com

Privacy Policy

Mon, 01 Jan 0001 00:00:00 +0000

This site uses minimal cookies (theme preference only). No tracking.

Terms of Service

Mon, 01 Jan 0001 00:00:00 +0000

Content is provided for educational purposes. MIT licensed code examples.

HugoPaper

Complete SEO Optimization Guide for Hugo Paper: Rank Higher on Google

Table of Contents

Why SEO Matters

Hugo Paper’s SEO Features

1. Comprehensive Meta Tags

2. Schema.org Structured Data

Breadcrumb Schema

Article Schema

Website Schema

3. SEO-Friendly URLs

Dynamic OG Image Generation in Hugo Paper: Boost Social Media Engagement

Table of Contents

What Are OG Images?

Why OG Images Matter

The Traditional Problem

Manual Approach

Static Fallback Approach

How to Create SEO-Optimized Blog Posts with Hugo Paper's New-Post Script

Table of Contents

Why Use the New-Post Script?

Prerequisites

Two Ways to Create Posts

1. Interactive Mode (Recommended)

2. Quick Mode

Dynamic OG Image Generation in Hugo Paper

Table of contents

Introduction

The Traditional Approach

Hugo Paper’s Dynamic Solution

Getting Started with Hugo Paper

Introduction

Installation

Step 1: Download Hugo Paper

Step 2: Create a New Site

Step 3: Add Hugo Paper Theme

Configuration

Basic Configuration

Customize Parameters

Creating Content

Create Your First Post

Create a Page

Running Locally

Customization

Changing Colors

Tailwind CSS v4 Best Practices

Introduction

Utility-First Approach

Good Example

Avoid Custom CSS for Simple Styles

Component Extraction

Responsive Design

Dark Mode

Performance Tips

1. Avoid Arbitrary Values When Possible

2. Use Content Configuration

How to add LaTeX Equations in Astro blog posts

Table of contents

Instructions

How to integrate Giscus comments into AstroPaper

Table of contents

How Giscus works

Setting up Giscus

Prerequisites

Configuring Giscus

How to use Git Hooks to set Created and Modified Dates

Table of contents

Have them Everywhere

The Hook

How to update dependencies of AstroPaper

Table of contents

Updating Package Dependencies

Predefined color schemes

Table of contents

Light color schemes

Lobster

Leaf Blue

Pinky light

Dark color schemes

AstroPaper 1 original Dark Theme