Build your personal website effortlessly with SimplePlain! This template is designed for easy customization and is perfect 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
Having a personal website is essential in today's world—it’s a great way to showcase your portfolio, share your experiences, and highlight your projects so others can get to know you better. However, building a personal website from scratch can be time-consuming, especially for those without web development experience.
🥪 SimplePlain was originally created for my own personal website, but I realized it’s also useful for quick personal website setup. That’s why I’m sharing it, hoping it can benefit others. It’s designed to be easy to set up while maintaining flexibility for customization. Whether you're just getting started or looking for a solid foundation to build upon, SimplePlain is a great choice. It’s user-friendly for both experienced web developers and beginners alike.
If you find this template helpful, feel free to leave 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: