Effortlessly build your personal website with SimplePlain! This React-based template is fully customizable and ideal for showcasing your portfolio — whether you're a researcher, engineer, or student.
🌐 Live Demo
·
🐞 Report Bug
·
💡 Request Feature
🚧 This project is still under construction! 🚧
Table of Contents
🥪 SimplePlain is a React-based website template that makes building a personal website easy. It offers modern UI components, useful built-in features, and flexible customization options. SimplePlain strikes a balance between simplicity and flexibility, letting you get started quickly while still tailoring your site to your style.
Why SimplePlain?
- ⚡ Quick Setup – Get your site running in minutes.
- 🎨 Customizable – Easily adjust the design (basic coding skills required).
- 🔧 Built-in Features – Includes a blog, automatic project fetching, and more.
- 👥 Beginner-Friendly – No advanced coding needed to get started.
✨ Found this useful? Give it a ⭐ to support the project!
This project is primarily built using the following frameworks and libraries:
See how 🥪 SimplePlain looks in both light and dark themes:
Follow these steps to set up and run the project locally, and deploy it to GitHub Pages.
Make sure you have Node.js and npm installed. You can update npm to the latest version using:
npm install npm@latest -g- Clone the repository
git clone https://github.com/pm25/simpleplain.git
cd simpleplain- Install dependencies
npm install- Start the development server
npm run devThis will start the Vite development server. Open http://localhost:5173 to view it in the browser.
To publish the site to GitHub Pages:
npm run deploy- If you’re forking or cloning this repo as a template, it’s recommended to update the git remote:
git remote set-url origin https://github.com/<your-username>/<your-repo>.git
git remote -v # Confirm the changesTo customize the website with your own information, update the data files located in src/data. The website will automatically reflect your changes.
For example, in src/data/profile.ts, you can update the personal information with your owns:
export const UserInfo = {
name: "Pin-Yen Huang",
profile_url: "https://avatars.githubusercontent.com/u/33774054?v=4",
headline: "CLLab • National Taiwan University",
// ...other fields
};You can also customize the following files:
- src/data/profile.ts
- src/data/education.ts
- src/data/work.ts
- src/data/publications.ts
- src/data/talks.ts
To add articles, simply place your markdown files inside the src/data/articles folder. The site will automatically include them whenever you deploy.
Distributed under the MIT License. See LICENSE for more information.
Pin-Yen Huang - pyhuang97@gmail.com
I am deeply grateful for the following tools and resources that contributed to the development of this project: