Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Vercel deployment #195

Merged
merged 4 commits into from
Apr 30, 2023
Merged

Vercel deployment #195

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
8eb977a
vercel
fabianocouto Apr 29, 2023
7570f08
deployment instructions in vercel
fabianocouto Apr 30, 2023
a84f678
add images for deployment in vercel
fabianocouto Apr 30, 2023
b65fecb
readme adjustments
fabianocouto Apr 30, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
103 changes: 82 additions & 21 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -126,29 +126,35 @@ E.g. `https://github-readme-activity-graph.cyclic.app/graph?username=<your_usern

However, if there are a large number of requests or if the heroku account being used for the project runs out of dyno hours your graph will not load.

### Step-by-step instructions for deploying to Heroku (from UI)
<details>
<summary><b>Step-by-step instructions for deploying to Heroku (from UI)</b></summary>

#### Follow the steps

1. Sign in to Heroku or create a new account at <https://heroku.com>
2. Click the Deploy button below

<p align="center">

<a href="https://heroku.com/deploy?template=https://github.com/Ashutosh00710/github-readme-activity-graph/main">
<img src="https://www.herokucdn.com/deploy/button.svg" title="Deploy to Heroku" alt="Deploy"/>
</a>
</p>


3. On the page that comes up, click "**Deploy App**" at the end of the form
4. Once the app is deployed, click "**Manage App**" to go to the dashboard
5. Visit the "**Settings**" tab and click "**Reveal Config Vars**"
6. Visit [this link](https://github.com/settings/tokens/new?description=GitHub%20Readme%20Activity%20Graph) to create a new Personal Access Token
7. Scroll to the bottom and click "**Generate token**"
8. Add the token as a Config Var with the key `TOKEN`

![TOKEN](./asset/token-config.png)

9. Scroll down to the Domains section to find the URL you will use in place of `activity-graph.herokuapp.com`

![TOKEN](./asset/token-config.png)
</details>

9. Scroll down to the Domains section to find the URL you will use in place of `activity-graph.herokuapp.com`
<details>
<summary><b>Step-by-step instructions for deploying to Heroku (from CLI)</b></summary>

### Step-by-step instructions for deploying to Heroku (from CLI)
#### Follow the steps

1. Make a [Heroku](https://signup.heroku.com/) account.
2. Install the Heroku CLI
Expand All @@ -169,28 +175,31 @@ Now just add the following to your profile readme and you're good to go.
![Github Activity Graph](<url from step 6>/graph?username=<username>)
```

</details>

## Deploy on your own Replit instance

### Step-by-step instructions for deploying to Replit (from UI)
<details>
<summary><b>Step-by-step instructions for deploying to Replit (from UI)</b></summary>

#### Follow the steps

1. Sign in to Replit or create a new account at https://replit.com
2. Click the Deploy button below

<p align="center">
<a href="https://repl.it/github/Ashutosh00710/github-readme-activity-graph">
<img alt="Run on Repl.it" src="https://repl.it/badge/github/Ashutosh00710/github-readme-activity-graph" style="height: 40px; width: 190px;" />
</a></p>


<a href="https://repl.it/github/Ashutosh00710/github-readme-activity-graph">
<img alt="Run on Repl.it" src="https://repl.it/badge/github/Ashutosh00710/github-readme-activity-graph" style="height: 40px; width: 190px;" />
</a>

3. On the page that comes up, choose language as `Node.js` and then click `Import from GitHub` Button

![Replit](./asset/replit1.png)



![Replit](./asset/replit1.png)

4. Visit [this link](https://github.com/settings/tokens/new?description=GitHub%20Readme%20Activity%20Graph) to create a new Personal Access Token
5. Scroll to the bottom and click "**Generate token**"
6. Wait clone done and add `Secrets` with your `Github token`

![Secrets](./asset/replit2.png)
![Secrets](./asset/replit2.png)

7. Click the green `RUN` button on top, the console will run and at last the url will shows on the right
8. Now just add the following to your profile readme and you're good to go
Expand All @@ -199,6 +208,58 @@ Now just add the following to your profile readme and you're good to go.
![Github Activity Graph](<url from step 5>/graph?username=<username>)
```

</details>

## Deploy on your own Vercel instance

<details>
<summary><b>Step-by-step instructions for deploying to Vercel (from UI)</b></summary>

#### First Method

1. Go to [vercel.com](https://vercel.com/).
2. Click on `Log in`.
![image](https://user-images.githubusercontent.com/3431285/235332307-a98adccf-ac8e-4c05-8fae-b14e7d0b81e8.png)
3. Sign in with GitHub by pressing `Continue with GitHub`.
![image](https://user-images.githubusercontent.com/3431285/235332299-70f52a0f-ffb9-4070-ae85-a4646a2bb1bf.png)
4. Sign in to GitHub and allow access to all repositories if prompted.
5. Fork this repo.
6. Go back to your [Vercel dashboard](https://vercel.com/dashboard).
7. To import a project, click the `Add New...` button and select the `Project` option.
![image](https://user-images.githubusercontent.com/3431285/235332320-d80e62c9-a7d9-45f3-8bef-b8950c4c9093.png)
8. Click the `Continue with GitHub` button, search for the required Git Repository and import it by clicking the `Import` button.
![image](https://user-images.githubusercontent.com/3431285/235332373-3f28309c-d70b-490e-aa40-4d55ad429d5a.png)
9. Create a personal access token (PAT) [here](https://github.com/settings/tokens/new) and enable the `repo` permissions (this allows access to see private repo stats).
![image](https://user-images.githubusercontent.com/3431285/235332420-df83a424-009b-4f69-bbb2-54e807bff701.png)
10. Add the PAT as an environment variable named `TOKEN`.
![image](https://user-images.githubusercontent.com/3431285/235332471-6915abf8-04fe-4f5e-b734-191388a77140.png)
11. Click deploy, and you're good to go. See your domains to use the API!

#### Second Method

Alternatively, click the button below and follow the instructions.

[![Deploy to Vercel](https://vercel.com/button)](https://vercel.com/import/project?template=https://github.com/Ashutosh00710/github-readme-activity-graph)

After the deployment is complete:

1. Click the `Continue to Dashboard` button
![image](https://user-images.githubusercontent.com/3431285/235332677-addafd5f-dce8-4823-9927-05657eec2084.png)
2. In the `Settings` tab, click on `Environment Variables` and follow steps `9.` and `10.` of `First Method`.
![image](https://user-images.githubusercontent.com/3431285/235332731-03207969-b16e-42e4-858a-67b05af7bcc8.png)
3. Go to `Deployments` tab and redeploy the project.
![image](https://user-images.githubusercontent.com/3431285/235332761-1d3ae9c5-0138-447f-a41a-601c73ef3104.png)

#### Finally

Now just add the following to your profile readme and you're good to go.

```md
![Github Activity Graph](<{your_own_domain_name}.vercel.app>/graph?username=<username>)
```

</details>

## Contributing

Please read through our [contributing guidelines](https://github.com/Ashutosh00710/github-readme-activity-graph/blob/main/CONTRIBUTING.md). Directions are included for opening issues, coding standards, and notes on development.
Expand Down
15 changes: 15 additions & 0 deletions vercel.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
{
"version": 2,
"builds": [
{
"src": "src/main.ts",
"use": "@now/node"
}
],
"routes": [
{
"src": "/(.*)",
"dest": "src/main.ts"
}
]
}