GitHub Portfolio lets you create your own portfolio + blogging website in 1 minute. GitHub Portfolio uses your GitHub repos to create a personalized website for you. Here's a live demo.
GitHub Portfolio uses the following to generate your portfolio website:
-
Your GitHub profile
README.md -
A repo with a folder named
postsin the main directory, which will be used to store your blog posts -
It uses Vercel to deploy a client app that will fetch the information from your GitHub account.
So everything on your portfolio comes directly from your GitHub account activity. The more you use GitHub, the richer your portfolio becomes!
GitHub Portfolio provides a simple way to create a portfolio that showcases your work on GitHub. Here are some of the benefits:
-
Easy setup - It takes less than 60 seconds to create your portfolio
-
Always in sync - Your portfolio updates automatically as your GitHub profile updates. No need to rebuild every time
-
Hackable - It's completely open source and can be easily customized or extended
-
Free hosting - Your site gets deployed on Vercel and you get a free domain. No server maintenance needed!
-
Write blog posts - Write blog posts in an instant, by making a new markdown file inside a repo
-
Automatic SEO - Your site is optimized for search engines
-
Social links - Add links to your social profiles
-
Automatic Site Map - Your site map is automatically generated and updated
-
RSS Feed Support - Your RSS files are automatically generated and updated
In short, GitHub Portfolio lets you focus on your projects while it handles the portfolio generation and hosting. The perfect solution for developers and makers!
-
Create a new GitHub token. The token only needs access to your public repositories. You can create one here: https://github.com/settings/tokens
-
Create a public repo with whatever name you want. This will be used to store your blog posts. Inside the repo, create a folder named
posts. This is where your blog posts will be stored. -
You will need your github token, username and the name of the repo you just created. Click the following button to deploy to Vercel, it will ask for these three things.
That's it! Your site will be deployed and you will be able to see it. You can continue to customize it by adding the following environment variables in Vercel.
| Environment Variable | Description |
|---|---|
| GITHUB_TOKEN | The GitHub token to use for fetching repos |
| NEXT_PUBLIC_GITHUB_USERNAME | Your GitHub username |
| NEXT_PUBLIC_GITHUB_POSTS_REPO | The name of the repo to use for blog posts |
| SITE_URL | The URL of your site. You will need this for SEO and RSS. |
| Environment Variable | Description |
|---|---|
| GITHUB_EXCLUDE_LIST | A comma-separated list of repos to exclude from your projects list. |
| NEXT_PUBLIC_SITE_TITLE | The title of your site (Tab title) |
| NEXT_PUBLIC_SITE_DESCRIPTION | The description of your site |
| NEXT_PUBLIC_FOOTER | The footer to use at the bottom of the site |
| Environment Variable | Description |
|---|---|
| NEXT_PUBLIC_EMAIL | Your email address |
| NEXT_PUBLIC_GITHUB_PROFILE | Your GitHub profile URL |
| NEXT_PUBLIC_LINKEDIN_PROFILE | Your LinkedIn profile URL |
| NEXT_PUBLIC_THREADS_PROFILE | Your Threads profile URL |
| NEXT_PUBLIC_X_PROFILE | Your X profile URL |
| Environment Variable | Description |
|---|---|
| RSS_FEED_TITLE | The title for your feed |
| RSS_FEED_DESCRIPTION | The description for it |
| AUTHOR_NAME | Your name |
| AUTHOR_EMAIL | Your email address, if you want to include it in the feed |
To publish a blog post all you need to do is add a markdown file to the posts folder in your blog posts repo.
We use a simple name format for the markdown files. The format is YYYY-MM-DD-post-title.md.
This date will be used as the publish date of the post in your site. The file name will also be used as the URL slug for the post. For example, if you create a file named 2023-10-19 hello world.md, the URL for the post will be https://your-site.com/posts/2023-10-19%20hello%20world.
Once you create the file, it will be automatically added to your site. You can edit the file and commit it to update the post.
You can contribute to this project by creating a pull request. If you have any questions, feel free to open an issue or reach out to me on via email or social.
GitHub Portfolio is licensed under the MIT License. See the LICENSE file for more information.