Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/yhatt/marp-cli-example
The good starter for using Marp via Marp CLI, by the author of Marp
https://github.com/yhatt/marp-cli-example
deck markdown marp netlify presentation slides vercel
Last synced: 7 days ago
JSON representation
The good starter for using Marp via Marp CLI, by the author of Marp
- Host: GitHub
- URL: https://github.com/yhatt/marp-cli-example
- Owner: yhatt
- License: wtfpl
- Created: 2018-09-05T08:37:32.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2024-10-07T12:20:18.000Z (about 1 month ago)
- Last Synced: 2024-10-13T01:34:27.981Z (27 days ago)
- Topics: deck, markdown, marp, netlify, presentation, slides, vercel
- Language: JavaScript
- Homepage: https://yhatt.github.io/marp-cli-example
- Size: 1.02 MB
- Stars: 181
- Watchers: 5
- Forks: 158
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
- awesome-marp - Marp CLI example - An example of Marp CLI automation with GitHub Pages/Netlify/Vercel. (by Marp maintainer) (Examples / Compatible markdown-it plugins)
README
# Marp CLI example
[](https://open.vscode.dev/yhatt/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](https://github.com/gitpitch/gitpitch) style `PITCHME.md`)
- Host your deck at GitHub, and publish as webpage with [GitHub Pages], [Netlify], and [Vercel].
- Blazingly fast delivery out of the box. [Acquired all 100% Lighthouse scores!](#lighthouse)
[marp]: https://marp.app/
[marp cli]: https://github.com/marp-team/marp-cli
[github pages]: https://pages.github.com/
[netlify]: https://www.netlify.com/
[vercel]: https://vercel.com/
## See published slide deck
- 
**[GitHub Pages]**: https://yhatt.github.io/marp-cli-example
- 
**[Netlify]**: https://yhatt-marp-cli-example.netlify.app/
- 
**[Vercel]**: https://marp-cli-example.yhatt.vercel.app/
### Lighthouse
## Usage
It's surprisingly easy to start publishing your slide deck!
### [GitHub Pages]
Create a new _public_ repository based on this repository, from **"Use this template"** button!
[](https://github.com/yhatt/marp-cli-example/generate)
We already have [GitHub Actions workflow](.github/workflows/github-pages.yml) to build and deploy automatically when merged to master branch. It's also available to deploy from any branch manually.
To get started, turn on GitHub Pages in repository's "**Settings** tab → **Pages**" [by setting source as "GitHub Actions"](https://docs.github.com/en/pages/getting-started-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site#publishing-with-a-custom-github-actions-workflow).
### [Netlify]
Push **"Deploy to netlify"** button. [Netlify] will create your repository based on this example and host website from `master` branch automatically.
[](https://app.netlify.com/start/deploy?repository=https://github.com/yhatt/marp-cli-example)
### [Vercel]
Push **"Deploy"** button. [Vercel] can choose to create your repository based on this example.
[](https://vercel.com/import/project?template=https://github.com/yhatt/marp-cli-example)
> :information_source: To enable the auto-generated open graph image in Vercel, you have to turn on ["Automatically expose System Environment Variables"](https://vercel.com/docs/concepts/projects/environment-variables#system-environment-variables) in your Vercel project dashboard.
## How to write
For Marp slide deck features, please see the documentation of [Marpit Markdown](https://marpit.marp.app/markdown), [the features of Marp Core](https://github.com/marp-team/marp-core#features), and the default example in [`PITCHME.md`](https://raw.githubusercontent.com/yhatt/marp-cli-example/master/PITCHME.md) for .
You have to install [Node.js](https://nodejs.org/) and run `npm i` at first if you want to write slide deck with [Marp CLI].
### Edit deck
Just edit **[`PITCHME.md`](./PITCHME.md)**!
#### Preview deck
**[Marp for VS Code]** extension is the best partner for writing Marp slide deck with live preview.
**You can try edit and preview on the web now!** Open https://github.dev/yhatt/marp-cli-example/blob/master/PITCHME.md or hit . key on this repository, and install [Marp for VS Code] extension.
[marp for vs code]: https://marketplace.visualstudio.com/items?itemName=marp-team.marp-vscode
#### Preview via CLI
```bash
npm run start
```
It will be opened preview window via installed Google Chrome, and track change of `PITCHME.md`.
### 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](https://marpit.marp.app/theme-css). To use in the deck, please change `theme` global directive.
### Build deck via CLI
```bash
npm run build
```
The built assets will output to `public` folder.
#### Build per assets
```bash
npm run deck # Output static HTML to public/index.html
npm run og-image # Output image for Open Graph to public/og-image.jpg
```
## LICENSE
[WTFPL](/LICENSE)