Showlit – A Modern and Clean Personal Website Template

Build your personal website effortlessly with ✨Showlit!
This fully customizable React-based template is perfect for showcasing your portfolio with ease.

🌐 Live Demo · 🐞 Report Bug · 📄 Update Log

✨Showlit is a React-based personal website template designed for quick setup and easy customization. It offers modern UI components, useful built-in features, and flexible customization options. Showlit strikes a balance between simplicity and flexibility, letting you get started quickly while still tailoring your site to your style.

Why Showlit?

• ⚡ Quick Setup – Get your site running in minutes.
• 🎨 Customizable – Easily adjust the design (basic react skills required).
• 🔧 Built-in Features – Includes a blog, automatic project fetching, and more.
• 👥 Beginner-Friendly – No advanced coding needed to get started.

Found this project useful? Give it a ⭐ to support the project!

This project is primarily built using the following frameworks and libraries:

⬆️ Back to top

See how ✨Showlit looks in both light and dark themes:

⬆️ Back to top

There are two ways to use this template:

1. 🚀 Quick Setup - no local development required
2. 🧑‍💻 Local Development & Manual Deployment

This option does not require local development. Simply update the configuration files → commit → push. GitHub Actions will handle the build and deployment automatically.

Below is a simplified guide. For detailed instructions with screenshots, see the Quick Setup guide.

1️⃣ Create Your Repository

Click "Use this template" → "Create a new repository".

On the Create a new repository page:

• Enable "Include all branches"
• Enter a repository name
• Set the visibility to Public (default is Public already)
• Click "Create repository"

2️⃣ Enable GitHub Pages

Go to your Repository Settings → Pages, then configure:

• Branch: gh-pages
• Folder: /(root)

Click Save.

3️⃣ Update Configuration Files

• site.yaml — website title, metadata, etc.
• profile.yaml — your name, email, profile image, etc.
• sidebar.yaml — sidebar layout
• giscus.yaml — Giscus (article comments) configuration
• publications.yaml — (optional) research publications list

4️⃣ Commit and Push Changes

Once your changes are pushed (or merged) to main branch, GitHub Actions will automatically:

• Build the project
• Deploy to GitHub Pages
• Publish your website 🎉

After a few minutes, your website will be available at:

https://<your-github-username>.github.io/<your-repo-name>

⬆️ Back to top

You can personalize the website by updating the configuration files located in the config folder. Any changes will be automatically applied when the site is built or deployed.

For example, in config/profile.yaml, you can update the information with your owns:

profile:
  name: "Pin-Yen Huang"
  headline: "Student @ National Taiwan University"
  email: "pyhuang97@gmail.com"
  profileImage: "https://github.com/pm25.png"
  # ...other fields

Other configurable files include:

• Website Information: config/site.yaml
• Profile Information: config/profile.yaml
• Sidebar Layout: config/sidebar.yaml
• Giscus Comments: config/giscus.yaml
• Publications: config/publications.yaml

To add a article, create a folder and Markdown file inside public/articles following this structure:

# 💡 the folder name and Markdown filename must be the same
/public/articles/{slug}/{slug}.md

You can use public/articles/template/template.md as a reference.

When the site is built or deployed, any properly structured articles will be automatically included and indexed.

⬆️ Back to top

Distributed under the MIT License. See LICENSE for more information.

⬆️ Back to top

Pin-Yen Huang - pyhuang97@gmail.com

⬆️ Back to top

I am deeply grateful for the following tools and resources that contributed to the development of this project:

• giscus
• React Icons
• Best README Template

⬆️ Back to top