Ecosyste.ms: Awesome

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

Awesome Lists | Featured Topics | Projects

https://github.com/txsoura/blog.txsoura.com

This is my blog repository, which is populated with my medium posts.
https://github.com/txsoura/blog.txsoura.com

blog medium nextjs react rss

Last synced: 30 days ago
JSON representation

This is my blog repository, which is populated with my medium posts.

Awesome Lists containing this project

README 

        
# Txsoura Blog

I forked this project from [![Timlrx](https://img.shields.io/github/forks/timlrx/tailwind-nextjs-starter-blog?style=social)](https://GitHub.com/timlrx/tailwind-nextjs-starter-blog/network/), so if you want the original project (without my changes), contribute, support or [sponsor](https://github.com/sponsors/timlrx), go to his profile.



[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/txsoura/blog.txsoura.com)



This is a [Next.js](https://nextjs.org/), [Tailwind CSS](https://tailwindcss.com/) blogging starter template. Version 2 is based on Next App directory with [React Server Component](https://nextjs.org/docs/getting-started/react-essentials#server-components) and gets the posts from medium (I removed some features from the original project).



Check out the documentation below to get started.



## Features



- Next.js with Typescript

- Easy styling customization with [Tailwind 3.0](https://tailwindcss.com/blog/tailwindcss-v3) and primary color attribute

- Near perfect lighthouse score - [Lighthouse report](https://www.webpagetest.org/result/230805_BiDcBQ_4H7)

- Lightweight, 85kB first load JS

- Mobile-friendly view

- Light and dark theme

- Font optimization with [next/font](https://nextjs.org/docs/app/api-reference/components/font)

- Integration with [pliny](https://github.com/timlrx/pliny) that provides:

  - Multiple analytics options including [Umami](https://umami.is/), [Plausible](https://plausible.io/), [Simple Analytics](https://simpleanalytics.com/), Posthog and Google Analytics

  - Comments via [Giscus](https://github.com/laymonage/giscus), [Utterances](https://github.com/utterance/utterances) or Disqus

- Automatic image optimization via [next/image](https://nextjs.org/docs/basic-features/image-optimization)

- Support for nested routing of blog posts

- Preconfigured security headers.



## Quick Start Guide



1. Clone the repo



```bash

npx degit 'txsoura/blog.txsoura.com'

```



2. Personalize `siteMetadata.js` (site-related information)

3. Modify the content security policy in `next.config.js` if you want to use

   another analytics provider or a commenting solution other than giscus.

4. Create a medium account and get your public profile url

5. Deploy on Vercel



## Installation



```bash

yarn

```



Please note, that if you are using Windows, you may need to run:



```bash

set PWD="$(pwd)"

```



## Development



First, run the development server:



```bash

yarn dev

```



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



Edit the layout in `app`. With live reloading, the pages auto-update as you edit them.



## Extend / Customize



`data/siteMetadata.js` - contains most of the site-related information that should be modified for a user's need.



`data/logo.svg` - replace with your own logo.



`public/static` - store assets such as images and favicons.



`tailwind.config.js` and `css/tailwind.css` - tailwind configuration and stylesheet which can be modified to change the overall look and feel of the site.



`css/prism.css` - controls the styles associated with the code blocks. Feel free to customize it and use your preferred prismjs theme e.g. [prism themes](https://github.com/PrismJS/prism-themes).



`app` - pages to route to. Read the [Next.js documentation](https://nextjs.org/docs/app) for more information.



`next.config.js` - configuration related to Next.js. You need to adapt the Content Security Policy if you want to load scripts, images etc. from other domains.



## Post



Every post you do on your [Medium](https://medium.com/), set as public, will be fetched and shown on your blog.



## Deploy



**Vercel**  

The easiest way to deploy the template is to deploy on [Vercel](https://vercel.com). Check out the [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.



**Netlify**

[Netlify](https://www.netlify.com/)’s Next.js runtime configures enable key Next.js functionality on your website without the need for additional configurations. Netlify generates serverless functions that will handle Next.js functionalities such as server-side rendered (SSR) pages, incremental static regeneration (ISR), `next/images`, etc.



See [Next.js on Netlify](https://docs.netlify.com/integrations/frameworks/next-js/overview/#next-js-runtime) for suggested configuration values and more details.



**Static hosting services / GitHub Pages / S3 / Firebase etc.**



1. Add `output: 'export'` in `next.config.js`. See [static exports documentation](https://nextjs.org/docs/app/building-your-application/deploying/static-exports#configuration) for more information.

2. Comment out `headers()` from `next.config.js`.

3. Add `unoptimized: true` to the `images` key in `next.config.js`:



   Alternatively, to continue using `next/image`, you can use an alternative image optimization provider such as Imgix, Cloudinary, or Akamai. See [image optimization documentation](https://nextjs.org/docs/app/building-your-application/deploying/static-exports#image-optimization) for more details.

4. Run `yarn build`. The generated static content is in the `out` folder.

5. Deploy the `out` folder to your hosting service of choice or run `npx serve out` to view the website locally.



**Note**: Deploying on Github pages requires additional modifications to the base path. Please refer to the FAQ for more information.



## Licence



[MIT](https://github.com/timlrx/tailwind-nextjs-starter-blog/blob/main/LICENSE) © [Timothy Lin](https://www.timlrx.com)