Awesome

GitHub

Download

You can download latest version from here https://storage.googleapis.com/theme-awesome/awesome.zip

Motivation

I just want to create/update markdown files to deploy sites using Git. This blog can run without any SaaS service such as contentful or Strapi

Requirements

Node.js and npm

Theme Structure

.
├── README.md                # README file
├── next.config.js           # Next JS configuration
├── blog.config.ts           # The theme's original configuration
├── next-sitemap.js          # Sitemap configuration
├── public                   # Public folder
│   └── assets
│       └── images           # Image used by the theme
├── components
│   ├── articles             # The components related to article
│   ├── buttons              # The components related to article
│   ├── common               # The common components
│   ├── layouts              # Layout components of the theme
│   ├── sides                # The components related to side column
│   ├── texts                # The components related to texts
│   └── utils                # The utility components
├── contents                 # Markdown files for each contents
├── pages                    # Next JS pages
├── hooks                    # React hooks functions
├── styles                   # Global css directory
├── types                    # Type utilities
├── utils                    # Utility functions
├── .babelrc                 # Babel configuration to extends Next.js
├── .editorconfig            # Editor configuration
├── .eslint                  # JavaScript coding rule configuration
├── tsconfig.json            # TypeScript configuration
├── tsconfig.json            # TypeScript configuration
├── package.json             # Package configuration to install dependencies
├── yarn.lock                # Package configuration to install dependencies
└── vercel.json              # Vercel configuration to deploy the theme

Getting Started

Install the dependencies

$ cd ./path/to/the/project
$ npm install

Develop

$ npm run dev

Open https://localhost:3300 with your favorite browser

How to deploy

Create Git Repository on GitHub

First, copy the contents of the theme, and push them to the GitHub

https://github.com/

Connect Repository on Vercel

Second, Using the vercel is the easiest way to deploy the site.

https://vercel.com/

Blog Configuration

You can customize the site easily with blog.config.ts

blog.config.ts looks like below.

blog.config.ts

export default {
  siteLogo: {
    url: "/images/logo.svg",
    width: "201",
    height: "39",
  },
  siteName: "AWESOME",
  title: "AWESOME",
  description: "AWESOME Next.js TypeScript MDX Blog Theme",
  styles: {
    containerMaxWidth: "1280px",
    colors: {
      primary: "#50C0A1",
      primaryGradient: "linear-gradient(to right, #06A9B7, #B0DE87)",
      base: "#F2F4F3",
      border: "",
      bg: "#F7F7F7",
      text: "#2C2C2C",
      grayLighter: "#A0A0A0",
    },
    breakPoints: {
      huge: "1440px",
      large: "1170px",
      medium: "768px",
      small: "450px",
    },
  },
  account: {
    name: "Mr. AWESOME",
    description: "profile here profile here profile here profile here",
    image: `/images/me.png`,
    social: {
      twitter: "<https://twitter.com/steelydylan>",
      github: "<https://github.com/steelydylan>",
    },
  },
  hero: {
    title: "My awesome life",
    image: "/images/plane.jpeg",
    description: "AWESOME Next.js TypeScript MDX Blog Theme",
  },
  navigation: [
    {
      name: "travel",
      url: `/travel`,
    },
    {
      name: "camp",
      url: `/camp`,
    },
  ],
  article: {
    defaultThumbnail: "/images/thumbnail.png",
    articlesPerPage: 6,
  },
  categories: [
    {
      id: "camp",
      title: "Camp",
      imagePath: "/images/camp.jpeg",
      description: "Look at my awesome camp life",
    },
    {
      id: "travel",
      title: "Travel",
      imagePath: "/images/london.jpeg",
      description: "Look at my awesome travel life",
    },
  ],
  tags: [
    {
      id: "london",
      title: "London",
    },
    {
      id: "boston",
      title: "Boston",
    },
    {
      id: "paris",
      title: "Paris",
    },
    {
      id: "fire",
      title: "Fire",
    },
    {
      id: "sky",
      title: "Sky",
    },
  ],
};

How to write articles

Add mdx file

Add mdx files on the following path contents/***/index.mdx

The *** part will be the slug of the article

Frontmatter

Each articles can have meta info via frontmatter like belows.

---
title: Awesome - Next.js Blog Theme
date: 2021-09-18
writtenBy: steelydylan
category: themes
tags: ["about"]
related: []
thumbnail: /images/awesome.png
---