A Gatsby theme that bundles a blog, portfolio, photography and podcast. It uses Tailwind CSS for theming and includes code highlighting with Prism, RSS feed, a dark mode and great typography. It is accessible and optimized for search engines.

gatsby new site arshad/gatsby-starter-phoenix

Installation

Step 1: Run the following command to create a new site

1gatsby new my-site arshad/gatsby-starter-phoenix

Step 2: Configure .env

Copy .env.example to .env and update SITE_URL.

Step 3: Start developing

1cd my-site/
2gatsby develop

Adding content

Page

Place your pages inside content/pages as follows:

my-site
  ├── content
  │ └── pages
  │     └── about
  │         ├── image.jpg
  │         └── index.mdx
  ├── node_modules
  ├── gatsby-config.js
  └── package.json

content/pages/about/index.mdx:

1title: Hello, I'm Nulla Texier
2excerpt: Temporibus tenetur eveniet ipsa. Enim eum consequatur magnam. Nulla quaerat est nam consequatur magnam.

Post

Place your blog posts inside content/posts as follows:

my-site
  ├── content
  │ └── posts
  │     └── 2019-11-19-slug-for-post
  │         ├── image.jpg
  │         └── index.mdx
  ├── node_modules
  ├── gatsby-config.js
  └── package.json

content/posts/2019-11-19-slug-for-post/index.mdx:

1---
2title: Mollitia quaerat perspiciatis eaque vel officiis
3date: 2018-09-01
4excerpt: Nobis et distinctio ipsam officia rem similique. Ipsa facilis doloremque quos culpa similique quidem autem. Expedita doloribus.
5image: ./image.jpg
6caption: Illustration by <a href="https://illlustrations.co">illlustrations.co</a>
7tags: ["nobis", "animi"]
8---
9
10Et aliquip labore id minim adipisicing excepteur labore in ex deserunt duis quis cillum in. Sint enim proident incididunt cillum esse sit sunt laboris dolore. Eu qui proident eu ut eiusmod sunt aliquip ut dolor. Ipsum consequat culpa officia dolor.

Projects

Place your projects inside content/projects as follows:

my-site
  ├── content
  │ └── projects
  │     └── name-of-project
  │         ├── image.jpg
  │         └── index.mdx
  ├── node_modules
  ├── gatsby-config.js
  └── package.json

content/projects/name-of-project/index.mdx:

1---
2title: Aspernatur voluptates
3excerpt: Quos totam nihil saepe ipsam incidunt. Quo ipsam soluta sapiente.
4url: https://example.com
5image: image.jpg
6---

Photos

Place your photos inside content/photos as follows:

site
  ├── content
  │   └── photos
  │       └── photo-1
  │           ├── photo.jpg
  │           └── index.mdx
  ├── node_modules
  ├── gatsby-config.js
  └── package.json

content/photos/photo-1/index.mdx

1---
2title: Proident enim aliqua
3date: 2019-10-11
4excerpt: Consequat consectetur mollit commodo nisi reprehent velit aliqua quis nisi laborum.
5image: ./photo.jpg
6---
7
8Et aliquip labore id minim adipisicing excepteur labore in ex deserunt duis quis cillum in.

Configuration

The following theme options and configuration is available:

1// gatsby-config.js
2{
3  title: `Phoenix.`,
4  description: `Description for your site.`,
5  siteUrl: process.env.SITE_URL,
6  startUrl: `/`,
7  copyright: `© YYYY Phoenix. All rights reserved.`,
8  icon: `src/images/icon.png`,
9  color: `#3C64F1`,
10  menuLinks: [
11    {
12      name: "Home",
13      link: "/",
14    },
15    {
16      name: "Projects",
17      link: "/projects",
18    },
19    {
20      name: "Portfolio",
21      link: "/portfolio",
22    },
23    {
24      name: "Podcast",
25      link: "/podcast",
26    },
27    {
28      name: "About",
29      link: "/about",
30    },
31    {
32      name: "Contact",
33      link: "/contact",
34    },
35  ],
36  socialLinks: [
37    {
38      name: "Twitter",
39      url: "https://twitter.com/arshadcn",
40      icon: "twitter",
41    },
42    {
43      name: "Github",
44      url: "https://github.com/arshad",
45      icon: "github",
46    },
47  ],
48}

Customization

Gatsby uses shadowing for theme customization. You can read more about it here.

Support

Create an issue on the main repo @arshad/gatsby-themes.

👏 Credits

• Illustrations from illlustrations.co
• Icons from Feather