Static Website Generator Template

A clean, modern template for generating static websites from Markdown files. Perfect for portfolios, business sites, or personal websites.

Quick Start

1. Clone this repository:

   git clone <repository-url>
   cd tf_site_template
   

2. Customize your site:

   • Edit build.ps1 and change the site title, header, and footer text (lines 48-50)
   • Add your content in content/*.md files
   • Add images to images/ folder

3. Build your website:

   pwsh -File build.ps1
   

4. View your site: Open dist/index.html in your browser, or serve it with a local web server.

Features

• ✅ Dynamic Section Detection - Automatically creates sections from Markdown files
• ✅ Blog System - Full blog functionality with front matter support
• ✅ Scroll-Snap Navigation - Smooth scrolling with snap-to-section behavior
• ✅ Responsive Design - Works on mobile, tablet, and desktop
• ✅ Modern Styling - Glassmorphism effects and smooth animations
• ✅ Image Management - Automatic image assignment

Project Structure

.
├── build.ps1              # Build script (customize site name here)
├── styles.css              # Website stylesheet
├── content/               # Your Markdown content
│   ├── about.md           # About section
│   ├── services.md        # Services section
│   ├── contact.md         # Contact section
│   └── blog/              # Blog posts
│       └── welcome.md
├── images/                # Your images
│   ├── background.jpg     # Site background (optional)
│   ├── about1.webp        # Section images (numbered)
│   └── ...
└── dist/                  # Generated website (created on build)

Content Format

Sections

Create a .md file in content/ for each section:

# Section Title

First content block.

---

Second content block.

---

Third content block.

Image Naming:

• Name images: {sectionId}{number}.{ext}
• Example: about1.webp, about2.jpg, services1.png
• First block uses about1.webp, second uses about2.webp, etc.

Blog Posts

Create .md files in content/blog/ with front matter:

---
title: My Blog Post
date: 2024-01-15
author: Your Name
tags: [tag1, tag2]
image: blog1
---

Your blog post content here...

---

More content sections.

Customization

Site Information

Edit build.ps1 (around line 48-50):

$siteTitle = "My Website"
$siteHeader = "Welcome to My Website"
$footerText = "My Website"

Styling

Edit styles.css to customize:

• Colors (CSS variables at the top)
• Fonts
• Layout
• Animations

Adding Sections

1. Create a new .md file in content/ (e.g., portfolio.md)
2. Add content following the section format
3. Add images: portfolio1.webp, portfolio2.jpg, etc.
4. Run the build script - the section appears automatically!

Adding Blog Posts

1. Create a new .md file in content/blog/
2. Add front matter with title, date, author, tags, and image
3. Add your content below
4. Run the build script - the post appears on the blog page!

Requirements

• PowerShell 7+ (for UTF-8 support)
• No other dependencies required!

Building

pwsh -File build.ps1

The generated website will be in the dist/ folder.

Deployment

The dist/ folder contains a standard static website. Deploy it to:

• GitHub Pages - Enable Pages and point to dist/ folder
• Netlify - Deploy dist/ folder
• Vercel - Deploy dist/ folder
• Any static host - Upload dist/ contents

Image Guidelines

Section Images

• Naming: {sectionId}{number}.{ext}
• Examples: about1.webp, services2.jpg
• Format: WebP recommended, JPG/PNG also work

Blog Images

• Naming: Any name (e.g., blog1.webp)
• Reference: Use base name in front matter image: field

Background Image

• Naming: background.{ext}
• Usage: Automatically used as site background

Tips

• Use WebP format for smaller file sizes
• Keep image dimensions reasonable (max 2000px width recommended)
• Use descriptive alt text in markdown image syntax: ![Description](path)
• Test your site locally before deploying

License

Free to use and modify for your projects!

Support

For issues or questions, check the main repository documentation or open an issue.