Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/yasinatesim/yasinates.com

My personal website via Next.js + SSG 😎 πŸ’ͺ
https://github.com/yasinatesim/yasinates.com

commitlint css-module css-modules eslint eslint-config next next-js nextjs prettier prettier-eslint sass ssg static-site-generator

Last synced: 8 days ago
JSON representation

My personal website via Next.js + SSG 😎 πŸ’ͺ

Awesome Lists containing this project

README

        




yasinates.com


yasinates.com | Personal Website





This project is my personal website. My articles on medium.com and dev.to are here 😎


License


Β· View Website

## πŸ“– About

yasinates.com

This project is my personal website. My articles on Medium and dev.to are here 😎. My repositories on github are here too. πŸ˜‹

### πŸ’‘Idea
I wanted to **create a copy** of my Github repositories, Medium and dev.to articles and show them on my website.

I wanted to copy it, I wrote the data to static json files, using Next.js's [Static Site Generator](https://www.staticgen.com) feature, requesting the APIs of Github, Medium and dev.to. After publish a new github repository or article. I am making requests to APIs on my Admin panel, with my admin panel I only send requests to APIs when I share a github repository or an article, I don't always send request the APIs. So my website opens very fast. πŸ’ͺ

### πŸ“šTech Stack

Next.js

Requesting the APIs of Github, Medium and dev.to

Commitlint

Send commit messages to conventional commits rules

CSS Module

Class names and animation names are scoped locally CSS files

SASS

The most mature, stable, and powerful professional grade CSS extension language in the world

Editorconfig

Helps maintain consistent coding styles for my working on the same project across various editors and IDEs

Eslint

Find and fix problems in your JavaScript code

Prettier

An opinionated code formatter

## Getting Started

### πŸ“¦ Prerequisites

- Node (v12.0.0+)
- Npm (v6.00+)

### βš™οΈ How To Use

1. Clone this repository

```bash
git clone https://github.com/yasinatesim/yasinates.com.git
```

2. Add `.env` file on root
```bash
NEXT_PUBLIC_MEDIUM_URL = 'https://api.rss2json.com/v1/api.json?rss_url=https://medium.com/feed/@{{medium-username}}'
NEXT_PUBLIC_DEV_URL = 'https://dev.to/api/articles'
NEXT_PUBLIC_DEV_USERNAME = '?username={{dev-username}}'
NEXT_PUBLIC_GITHUB_URL = 'https://api.github.com/users/{{github-username}}/repos'
NEXT_PUBLIC_POSTS_API_URL = 'http://localhost:3000/api/posts'
NEXT_PUBLIC_REPOS_API_URL = 'http://localhost:3000/api/repos'
NEXT_PUBLIC_ADMIN_PASSWORD = '{{your-admin-password}}'
NEXT_PUBLIC_GH_USERNAME = '{{your-github-username}}'
NEXT_PUBLIC_GH_TOKEN = '{{your-github-access-token}}'
NEXT_PUBLIC_GH_REPOSITORY = 'https://api.github.com/repos/{{your-github-username}}/{{your-github-repository}}'
```

> You can create your `NEXT_PUBLIC_ADMIN_PASSWORD` with the `Encrypt` function,

**Usage the `Encrypt` function**

Go to the `pages/admin/index.js` file and write this in the render function
```js
{Encrypt('{{ your admin password }}')}
```
*Note: Don't forget to delete the encrypt function added 🀣*

3. Install the project dependencies
```bash
yarn install
```
**For Development**
```bash
yarn dev
```

**For Production Build & Build Start**
```bash
yarn build
```

and

```bash
yarn start
```

**For Export [SSG](https://www.staticgen.com/)**
```bash
yarn export
```

**For Lint & Format**
```bash
yarn lint
yarn format
```

## πŸ”‘ License
* Copyright Β© 2020 - MIT License.
See `LICENSE` for more information.