Take Your Github Repository To The Next Level 🚀️
Tags: beginners, github, git, career
Published: 2022-04-03 08:47:00

I’ve been using Github for a very long time now, and along the way I’ve been gathering a step-by-step guide on creating the perfect Github repository. If you haven’t guessed already, this article is an enhanced version of that guide.

So without further ado, let’s get started!

## Step 0. Make Your Project More Discoverable :rocket:

![Topics](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/91ujsm9440f9o1muhjh7.png) 

— Inspired from [Github Docs](https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/classifying-your-repository-with-topics).

To help other people find and contribute to your project, you can add topics to your repository related to your project's intended purpose, subject area, affinity groups, or other important qualities.

With topics, you can explore repositories in a particular subject area, find projects to contribute to, and discover new solutions to a specific problem.

To browse the most used topics, go to https://github.com/topics/.

### Examples

> :point_down: **Share with us your Github repository in the comments and I’ll add it here!**

| Repository                                                   | Topics                                                       |
| ------------------------------------------------------------ | ------------------------------------------------------------ |
| [chroline/well_app](https://github.com/chroline/well_app#readme) | [macos](https://github.com/topics/macos) [productivity](https://github.com/topics/productivity) [ios](https://github.com/topics/ios) [mobile](https://github.com/topics/mobile) [webapp](https://github.com/topics/webapp) [flutter](https://github.com/topics/flutter) [happiness](https://github.com/topics/happiness) [mental-health](https://github.com/topics/mental-health) [wellbeing](https://github.com/topics/wellbeing) |
| [aimeos/aimeos-typo3](https://github.com/aimeos/aimeos-typo3#readme) | [php](https://github.com/topics/php) [ecommerce](https://github.com/topics/ecommerce) [marketplace](https://github.com/topics/marketplace) [vuejs](https://github.com/topics/vuejs) [performance](https://github.com/topics/performance) [vue](https://github.com/topics/vue) [shop](https://github.com/topics/shop) [json-api](https://github.com/topics/json-api) [seo](https://github.com/topics/seo) [typo3](https://github.com/topics/typo3) [ecommerce-platform](https://github.com/topics/ecommerce-platform) [e-commerce](https://github.com/topics/e-commerce) [b2b](https://github.com/topics/b2b) [typo3-extension](https://github.com/topics/typo3-extension) [aimeos](https://github.com/topics/aimeos) |

## Step 1. Choose A Name That Sticks :pencil2:

![Naming](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6h7r9bastgpe4o99b7lj.png) 

— Inspired from [Forbes](https://www.forbes.com/sites/allbusiness/2016/10/23/12-tips-for-naming-your-startup-business/).

Finding the right name for your project can have a significant impact on your success.

The wrong name can do worse than fail to connect with users. In contrast, a clear, powerful name can be extremely helpful in your marketing and branding efforts.

Here are 12 helpful suggestions on how to come up with a winning name for your project:

1. **Avoid hard-to-spell names.**

2. **Conduct a thorough Internet search.**

3. **Get the .dev or .io domain name.**

4. **Use a name that conveys some meaning.**

5. **Get feedback on the name.**

6. **Make sure the name sounds good when said aloud.**

7. **Use resources available for brainstorming names:** 

- [VisualThesaurus.com](http://www.visualthesaurus.com/)
- [Shopify Business Name Generator](https://www.shopify.com/tools/business-name-generator)
- [Business Name Generator](https://businessnamegenerator.com/)

### Examples

> :point_down: **Share with us your Github repository in the comments and I’ll add it here!**

| Repository                                                   | Name       | Description                                                  |
| ------------------------------------------------------------ | ---------- | ------------------------------------------------------------ |
| [chroline/well_app](https://github.com/chroline/well_app#readme) | Well App   | :grinning: improve your productivity and long-term happiness in just 21 days. |
| [ai/size-limit](https://github.com/ai/size-limit#readme)     | Size Limit | Calculate the real cost to run your JS app or lib to keep good performance. Show error in pull request if the cost exceeds the limit. |

## Step 2. Display A Beatufiul Cover Image 🤩️

![Cover](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6i0zgv6zcb1zcwnqfvze.png) 

There’s no doubt that projects with eye-catching images *usually* perform better than those without these elements. 

Users are more likely to support a project that has an attention-grabbing cover image, because it creates a sense of professionalism and creativity.

But you don’t have to be a designer to create amazing visuals for your project, because there’s a dizzying amount of free graphic design tools on the Internet:

- [Figma](https://www.figma.com/graphic-design-tool/)
- [VistaCreate](https://create.vista.com/)
- [Desygner](https://desygner.com/)
- [Canva](https://www.canva.com/)

### Examples

> :point_down: **Share with us your Github repository in the comments and I’ll add it here!**

| Repository                                                   | Cover Image                              |
| ------------------------------------------------------------ | ---------------------------------------- |
| [chroline/well_app](https://github.com/chroline/well_app#readme) | ![Well App](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r820tccathdx1egueao0.png)
  |



## Step 3. Add Badges To Convey More Information :fire:

![Badges](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1p7mjlqi8t7w663gvvqm.png)
 

Ever noticed those small images sitting at the top of the most performing Github projects? They’re called badges, and they can be used to show more information without using any words.

Here are some examples:

| Badge                                                        | URL                                                          |
| ------------------------------------------------------------ | ------------------------------------------------------------ |
| ![img](https://res.cloudinary.com/practicaldev/image/fetch/s--MM4i-rBi--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://img.shields.io/badge/Medium-12100E%3Fstyle%3Dfor-the-badge%26logo%3Dmedium%26logoColor%3Dwhite) | `https://img.shields.io/badge/Medium-12100E?style=for-the-badge&logo=medium&logoColor=white` |
| ![img](https://res.cloudinary.com/practicaldev/image/fetch/s--OIWqZCq2--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://img.shields.io/badge/Hashnode-2962FF%3Fstyle%3Dfor-the-badge%26logo%3Dhashnode%26logoColor%3Dwhite) | `https://img.shields.io/badge/Hashnode-2962FF?style=for-the-badge&logo=hashnode&logoColor=white` |
| ![img](https://res.cloudinary.com/practicaldev/image/fetch/s--6XzdLtQp--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://img.shields.io/badge/dev.to-0A0A0A%3Fstyle%3Dfor-the-badge%26logo%3Ddev.to%26logoColor%3Dwhite) | `https://img.shields.io/badge/dev.to-0A0A0A?style=for-the-badge&logo=dev.to&logoColor=white` |
| ![img](https://res.cloudinary.com/practicaldev/image/fetch/s--cumRvkw3--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://img.shields.io/badge/YouTube-FF0000%3Fstyle%3Dfor-the-badge%26logo%3Dyoutube%26logoColor%3Dwhite) | `https://img.shields.io/badge/YouTube-FF0000?style=for-the-badge&logo=youtube&logoColor=white` |
| ![img](https://res.cloudinary.com/practicaldev/image/fetch/s--fiphz-VI--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://img.shields.io/badge/HTML-239120%3Fstyle%3Dfor-the-badge%26logo%3Dhtml5%26logoColor%3Dwhite) | `https://img.shields.io/badge/HTML-239120?style=for-the-badge&logo=html5&logoColor=white` |
| ![img](https://res.cloudinary.com/practicaldev/image/fetch/s--Igsbu2pR--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://img.shields.io/badge/Dart-0175C2%3Fstyle%3Dfor-the-badge%26logo%3Ddart%26logoColor%3Dwhite) | `https://img.shields.io/badge/Dart-0175C2?style=for-the-badge&logo=dart&logoColor=white` |

You can find all of these and more in the [Shilds.io](https://shields.io/) website. You can also use [Badgen](https://badgen.net/) to quickly generate new badges for your project!

### Examples

> :point_down: **Share with us your Github repository in the comments and I’ll add it here!**

| Repository                                                   | Badges                                                       |
| ------------------------------------------------------------ | ------------------------------------------------------------ |
| [ajeetdsouza/zoxide](https://github.com/ajeetdsouza/zoxide#readme) | [![crates.io](https://camo.githubusercontent.com/7c780b26b5701f751a182ec85171f415b852cc2b88d44507c6f61ae02666a0b8/68747470733a2f2f696d672e736869656c64732e696f2f6372617465732f762f7a6f786964653f7374796c653d666c61742d737175617265)](https://crates.io/crates/zoxide) [![Downloads](https://camo.githubusercontent.com/2ade2a184e52e29abb1be327ba1f540440c30d2ccb579385e15fc3e2fc281b4f/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f646f776e6c6f6164732f616a65657464736f757a612f7a6f786964652f746f74616c3f7374796c653d666c61742d737175617265)](https://github.com/ajeetdsouza/zoxide/releases) [![Built with Nix](https://camo.githubusercontent.com/c5efac6f8410b173c80aed773e9a2a32341da3241b44a0b15ac5f2ca09089060/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f6275696c74776974682d6e69782d3764383166373f7374796c653d666c61742d737175617265)](https://builtwithnix.org/) |
| [alichtman/shallow-backup](https://github.com/alichtman/shallow-backup#readme) | [![Downloads](https://camo.githubusercontent.com/819c7cb273ad59b696992640fb2f801f062861a0263fcf1196ce4ca96294fd74/687474703a2f2f706570792e746563682f62616467652f7368616c6c6f772d6261636b7570)](http://pepy.tech/count/shallow-backup) [![Build Status](https://camo.githubusercontent.com/5550d5b7bf001c5e227f1b2f27eaa4d188b545155e16719d7fc87c9942d226e6/68747470733a2f2f7472617669732d63692e636f6d2f616c696368746d616e2f7368616c6c6f772d6261636b75702e7376673f6272616e63683d6d6173746572)](https://travis-ci.com/alichtman/shallow-backup) |



## Step 4. Write A Convincing Description :page_facing_up:

![Description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3z9b7p0cpsdtg8ukwcps.png)
 

— Inspired from [18F](https://github.com/18F/open-source-guide/blob/18f-pages/pages/making-readmes-readable.md).

This is your chance to explain the project in one paragraph. If you do this well, you can captivate the reader into exploring more of your project and eventually using it!

In general, the description should answer a short list of basic questions:

- **What is this repo or project?**
- **How does it work?**
- **Who will use this repo or project?**
- **What is the goal of this project?**

If you follow these steps, not only will it be easier for developers to know how to become involved with the project, but it will be easy for non-coders to understand what the code is designed to do, and how they too can become involved!

### Examples

> :point_down: **Share with us your Github repository in the comments and I’ll add it here!**

| Repository                                                   | Description                                                  |
| ------------------------------------------------------------ | ------------------------------------------------------------ |
| [ai/size-limit](https://github.com/ai/size-limit#readme)     | Size Limit is a performance budget tool for JavaScript. It checks every commit on CI, calculates the real cost of your JS for end-users and throws an error if the cost exceeds the limit. |
| [aimeos/aimeos-typo3](https://github.com/aimeos/aimeos-typo3#readme) | Aimeos is THE professional, full-featured and high performance e-commerce extension for TYPO3! You can install it in your existing TYPO3 web site within 5 minutes and can adapt, extend, overwrite and customize anything to your needs. |


## Step 5. Record Visuals To Attract Users :eyes:

![Visuals](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/68fcnuwanal54640u254.png)
 

People love animated imagery! You can use GIFs to visually show many things:

- How your program is used.
- The best features of your program.
- A visual guide to achieve some specific task.

And there’s a wide variety of free tools that you can use to create said videos, including but not limited to:

- [Ascii Cinema](https://asciinema.org/) to record your terminal sessions.
- [Loom](https://www.loom.com/) or [OBS](https://obsproject.com/) to record any part of your screen.
- [Veed](https://www.veed.io) to edit videos online.

### Examples

> :point_down: **Share with us your Github repository in the comments and I’ll add it here!**

| Repository                                                   | Visuals                                        |
| ------------------------------------------------------------ | ---------------------------------------------- |
| [create-go-app/cli](https://github.com/create-go-app/cli#readme) | ![Create Go App Visuals](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n2e10fm43gfptzwzdsei.gif)
  |
| [Rebilly/redoc](https://github.com/Redocly/redoc#readme)     | ![Redoc Visuals](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gxmq3mucutndehqvted4.gif)                 |



## Step 6. Create A Detailed Installation Guide :white_check_mark: *(optional)*

![Installation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/35vo9t0amck2rlcvevfz.gif) 

If the user has to install your program before using it, you should add a detailed section that explains how the user can do it. Here are some general rules to follow:

- Don’t jump any steps.
- Have different sections for each operation system (Linux, macOS, Windows).
- Show how the user can fix the most common errors.

I also recommend using the HTML [`<details>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details) tag to create a collapsing menu. It results in a much cleaner README file! 

### Examples

> :point_down: **Share with us your Github repository in the comments and I’ll add it here!**

| Repository                                                   | Installation Guide                                           |
| ------------------------------------------------------------ | ------------------------------------------------------------ |
| [easybase/easybase-react](https://github.com/easybase/easybase-react#readme) | [Getting Started](https://github.com/easybase/easybase-react#getting-started) |
| [emalderson/thephish](https://github.com/emalderson/ThePhish#readme) | [Installation](https://github.com/emalderson/ThePhish#installation) |



## Step 7. Create A Practical Usage Guide :checkered_flag:

![Usage](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9bw5l57arnltotgz35jb.gif) 

You should show the user examples of how they can use your software, and the expected outputs too if you can. This will help prevent confusion about how your program works, and create a better bond between your software and its users.

### Examples

> :point_down: **Share with us your Github repository in the comments and I’ll add it here!**

| Repository                                                   | Usage Guide                                                  |
| ------------------------------------------------------------ | ------------------------------------------------------------ |
| [create-go-app/cli](https://github.com/create-go-app/cli#readme) | [Production-ready project templates](https://github.com/create-go-app/cli#-production-ready-project-templates) |
| [iharsh234/WebApp](https://github.com/iharsh234/WebApp#readme) | [Usage](https://github.com/iharsh234/WebApp#usage)           |



## Step 8. Answer Common Questions :thinking:

![FAQ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s629xzf71blat9ososo1.png)
 

This section, also called the **“FAQ”** (frequently asked questions), should be left to contain the most common questions that your users ask. Too many people asking where to find the settings panel? Put the answer in here so no one has to ask again.

### Examples

> :point_down: **Share with us your Github repository in the comments and I’ll add it here!**

| Repository                                           | FAQ                                                          |
| ---------------------------------------------------- | ------------------------------------------------------------ |
| [choojs/choo](https://github.com/choojs/choo#readme) | Why is it called Choo?<br />Is it called Choo, Choo.js or...?<br />Does Choo use a virtual-dom? |



## Step 9. Build A Supportive Community :hugs:

![Community](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/chv9cf5ku0cp6olbgrk8.png)
 

There’s nothing better than a nice community! If the user ever needs help, they can reach out, ask a question, and get a valuable answer to their problem!

Here are 3 general steps towards building a great community for your project:

### Step 9.1 - Let’s Connect!

Add a “Let’s Connect!” section to your README, where you reveal several links to the platforms where your community resides: [Discord](https://discord.com/), [Gitter](https://gitter.im/), [Slack](https://slack.com/), or even simply an email address!

### Step 9.2 - Discussions *(optional)*

You can use GitHub Discussions in a repository as a place for your community to have conversations, ask questions, and post answers without scoping work in an issue.

[Here’s a guide on how to enable discussions for your repository.](https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/enabling-features-for-your-repository/enabling-or-disabling-github-discussions-for-a-repository)

### Step 9.3 - Code of Conduct

— Taken from [Github Docs](https://docs.github.com/en/communities/setting-up-your-project-for-healthy-contributions/adding-a-code-of-conduct-to-your-project).

Adopt a code of conduct to define community standards, signal a welcoming and inclusive project, and outline procedures for handling abuse.

A *code of conduct* defines standards for how to engage in a community. It signals an inclusive environment that respects all contributions.

You should have a `CODE_OF_CONDUCT.md` file in your repo that explains all the details that need to be known.

[Here’s a guide on how to create a code of conduct for your community.](https://docs.github.com/en/communities/setting-up-your-project-for-healthy-contributions/adding-a-code-of-conduct-to-your-project)

[And here’s a template of a `CODE_OF_CONDUCT.md` file that you can freely use in your own work.](https://github.com/probot/template/blob/master/CODE_OF_CONDUCT.md)

### Examples

> :point_down: **Share with us your Github repository in the comments and I’ll add it here!**

| Repository                                                   | License                                                      |
| ------------------------------------------------------------ | ------------------------------------------------------------ |
| [microsoft/TypeScript](https://github.com/microsoft/TypeScript/) | [`CODE_OF_CONDUCT.md`](https://github.com/microsoft/TypeScript/blob/main/CODE_OF_CONDUCT.md) |
| [vercel/next.js](https://github.com/vercel/next.js)          | [`CODE_OF_CONDUCT.md`](https://github.com/vercel/next.js/blob/canary/CODE_OF_CONDUCT.md) |



## Step 10. Create Contribution Guidelines :construction_worker:

![Contributions](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/34d9k1gpoxyttecdfpi4.png)
 

— Inspired from [18F](https://github.com/18F/open-source-guide/blob/18f-pages/pages/making-readmes-readable.md).

Since open-source inherently welcomes outside contributors, it’s important to explicitly state how they can help and what they can help with. This document should answer the following question: **How can outside contributors become involved?** 

You should include a `CONTRIBUTING.md` file in your repo, which outlines the following:

- If there are any additional setup steps specific for development.
- Whether there are explicit Instructions for running tests before contributions are accepted.
- Whether potential contributors should ask before they make significant changes.

 [Here’s a template of a `CONTRIBUTIONS.md` file.](https://github.com/probot/template/blob/master/CODE_OF_CONDUCT.md)

### Examples

> :point_down: **Share with us your Github repository in the comments and I’ll add it here!**

| Repository                                                   | License                                                      |
| ------------------------------------------------------------ | ------------------------------------------------------------ |
| [microsoft/TypeScript](https://github.com/microsoft/TypeScript/) | [`CONTRIBUTING.md`](https://github.com/microsoft/TypeScript/blob/main/CONTRIBUTING.md) |
| [vercel/next.js](https://github.com/vercel/next.js)          | [`contributing.md`](https://github.com/vercel/next.js/blob/canary/contributing.md) |



## Step 11. Choose The Right License :copyright:

![License](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iedo6dsh43kkjuepgk3j.png)
 

— Inspired from [Github Docs](https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/licensing-a-repository).

Public repositories on GitHub are often used to share open source software. For your repository to truly be open source, you'll need to license it so that others are free to use, change, and distribute the software.

There’s a [choosealicense.com](https://choosealicense.com/) tool online that can freely help you choose a license for your project. You should include a `LICENSE` file (file extension is optional) that includes the legal excerpt that’s accompagnied by your chosen license.

But remember that you're under no obligation to choose a license. However, without a license, the default copyright laws apply, meaning that you retain all rights to your source code and no one may reproduce, distribute, or create derivative works from your work.

### Examples

> :point_down: **Share with us your Github repository in the comments and I’ll add it here!**

| Repository                                                   | License                                                      |
| ------------------------------------------------------------ | ------------------------------------------------------------ |
| [microsoft/TypeScript](https://github.com/microsoft/TypeScript/) | [Apache License](https://github.com/microsoft/TypeScript/blob/main/LICENSE.txt) |
| [vercel/next.js](https://github.com/vercel/next.js)          | [MIT License](https://github.com/vercel/next.js/blob/canary/license.md) |



## Step 12. Plan Your Future Roadmap :car:

![Roadmap](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hpp6bw352ch7flwqngs9.png)
 

You should [add a page to your project’s wikis](https://docs.github.com/en/communities/documenting-your-project-with-wikis/adding-or-editing-wiki-pages) that describes your plans for the future. This is your chance to specify your upcoming plans, and to show that your project has a long-term future. Be ambitious within the bounds of realism.

What features are you going to add in the next version? When do you plan to release those features that users can’t wait for? Answer all these questions in the roadmap.

### Examples

> :point_down: **Share with us your Github repository in the comments and I’ll add it here!**

| Repository                                                   | Roadmap                                              |
| ------------------------------------------------------------ | ---------------------------------------------------- |
| [microsoft/TypeScript](https://github.com/microsoft/TypeScript/) | https://github.com/microsoft/TypeScript/wiki/Roadmap |



## Step 13. Create Github Releases :pushpin:

![Releases](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h12zl3gukdk2ewtlxrmh.png)
 

Github has a [releases feature](https://docs.github.com/en/repositories/releasing-projects-on-github/about-releases) that lets you show a history of your project’s versions. In every release, you should [write a changelog](https://keepachangelog.com/en/1.0.0/) that describes what’s new and what was removed from that version.

> ###  How do I make a good changelog?
>
> #### Guiding Principles
>
> - Changelogs are *for humans*, not machines.
> - There should be an entry for every single version.
> - The same types of changes should be grouped.
> - Versions and sections should be linkable.
> - The latest version comes first.
> - The release date of each version is displayed.
> - Mention whether you follow [Semantic Versioning](https://semver.org/).
>
> #### Types of changes
>
> - `Added` for new features.
>
> - `Changed` for changes in existing functionality.
>
> - `Deprecated` for soon-to-be removed features.
>
> - `Removed` for now removed features.
>
> - `Fixed` for any bug fixes.
>
> - `Security` in case of vulnerabilities.
>
>   — [keepachangelog.com](https://keepachangelog.com/en/1.0.0/)

### Examples

> :point_down: **Share with us your Github repository in the comments and I’ll add it here!**

| Repository                                                   | Releases                                                     |
| ------------------------------------------------------------ | ------------------------------------------------------------ |
| [release-it/release-it](https://github.com/release-it/release-it#readme) | https://github.com/release-it/release-it/releases/tag/14.14.0 |
| [ryanoasis/nerd-fonts](https://github.com/ryanoasis/nerd-fonts#readme) | https://github.com/ryanoasis/nerd-fonts/releases/tag/v2.1.0  |



## Step 14. Customize Your Social Media Preview 🤩️

![Social Preview](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fmk42igm2mofbb2vkxkp.png)
 

— Inspired from [CSS Docs](https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/customizing-your-repositorys-social-media-preview).

You can customize the image displayed on social media platforms when someone links to your repository.

Until you add an image, repository links expand to show basic information about the repository and the owner's avatar, but [you can customize it](https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/customizing-your-repositorys-social-media-preview) to look more attractive!

### Examples

> :point_down: **Share with us your Github repository in the comments and I’ll add it here!**

| Repository                                                | Social Preview                                               |
| --------------------------------------------------------- | ------------------------------------------------------------ |
| [saikou-app/saikou](https://github.com/saikou-app/saikou) | ![Saikou](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aq4n5jga7vgv71rooxi1.png)
                |
| [vercel/next.js](https://github.com/vercel/next.js)       | ![Next.js the react framework for production](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iwf0kzpduezr0uwr6rpi.png)
  |



## Step 15. Launch A Website :rocket:

![Pages](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/haarun5emxaavzv3hjd6.png)
 

After doing all of the above tasks, there’s really only one step left that can *really* take your repository to the next level: **launching a website!**

You can use [Github Pages](https://pages.github.com/) to freely host a website straight from your repository. Creating a custom webpage for your project allows you to be more creative, and dramatically increases your chances to be discovered by search engines.

Don’t miss your chance to get that extra traffic!

### Examples

> :point_down: **Share with us your Github repository in the comments and I’ll add it here!**

| Repository                                                   | Website                             |
| ------------------------------------------------------------ | ----------------------------------- |
| [iharsh234/WebApp](https://github.com/iharsh234/WebApp#readme) | https://iharsh234.github.io/WebApp/ |
| [gitpoint/git-point](https://github.com/gitpoint/git-point#readme) | https://gitpoint.co/                |



___

**Credits: ❤️**

- Thanks to [Benny Neugebauer](https://dev.to/bennycode) for suggesting sections 12 and 13.
- Thanks to [Paul McGann](https://dev.to/paulmcgann) for suggesting OBS in step 5.

Those were 15 steps towards creating a killer Github repository. They’re not rocket science, but they can have a great effect on the success of your project!


{% user eludadev %}

{% twitter https://twitter.com/eludadev/status/1526989502199234567?s=20&t=WffWc4GscHmkIXu1n0BcXw %}