https://github.com/defite/defite-ghost-next

My personal page built on Next.js and Ghost.js
https://github.com/defite/defite-ghost-next

blogging ghost nextjs windi-css

Last synced: about 2 months ago
JSON representation

My personal page built on Next.js and Ghost.js

• Host: GitHub
• URL: https://github.com/defite/defite-ghost-next
• Owner: Defite
• Created: 2021-08-07T06:25:00.000Z (over 3 years ago)
• Default Branch: master
• Last Pushed: 2024-05-02T00:31:20.000Z (9 months ago)
• Last Synced: 2024-05-02T16:54:10.746Z (9 months ago)
• Topics: blogging, ghost, nextjs, windi-css
• Language: TypeScript
• Homepage: https://defite.ru
• Size: 6.5 MB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 3
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        


This is a personal site project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).

## Getting Started

1) Clone the repo & install dependencies:

```bash

yarn

```

2) Open your Ghost installation, go to [Integrations](https://example.com/ghost/#/settings/integrations), create new called API (for example) and copy-paste keys to `.env` file:

![CleanShot 2023-04-29 at 02 35 56@2x](https://user-images.githubusercontent.com/299118/235269947-66a1b41b-19fc-46a1-a0d6-ddf3f27c5f1b.png)

```

NEXT_PUBLIC_GHOST_API=%API URL%

NEXT_PUBLIC_GHOST_API_KEY=%Content API key%

```

3) Create new page with `home` alias. You can leave it empty, but then it will be blank space before "Let's roll" button. Add HTML block:



`h1` tag is for the bigger text, `h2` - for the small one.

4) Add `blog` page. You can leave it empty, you'll need it just for posts list.

5) Setup your navigation. This is how I made it

![CleanShot 2023-04-29 at 02 42 08@2x](https://user-images.githubusercontent.com/299118/235270358-1d8a4f8a-c664-4c7a-8a23-d6d37a55f4b9.png)

6) Run the development server:

```bash

npm run dev

# or

yarn dev

```

Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.