185 lines
4.4 KiB
Markdown
185 lines
4.4 KiB
Markdown
# 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:**
|
|
```bash
|
|
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:**
|
|
```powershell
|
|
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:
|
|
|
|
```markdown
|
|
# 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:
|
|
|
|
```markdown
|
|
---
|
|
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):
|
|
|
|
```powershell
|
|
$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
|
|
|
|
```powershell
|
|
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: ``
|
|
- 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.
|
|
|