docusaurus/website/docs/blog.md
Pawel Kadluczka ff83e6f8bc feat(v2): Implement plugin creating feed for blog posts (#1916)
* feat(v2): Implement feed for blog posts

Fixes: #1698

Test plan:
- added tests

Ran `yarn build` on website with the following config (and disabled blog
from preset-classic):

```js
[
'@docusaurus/plugin-content-blog',
  {
    path: '../website-1.x/blog',
    feedOptions: {
      copyright: 'Copy',
      type: 'atom',
    },
  },
],
```
which genereted the following feed:
```xml
<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
    <id>https://v2.docusaurus.io/blog</id>
    <title>Docusaurus Blog</title>
    <updated>2018-12-14T00:00:00.000Z</updated>
    <generator>https://github.com/jpmonette/feed</generator>
    <link rel="alternate" href="https://v2.docusaurus.io/blog"/>
    <subtitle>Docusaurus Blog</subtitle>
    <icon>https://v2.docusaurus.io/img/docusaurus.ico</icon>
    <rights>Copy</rights>
    <entry>
        <title type="html"><![CDATA[Happy 1st Birthday Slash!]]></title>
        <id>Happy 1st Birthday Slash!</id>
        <link href="https://v2.docusaurus.io/blog/2018/12/14/Happy-First-Birthday-Slash"/>
        <updated>2018-12-14T00:00:00.000Z</updated>
        <summary type="html"><![CDATA[![First Birthday Slash](/img/docusaurus-slash-first-birthday.svg)]]></summary>
    </entry>
    <entry>
        <title type="html"><![CDATA[Towards Docusaurus 2]]></title>
        <id>Towards Docusaurus 2</id>
        <link href="https://v2.docusaurus.io/blog/2018/09/11/Towards-Docusaurus-2"/>
        <updated>2018-09-11T00:00:00.000Z</updated>
        <summary type="html"><![CDATA[Docusaurus was [officially announced](https://docusaurus.io/blog/2017/12/14/introducing-docusaurus) over nine months ago as a way to easily build open source documentation websites. Since then, it has amassed over 8,600 GitHub Stars, and is used by many popular open source projects such as [React Native](https://facebook.github.io/react-native/), [Babel](https://babeljs.io/), [Jest](https://jestjs.io/), [Reason](https://reasonml.github.io/) and [Prettier](https://prettier.io/).]]></summary>
    </entry>
    <entry>
        <title type="html"><![CDATA[How I Converted Profilo to Docusaurus in Under 2 Hours]]></title>
        <id>How I Converted Profilo to Docusaurus in Under 2 Hours</id>
        <link href="https://v2.docusaurus.io/blog/2018/04/30/How-I-Converted-Profilo-To-Docusaurus"/>
        <updated>2018-04-30T00:00:00.000Z</updated>
        <summary type="html"><![CDATA[> _“Joel and I were discussing having a website and how it would have been great to launch with it. So I challenged myself to add Docusaurus support. It took just over an hour and a half. I'm going to send you a PR with the addition so you can take a look and see if you like it. Your workflow for adding docs wouldn't be much different from editing those markdown files.”_]]></summary>
    </entry>
    <entry>
        <title type="html"><![CDATA[Introducing Docusaurus]]></title>
        <id>Introducing Docusaurus</id>
        <link href="https://v2.docusaurus.io/blog/2017/12/14/introducing-docusaurus"/>
        <updated>2017-12-14T00:00:00.000Z</updated>
        <summary type="html"><![CDATA[![Introducing Slash](/img/slash-introducing.svg)]]></summary>
    </entry>
</feed>
```

* new feedOptions type 'all' and use correct path
2019-11-06 14:45:31 +07:00

3.4 KiB

id title
blog Blog

Initial setup

To setup your site's blog, start by creating a blog directory.

Then, add a navbar link to your blog within docusaurus.config.js:

links: [
  ...
  {to: 'blog', label: 'Blog', position: 'left'}, // or position: 'right'
  ...
]

Adding posts

To publish in the blog, create a file within the blog directory with a formatted name of YYYY-MM-DD-my-blog-post-title.md. The post date is extracted from the file name.

For example, at my-website/blog/2019-09-05-hello-docusaurus-v2.md:

---
title: Welcome Docusaurus v2
author: Dattatreya Tripathy
authorTitle: Contributor of Docusaurus 2
authorURL: https://github.com/dt97
authorTwitter: CuriousDT
tags: [hello, docusaurus-v2]
---

Welcome to this blog. This blog is created with [**Docusaurus 2 alpha**](https://v2.docusaurus.io/).

<!--truncate-->

This is my first post on Docusaurus 2.

A whole bunch of exploration to follow.

Header options

The only required field is title; however, we provide options to add author information to your blog post as well along with other options.

  • author - The author name to be displayed.
  • authorURL - The URL that the author's name will be linked to. This could be a GitHub, Twitter, Facebook account URL, etc.
  • authorImageURL - The URL to the author's image. (Note: If you use both authorFBID and authorImageURL, authorFBID will take precedence. Don't include authorFBID if you want authorImageURL to appear.)
  • title - The blog post title.
  • tags - A list of strings to tag to your post.

Summary truncation

Use the <!--truncate--> marker in your blog post to represent what will be shown as the summary when viewing all published blog posts. Anything above <!--truncate--> will be part of the summary. For example:

---
title: Truncation Example
---

All this will be part of the blog post summary.

Even this.

<!--truncate-->

But anything from here on down will not be.

Not this.

Or this.

Feed

You can generate RSS/ Atom feed by passing feedOptions.

feedOptions?: {
  type: 'rss' | 'atom' | 'all';
  title?: string;
  description?: string;
  copyright: string;
  language?: string; // possible values: http://www.w3.org/TR/REC-html40/struct/dirlang.html#langcodes
};

Example usage:

// docusaurus.config.js
module.exports = {
  // ...
  presets: [
    [
      '@docusaurus/preset-classic',
      {
        blog: {
          feedOptions: {
            type: 'all',
            copyright: `Copyright © ${new Date().getFullYear()} Facebook, Inc.`
          },
        },
      },
    ],
  ],
};

Advanced topics

Blog-only mode

You can run your Docusaurus 2 site without a landing page and instead have your blog's post list page as the index page. Set the routeBasePath to be '/' to indicate it's the root path.

Note: Make sure there's no index.js page in src/pages or else there will be two files mapping to the same route!

// docusaurus.config.js
module.exports = {
  // ...
  presets: [
    [
      '@docusaurus/preset-classic',
      {
        blog: {
          path: './blog',
          routeBasePath: '/', // Set this value to '/'.
        },
      },
    ],
  ],
};