Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/szilarddoro/szilarddoro-blog
Next.js application powering my blog.
https://github.com/szilarddoro/szilarddoro-blog
blog cloudinary cms contentful nextjs personal-blog technology vercel
Last synced: 10 days ago
JSON representation
Next.js application powering my blog.
- Host: GitHub
- URL: https://github.com/szilarddoro/szilarddoro-blog
- Owner: szilarddoro
- Created: 2022-01-03T20:48:46.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2023-02-09T21:22:33.000Z (almost 2 years ago)
- Last Synced: 2024-12-07T23:12:05.035Z (18 days ago)
- Topics: blog, cloudinary, cms, contentful, nextjs, personal-blog, technology, vercel
- Language: TypeScript
- Homepage: https://szilarddoro.com
- Size: 6.83 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# szilarddoro.com
This is the Next.js application powering my personal blog. Contentful's Preview
and Content Delivery APIs are providing the content.
Feel free to fork the repository or contribute via
[pull requests](https://github.com/szilarddoro/szilarddoro-blog/pulls).
## Dependencies
- [Contentful](https://contentful.com) - This is for managing your content on an
easy to use platform.
- [Cloudinary](https://cloudinary.com) - This is for storing and optimizing your
images on the fly.
- [Vercel](https://vercel.com) or [Netlify](https://netlify.com) or any other
hosting platform. It's a simple Next.js app, you can deploy it anywhere.
## Configuring the environment
| Environment variable | Type | Description |
| ----------------------------------- | -------------------- | ------------------------------------------------------------------------------------------------------------- |
| **CONTENTFUL_ACCESS_TOKEN** | `string` | Contentful's Content Delivery API access token |
| **CONTENTFUL_PREVIEW_ACCESS_TOKEN** | `string` | Contentful's Content Preview API access token |
| **CONTENTFUL_SPACE_ID** | `string` | Identifier of your Contentful's space |
| **SITE_CONFIGURATION_ID** | `string` | Entry identifier of the main site configuration object on Contentful |
| **NEXT_PUBLIC_APP_NAME** | `string` | Name of the PWA |
| **PRIMARY_AUTHOR_ID** | `string` (optional) | Entry identifier of the primary author, you can omit if you don't wish to display any author on the home page |
| **PREVIEW** | `boolean` (optional) | Whether or not the page should use the Preview API |
You can create an `.env` file (`env.local` is recommended) or set these
environment variables on the platform you are building and hosting your blog.
## Running the blog locally
`yarn dev`
Open http://localhost:3000 in your browser. The page will reload every time you
change the code.
## Building the blog locally
`yarn build`
Build your blog locally and see the actual bundle size per page.
## Running the blog locally
`yarn start`
Open http://localhost:3000 in your browser to see the production build.
You can run Lighthouse tests in a private tab to see an approximate result of
how your site will look like once deployed.
## Deploy the blog
There are several platforms that are awesome for hosting your blog
such as [Vercel](https://vercel.com) or [Netlify](https://netlify.com).
My own blog runs on [Vercel](https://vercel.com).
## Content models
This blog uses very few content models to let you create your blog posts as fast
as possible. Below you can find the relevant fields.
### Site Configuration
Represents a site configuration object. There are additional fields returned by
Contentful. Check out the
[official Github repository](https://github.com/contentful/contentful.js) to
learn more.
| Field | Type | Description |
| -------------- | -------- | ----------------------------------------- |
| title | `string` | Title of your blog |
| description | `string` | Default meta description of your blog |
| openGraphImage | `string` | Default Open Graph image URL of your blog |
| siteUrl | `string` | The URL where your blog is deployed |
### Cloudinary Image
Represents an image. The return value is managed by
[Cloudinary's](http://cloudinary.com) Contentful integration.
| Field | Type | Description |
| ------------ | -------- | -------------------------------------------------------------------------------- |
| secure_url | `string` | Secure URL for fetching the image |
| context | `object` | Image metadata used for SEO purposes |
| relative_url | `string` | A relative URL for displaying the image. Used by Next Image's Cloudinary loader. |
### Author
Represents an author. There are additional fields returned by Contentful. Check
out the
[official Github repository](https://github.com/contentful/contentful.js) to
learn more.
| Field | Type | Description |
| -------- | ----------------- | ----------------------------- |
| id | `string` | Identifier of the author |
| image | `CloudinaryImage` | Profile picture of the author |
| name | `string` | Name of the author |
| title | `string` | Title of the author |
| email | `string` | Email address of the author |
| shortBio | `string` | Short biography of the author |
| twitter | `string` | Twitter account of the author |
| github | `string` | GitHub account of the author |
### Blog Post
Represents a blog post. There are additional fields returned by Contentful.
Check out the
[official GitHub repository](https://github.com/contentful/contentful.js) to
learn more.
| Field | Type | Description |
| ----------- | --------------------- | ----------------------------------------------------------------------------------- |
| id | `string` | Identifier of the blog post |
| title | `string` | Title of the blog post |
| heroImage | `CloudinaryImage` | Hero image used as an Open Graph image and displayed at the start of your blog post |
| body | `MDXSerializedResult` | A serialized markdown string |
| slug | `string` | Slug of the blog post |
| description | `string` | Short description used as a meta description as well |
| tags | `Array` | An array of tags provided by Contentful's API |
| author | `Author` | Author of the blog post |
| readingTime | `number` | Number of minutes it takes for an average reader to read the blog post |