Skip to content

Add four new static site generator templates: WordPress Gatsby, Minimalist Portfolio, Minimal Gallery, Multiple Page Portfolio #1027

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
58 changes: 58 additions & 0 deletions src/site/generators/minimal-gallery.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
---
title: Minimal Gallery
repo: tomcomtang/minimal-gallery
homepage: https://minimal-gallery.edgeone.app
startertemplaterepo: https://github.com/tomcomtang/minimal-gallery
language:
- JavaScript
- HTML
- CSS
license:
- MIT
templates:
- HTML
- CSS
- JavaScript
description: A lightweight, fast, and easy-to-use static image gallery template for quickly showcasing photos or artwork with a minimalist design.
thumbnailurl: /img/cms/minimal-gallery.jpeg
---

## Project Overview

**Minimal Gallery** is a simple and efficient static image gallery template. It allows users to display images or artwork in a clean, distraction-free layout. The gallery is easy to set up, requires no backend, and is ideal for photographers, artists, or anyone who wants to share visual content online.

## Key Features

- Minimalist and clean design
- No backend required—purely static
- Fast loading and optimized for performance
- Responsive layout for all devices
- Easy to add or remove images
- Supports image thumbnails and fullscreen view
- Built with HTML, CSS, and JavaScript

## Getting Started

1. **Clone the repository**
`git clone https://github.com/tomcomtang/minimal-gallery.git`
2. **Open `index.html` in your browser**
Or deploy the folder to any static hosting service.
3. **Add your images**
Place your images in the designated folder and update the gallery markup as needed.

## Use Cases

- Personal or professional photo gallery
- Art or design portfolio
- Event or travel photo showcase
- Simple static gallery for any visual content

## Demo

[Live Demo](https://minimal-gallery-demo.example.com)

[GitHub Repo](https://github.com/tomcomtang/minimal-gallery)

## License

MIT License
61 changes: 61 additions & 0 deletions src/site/generators/minimalist-portfolio.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
---
title: Minimalist Portfolio
repo: tomcomtang/minimalist-portfolio
startertemplaterepo: https://github.com/tomcomtang/minimalist-portfolio
homepage: https://minimalist-portfolio.edgeone.app
language:
- JavaScript
- HTML
- CSS
license:
- MIT
templates:
- React
- HTML
- CSS
- JavaScript
description: A clean, modern, and responsive portfolio template designed for developers and creatives to showcase their work with minimal distraction and maximum impact.
thumbnailurl: /img/cms/minimalist-portfolio.jpeg
---

## Project Overview

**Minimalist Portfolio** is a modern, responsive portfolio template built with React, HTML, and CSS. It is designed to help developers, designers, and creatives showcase their projects, skills, and achievements in a visually appealing and distraction-free way. The template features a clean layout, easy customization, and is suitable for both personal and professional use.

## Key Features

- Minimalist and modern design
- Fully responsive layout for all devices
- Easy to customize content, colors, and sections
- Project and work showcase with links
- About and contact sections
- Fast loading and SEO-friendly
- Built with React, HTML, and CSS

## Getting Started

1. **Clone the repository**
`git clone https://github.com/tomcomtang/minimalist-portfolio.git`
2. **Install dependencies**
`npm install`
3. **Start the development server**
`npm start`
4. **Customize your content**
Edit the relevant files to add your projects, skills, and personal information.

## Use Cases

- Personal developer or designer portfolio
- Freelance showcase site
- Resume and CV website
- Creative project gallery

## Demo

[Live Demo](https://minimalist-portfolio-demo.example.com)

[GitHub Repo](https://github.com/tomcomtang/minimalist-portfolio)

## License

MIT License
57 changes: 57 additions & 0 deletions src/site/generators/multiplepage-portfolio.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
---
title: Multiple Page Portfolio
repo: tomcomtang/multiplepage-portfolio
startertemplaterepo: https://github.com/tomcomtang/multiplepage-portfolio
homepage: https://multiplepage-portfolio.edgeone.app
language:
- JavaScript
- HTML
- CSS
license:
- MIT
templates:
- HTML
- CSS
- JavaScript
description: A multi-page portfolio template for developers and creatives, featuring separate pages for projects, about, contact, and more, with a modern and responsive design.
thumbnailurl: /img/cms/multiplepage-portfolio.jpeg
---

## Project Overview

**Multiple Page Portfolio** is a modern, multi-page portfolio template designed for developers, designers, and creatives. It features dedicated pages for projects, about, contact, and more, allowing for a comprehensive presentation of your work and background. The template is fully responsive, easy to customize, and suitable for both personal and professional use.

## Key Features

- Multi-page layout (Home, About, Projects, Contact, etc.)
- Modern and clean design
- Fully responsive for all devices
- Easy to customize content and styles
- Fast loading and SEO-friendly
- Built with HTML, CSS, and JavaScript

## Getting Started

1. **Clone the repository**
`git clone https://github.com/tomcomtang/multiplepage-portfolio.git`
2. **Open `index.html` in your browser**
Or deploy the folder to any static hosting service.
3. **Customize your content**
Edit the HTML and CSS files to add your own information, projects, and contact details.

## Use Cases

- Personal or professional portfolio website
- Resume and CV site
- Creative project showcase
- Multi-section landing page

## Demo

[Live Demo](https://multiplepage-portfolio-demo.example.com)

[GitHub Repo](https://github.com/tomcomtang/multiplepage-portfolio)

## License

MIT License
111 changes: 111 additions & 0 deletions src/site/generators/wordpress-gatsby.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,111 @@
---
title: WordPress Gatsby
repo: tomcomtang/wordpress-gatsby
startertemplaterepo: https://github.com/tomcomtang/wordpress-gatsby
homepage: https://wordpress-gatsby.edgeone.app
language:
- JavaScript
- PHP
license:
- MIT
templates:
- Gatsby
- WordPress
- Markdown
description: A personal blog template integrating WordPress and Gatsby, supporting both remote WordPress content and local config file modes for performance and flexibility.
thumbnailurl: /img/cms/wordpress-gatsby.jpeg
---

## Project Overview

**WordPress Gatsby** is a personal blog and portfolio template that seamlessly integrates WordPress as a headless CMS with Gatsby as a static site generator. It supports both fetching content from a remote WordPress site and using local configuration files, offering maximum flexibility and performance. The project works out-of-the-box with zero configuration, making it ideal for both beginners and advanced users.

## Key Features

- **Dual Content Modes:**
Fetch content from a remote WordPress site via REST API
Or use local fallback data/config files (`src/data/fallbackData.js`) for a fully static experience
- **Zero Configuration Required:**
All environment variables are optional; the site works immediately with local data
- **Giscus Comments Integration:**
Optional GitHub Discussions-based comments, auto-enabled if configured
- **Flexible Data Structure:**
Supports ACF custom fields, category description JSON, and more
- **Modern Portfolio Sections:**
Hero, About, Contact, Socials, Comments, Footer, Skills, Projects, and more
- **Easy Customization:**
Edit styles, layouts, and content structure with clear separation of concerns
- **Production Ready:**
One-click deploy to EdgeOne, Netlify, Vercel, or any static host

## Getting Started

### Prerequisites

- Node.js 16+
- npm or yarn

### Installation

1. **Clone the repository**
`git clone https://github.com/tomcomtang/wordpress-gatsby.git`
2. **Install dependencies**
`npm install`
3. **Start the development server**
`npm run develop`
The site will work immediately with local fallback data!
4. **(Optional) Configure WordPress**
- Create a `.env` file
- Add your `GATSBY_WORDPRESS_URL`
- Restart the development server
5. **(Optional) Configure Comments**
- Add Giscus environment variables to `.env`
- Comments menu will appear automatically

### Build for Production

```bash
npm run build
```

The built site will be in the `public/` directory, ready for deployment.

## Content Management

- **With WordPress:**
Update content through the WordPress admin panel
- **Without WordPress:**
Edit `src/data/fallbackData.js` for all content sections

## Customization

- **Styling:**
Modify `src/styles/` for global styles
Update component-specific CSS modules
- **Layout:**
Edit components in `src/components/`
Update page templates in `src/pages/`
Customize navigation in `src/components/header.js`

## Use Cases

- Personal blogs and portfolios
- Company or team websites
- Content-driven sites needing both static and dynamic content options
- Projects that want the WordPress editing experience with the performance of a static frontend

## Demo

[Live Demo](https://wordpress-gatsby-demo.example.com)

[GitHub Repo](https://github.com/tomcomtang/wordpress-gatsby)

## License

MIT License

## Acknowledgments

- Gatsby team for the static site generator
- WordPress for content management
- Giscus for GitHub Discussions integration
Binary file added src/site/img/cms/minimal-gallery.jpeg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/site/img/cms/minimalist-portfolio.jpeg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/site/img/cms/multiplepage-portfolio.jpeg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/site/img/cms/wordpress-gatsby.jpeg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.