# gatsby-theme-blog-core

> The core theme for gatsby-theme-blog

Latest version **4.0.0** (published 2021-12-03) · MIT license · 0 weekly downloads

## Install

```sh
npm install gatsby-theme-blog-core
pnpm add gatsby-theme-blog-core
yarn add gatsby-theme-blog-core
bun add gatsby-theme-blog-core
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 4.0.0 |
| Published | 2021-12-03 |
| First published | 2018-12-27 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >=14.15.0 |
| Dependencies | 11 |
| Unpacked size | 59.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | christopherbiscardi |
| Maintainers | dschau, kylemathews, pieh, sidharthachatterjee, wardpeet, tylerbarnes, fk, smthomas, lekoarts, rachelbahl, daniellewgatsby, veryspry, abhiaiyer, biscarch |

## Links

- npm: https://www.npmjs.com/package/gatsby-theme-blog-core
- Repository: https://github.com/gatsbyjs/themes
- Homepage: https://github.com/gatsbyjs/themes/tree/master/packages/gatsby-theme-blog-core#readme
- Issues: https://github.com/gatsbyjs/themes/issues
- npm.io page: https://npm.io/package/gatsby-theme-blog-core

## Dependencies (11)

- [@mdx-js/mdx](https://npm.io/package/@mdx-js/mdx.md) ^1.6.22
- [remark-slug](https://npm.io/package/remark-slug.md) ^5.1.2
- [gatsby-core-utils](https://npm.io/package/gatsby-core-utils.md) ^3.3.0
- [gatsby-plugin-mdx](https://npm.io/package/gatsby-plugin-mdx.md) ^3.3.0
- [gatsby-plugin-image](https://npm.io/package/gatsby-plugin-image.md) ^2.3.0
- [gatsby-plugin-sharp](https://npm.io/package/gatsby-plugin-sharp.md) ^4.3.0
- [gatsby-remark-images](https://npm.io/package/gatsby-remark-images.md) ^6.3.0
- [gatsby-source-filesystem](https://npm.io/package/gatsby-source-filesystem.md) ^4.3.0
- [gatsby-transformer-sharp](https://npm.io/package/gatsby-transformer-sharp.md) ^4.3.0
- [gatsby-remark-smartypants](https://npm.io/package/gatsby-remark-smartypants.md) ^5.3.0
- [gatsby-remark-copy-linked-files](https://npm.io/package/gatsby-remark-copy-linked-files.md) ^5.3.0

## Recent versions

- 4.0.0 (latest) — 2021-12-03
- 2.1.1-gatsby-v3.19 (gatsby-v3) — 2021-04-19
- 1.5.52-ipc-develop.23 (ipc-develop) — 2020-08-04
- 1.5.62-mdx-less-babel2.2 (mdx-less-babel2) — 2020-07-07
- 1.5.62-mdx-less-babel.1 (mdx-less-babel) — 2020-07-07
- 1.5.61-static-query-template.8 (static-query-template) — 2020-07-06
- 1.5.60-oom-exit-code.13 (oom-exit-code) — 2020-07-05
- 1.5.54-finish-plugin-activities.15 (finish-plugin-activities) — 2020-07-03
- 1.3.25-unifiedroutes.87 (unifiedroutes) — 2020-07-01
- 1.5.52-corejs3.34 (corejs3) — 2020-07-01
- 2.0.0-canary.809 (blog-2.0) — 2020-06-22
- 1.5.41-admin-pkg.4 (admin-pkg) — 2020-06-13
- 1.5.32-distributed-html.12 (distributed-html) — 2020-06-11
- 1.5.43-query-webpack-modules.12 (query-webpack-modules) — 2020-06-10
- 1.5.32-polyfills.11 (polyfills) — 2020-06-05
- … 389 more at https://npm.io/package/gatsby-theme-blog-core/versions

## README

<p align="center">
  <a href="https://www.gatsbyjs.com">
    <img alt="Gatsby" src="https://www.gatsbyjs.com/Gatsby-Monogram.svg" width="60" />
  </a>
</p>
<h1 align="center">
  The Gatsby blog core theme
</h1>

A Gatsby theme for creating a blog child theme. It includes all the data structures you need to get up and running building a blog and includes no additional theming or style opinions. `gatsby-theme-blog` uses this theme under the hood.

## Installation

### For a new site

If you're creating a new site and want to use the blog theme, you can use the blog theme starter. This will generate a new site that pre-configures use of the blog theme.

```shell
gatsby new my-themed-blog https://github.com/gatsbyjs/gatsby-starter-blog-theme-core
```

### For an existing site

1. Install the theme

```shell
npm install gatsby-theme-blog-core
```

2. Add the configuration to your `gatsby-config.js` file

```js
// gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: `gatsby-theme-blog-core`,
      options: {
        // basePath defaults to `/`
        basePath: `/blog`,
      },
    },
  ],
}
```

3. Add blog posts to your site by creating `md` or `mdx` files inside `/content/posts`.

   > Note that if you've changed the default `contentPath` in the configuration, you'll want to add your markdown files in the directory specified by that path.

4. Run your site using `gatsby develop` and navigate to your blog posts. If you used the above configuration, your URL will be `http://localhost:8000/blog`

## Usage

### Theme options

| Key                      | Default value    | Description                                                                                                 |
| ------------------------ | ---------------- | ----------------------------------------------------------------------------------------------------------- |
| `basePath`               | `/`              | Root url for all blog posts                                                                                 |
| `contentPath`            | `content/posts`  | Location of blog posts                                                                                      |
| `assetPath`              | `content/assets` | Location of assets                                                                                          |
| `mdxOtherwiseConfigured` | `false`          | Set this flag `true` if `gatsby-plugin-mdx` is already configured for your site.                            |
| `excerptLength`          | `140`            | Length of the auto-generated excerpt of a blog post                                                         |
| `imageMaxWidth`          | `1380`           | Set the max width of images in your blog posts. This applies to your featured image in frontmatter as well. |
| `filter`                 | `{}`             | Set the posts filter, for example: `{ frontmatter: { draft: {ne: true} } }`                                 |
| `limit`                  | `1000`           | Set the amount of pages that should be generated                                                            |

#### Example usage

```js
// gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: `gatsby-theme-blog-core`,
      options: {
        // basePath defaults to `/`
        basePath: `/blog`,
      },
    },
  ],
}
```

### Additional configuration

In addition to the theme options, there are a handful of items you can customize via the `siteMetadata` object in your site's `gatsby-config.js`

```js
// gatsby-config.js
module.exports = {
  siteMetadata: {
    // Used for the site title and SEO
    title: `My Blog Title`,
    // Used to provide alt text for your avatar
    author: `My Name`,
    // Used for SEO
    description: `My site description...`,
    // Used for resolving images in social cards
    siteUrl: `https://example.com`,
    // Used for social links in the root footer
    social: [
      {
        name: `Twitter`,
        url: `https://twitter.com/gatsbyjs`,
      },
      {
        name: `GitHub`,
        url: `https://github.com/gatsbyjs`,
      },
    ],
  },
}
```

### Blog Post Fields

The following are the defined blog post fields based on the node interface in the schema

| Field       | Type     |
| ----------- | -------- |
| id          | String   |
| title       | String   |
| body        | String   |
| slug        | String   |
| date        | Date     |
| tags        | String[] |
| excerpt     | String   |
| image       | String   |
| imageAlt    | String   |
| socialImage | String   |

## Available components and styling

There are some existing components that you can import and use. Reference the full path to do so, e.g. `gatsby-blog-theme-core/src/components/post`.

Also note that there are `classNames` on elements in these components allowing you to target them with styles in your CSS.

---
_Source: https://npm.io/package/gatsby-theme-blog-core · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._