README.md (20 hours ago)

A blog starter based on React and Next.js.

Table of content

• Features
• Architecture
• Installation
• Development
• Production
• Customization
  • Images
  • CSS
  • SASS
  • LESS
  • Google analytics
  • Disqus

Features

• SEO
• SSR or static build with Next.js
• Posts written in Markdown
• Sitemap auto-generated, available at /sitemap.xml
• RSS feed auto-generated, available at /rss.xml
• robots.txt auto-generated, available at /robots.txt

Architecture

• /pages: Next.js pages (by default / and /posts/:slug)
• /components: React components
• /posts: Markdown posts
• /images: Images that will be optimized (compression + responsive)
• /static: Resources that will be copied without any treatment

Installation

npx degit soywod/nextjs-blog-starter my-blog
cd my-blog
yarn install

Development

yarn start

Production

yarn export

The static build will be available in /out.

Customization

Images

Images are optimized by next-optimized-images.

For example, to optimized and resize JPEG images:

import React from 'react';

const oneSize = require('./images/my-image.jpg?resize&size=300');
const multipleSizes = require('./images/my-image.jpg?resize&sizes[]=300&sizes[]=600&sizes[]=1000');

export default () => (
  <div>
    {/* Single image: */}
    <img src={oneSize.src} />

    {/* Source set with multiple sizes: */}
    <img srcSet={multipleSizes.srcSet} src={multipleSizes.src} />
  </div>
);

CSS

yarn add -D @zeit/next-css

Edit next.config.js:

const withCSS = require('@zeit/next-css')
const plugins = [..., withCSS]

SASS

yarn add -D @zeit/next-sass node-sass

Edit next.config.js:

const withSASS = require('@zeit/next-sass')
const plugins = [..., withSASS]

LESS

yarn add -D @zeit/next-less less

Edit next.config.js:

const withLESS = require('@zeit/next-less')
const plugins = [..., withLESS]

Google analytics

yarn add react-ga

Edit pages/_app.jsx:

import ReactGA from 'react-ga'

class MyApp extends App {
  ...
  componentDidMount() {
    ReactGA.initialize('UA-00000000-1')
    ReactGA.pageview(window.location.pathname + window.location.search)
  }
}

Disqus

yarn add disqus-react

Edit components/Post.jsx:

import {DiscussionEmbed} from 'disqus-react'

function Post(props) {
  ...
  const disqusShortname = 'your-disqus-shortname'
  const disqusConfig = {identifier: slug, title}

  return (
    <Fragment>
      ...
      <DiscussionEmbed shortname={disqusShortname} config={disqusConfig} />
    </Fragment>
  )