sijiu / marp-cli-example

Marp CLI example

The good starter example for using Marp via Marp CLI.

• Write your slide deck by Marp Markdown.
• Manage the content of slides via Git. (Using GitPitch style PITCHME.md)
• Host your deck at GitHub, and publish as webpage with Netlify / Now!

See published slide

• Netlify: https://yhatt-marp-cli-example.netlify.com/
• Now: https://marp-cli-example.yhatt.now.sh/

Usage

It's surprisingly easy to start writing your slide deck!

Netlify

Push "Deploy to netlify" button. Netlify will create your repository based on this example and host website automatically.

After than, clone your repository and install Marp CLI. (Required Node.js >= 8)

git clone https://github.com/[your-name]/[repository-name].git
cd ./[repository-name]

npm install

OK, ready to write your slide deck! Edit PITCHME.md with your favorite editor, and preview with npm run start. By pushing Git commit to master, Netlify will host the deck to website.

ℹ️ Netlify integration can make an Open Graph image automatically.

Now

You can try publishing deck by using Now without a forked repository. After than install and setup Now, clone this repository and just run now.

git clone https://github.com/yhatt/marp-cli-example.git
cd ./marp-cli-example

now

An example slide will publish to https://marp-cli-example.[your-name].now.sh. When you made a satisfied deck by editing PITCHME.md, publish to your favorite and friendly URL by now alias.

# Alias to https://friendly-subdomain.now.sh
now alias https://marp-cli-example.[your-name].now.sh friendly-subdomain

# Alias to your custom domain registered to Now
now alias https://marp-cli-example.[your-name].now.sh your-custom-domain.com

Of course, you can manage deck via Git / GitHub at a forked repository. As same as Netlify, Now GitHub integration allows publishing master branch automatically.

How to write

Please see the documentation of Marpit Markdown, the features of Marp Core, and the default example in PITCHME.md.

Marp for VS Code extension is the best partner for writing Marp slide deck with live preview.

Assets and themes

• assets directory can put your assets for using in the deck. (e.g. Image resources)
• themes directory can put custom theme CSS. To use in the deck, please change theme global directive.

Preview deck

npm run start

It will be opened preview window via Chrome, and track change of PITCHME.md.

Build deck

npm run build

The built assets will output to dist folder.

Build per assets

npm run deck      # Output static HTML to dist/index.html
npm run og-image  # Output image for Open Graph to dist/og-image.jpg

LICENSE

WTFPL