Txsoura Blog

I forked this project from , so if you want the original project (without my changes), contribute, support or sponsor, go to his profile.

This is a Next.js, Tailwind CSS blogging starter template. Version 2 is based on Next App directory with React Server Component 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 and primary color attribute
Near perfect lighthouse score - Lighthouse report
Lightweight, 85kB first load JS
Mobile-friendly view
Light and dark theme
Font optimization with next/font
Integration with pliny that provides:
- Multiple analytics options including Umami, Plausible, Simple Analytics, Posthog and Google Analytics
- Comments via Giscus, Utterances or Disqus
Automatic image optimization via next/image
Support for nested routing of blog posts
Preconfigured security headers.

Quick Start Guide

Clone the repo

npx degit 'txsoura/blog.txsoura.com'

Personalize siteMetadata.js (site-related information)
Modify the content security policy in next.config.js if you want to use another analytics provider or a commenting solution other than giscus.
Create a medium account and get your public profile url
Deploy on Vercel

Installation

yarn

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

set PWD="$(pwd)"

Development

First, run the development server:

yarn dev

Open 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.

app - pages to route to. Read the Next.js documentation 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, 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. Check out the Next.js deployment documentation for more details.

Netlify Netlify’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 for suggested configuration values and more details.

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

Add output: 'export' in next.config.js. See static exports documentation for more information.
Comment out headers() from next.config.js.
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 for more details.
Run yarn build. The generated static content is in the out folder.
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.

txsoura / blog.txsoura.com