Blog Website

A modern blog website template built with Next.js, TypeScript, and Markdown, featuring a clean design and responsive layout.

Technologies Used

• Next.js - React framework for production
• TypeScript - For type-safe code
• Markdown - For content management
• Tailwind CSS - For styling
• remark - For Markdown processing
• gray-matter - For parsing Markdown metadata

Features

• Static Generation with Next.js
• Markdown-based blog posts
• Responsive design
• SEO optimized
• Type-safe development with TypeScript
• Clean and minimal UI

Local Development

# Clone the repository
git clone https://github.com/miguelg719/blog-website.git

# Install dependencies
npm install

# Start development server
npm run dev

Your blog will be running at http://localhost:3000

Blog Posts

Blog posts are stored in the /_posts directory as Markdown files. Each post includes front matter for metadata and Markdown content for the body.

Post Format

---
title: 'Post Title'
excerpt: 'Post excerpt'
coverImage: '/assets/blog/preview/cover.jpg'
date: '2024-03-16T05:35:07.322Z'
author:
  name: Your Name
  picture: '/assets/blog/authors/profile.jpg'
ogImage:
  url: '/assets/blog/preview/cover.jpg'
---

Post content goes here...

Deployment

Vercel Deployment

This site can be deployed on Vercel with zero configuration:

1. Push your code to GitHub
2. Import your repository to Vercel
3. Vercel will detect Next.js and deploy automatically

GitHub Pages Deployment

To deploy on GitHub Pages:

1. First, update next.config.js:

/** @type {import('next').NextConfig} */
const isProd = process.env.NODE_ENV === 'production';
const repoName = 'llama-homeassistant-blog'; // Replace with your GitHub repo name

const nextConfig = {
  output: 'export',
  basePath: isProd ? `/${repoName}` : '',
  assetPrefix: isProd ? `/${repoName}/` : '',
  trailingSlash: true,
};

module.exports = nextConfig;

2. Add the build and deploy script to package.json:

{
  "scripts": {
    "deploy": "next build && touch out/.nojekyll && gh-pages -d out"
  }
}

3. Install the gh-pages package:

npm install --save-dev gh-pages

4. Deploy to GitHub Pages:

npm run deploy

5. Enable GitHub Pages in your repository settings:
   • Go to Settings > Pages
   • Select 'gh-pages' branch as the source
   • Save the changes

Your blog will be available at https://yourusername.github.io/blog-website

License

MIT License