Learning MDX Deck: Deploy To Netlify
Tags: react, mdx, slides, netlify
Published: 2019-05-21 12:38:44

---
title: Learning MDX Deck: Deploy To Netlify
published: true
tags: react,mdx,slides,netlify
canonical_url: https://davefollett.io/2019/05/20/mdx-deck-deploy-to-netlify/
cover_image: https://davefollett.io/2019/05/20/mdx-deck-deploy-to-netlify/cover-learning-mdx-deck-deploy-to-netlify.jpg
series: Learning MDX Deck
---

In the previous article, [Learning MDX Deck: Getting Started](/davefollett/mdx-deck-getting-started-4hn3), I showed how to get up and running with [MDX Deck](https://github.com/jxnblk/mdx-deck). MDX Deck is a tool for creating presentation deck websites using [MDX](https://mdxjs.com/). But what good is creating a super sweet presentation if you can’t easily show it off to your friends? Let’s take the exact code from [Learning MDX Deck: Getting Started](/davefollett/mdx-deck-getting-started-4hn3) and deploy it to [Netlify](https://netlify.com).

## 1️⃣ Create a Git repository

Netlify has a few deployment options, but my favorite is [Continuous Deployment](https://www.netlify.com/docs/continuous-deployment/). Netlify will watch your Git repository and when it detects a change, it will build and redeploy your site automatically. Netlify currently supports the following Git providers for Continuous Deployment:

1. [GitHub](https://github.com/)
2. [GitLab](https://gitlab.com)
3. [Bitbucket](https://bitbucket.org/)

How to setting up a Git repository is well-documented online, so I will not cover it here but I will provide a link for all three options:

1. [Add existing project to GitHub](https://help.github.com/en/articles/adding-an-existing-project-to-github-using-the-command-line)
2. [Push to create a new GitLab project](https://docs.gitlab.com/ee/gitlab-basics/create-project.html#push-to-create-a-new-project)
3. [Import code to Bitbucket from an existing project](https://confluence.atlassian.com/bitbucketserver/importing-code-from-an-existing-project-776640909.html)

## 2️⃣ Add a build script

Now that the project is setup in Git, we need to add the following build script to our `package.json` file.

```
"build": "mdx-deck build deck.mdx",
```

The build script will export our presentation deck as a static HTML page with JS bundle that Netlify can deploy. With this change, the `scripts` section of `package.json` will now look like this.

```
"scripts": {
    "start": "mdx-deck deck.mdx",
    "build": "mdx-deck build deck.mdx",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
```

Running the build script can now be done with the following command.

```
npm run build
```

The results of the build script will be placed into a newly created `dist/` folder so make sure you include it in your `.gitignore` file. Also, make sure to push these changes to your repository.

## 3️⃣ Add a netlify.toml file

Netlify uses an option configuration file to guide building and deploying sites. For this project it’s not strictly required, but it will make setting up Netlify easier in the next section. Our configuration file contains just two options; the build command and what directory to publish. Just place the following lines into a file named `netlify.toml` in the root of the project.

```
[build]
  command = "npm run build"
  publish = "dist/"
```

If you are interested in reading more about `netlify.toml` you can find it [here](https://www.netlify.com/docs/netlify-toml-reference/) in Netlify’s documentation.

## 4️⃣ Setup Netlify and deploy

Now that we have our project in a Git repository with a build script and Netlify configuration, we are ready to deploy to Netlify. If you don’t have an account, go ahead and sign up [here](https://app.netlify.com/signup). Once logged in, on the sites tab, click the [new site from Git](https://app.netlify.com/start) button located in the upper right of the page.

![Netlify's deploy new site button](https://davefollett.io/2019/05/20/mdx-deck-deploy-to-netlify/netlify-new-site-from-git.png)
<figcaption>Netlify's deploy new site button</figcaption>

Next, select your Git provider: GitHub, GitLab, or Bitbucket.

![Netlify's git provider options](https://davefollett.io/2019/05/20/mdx-deck-deploy-to-netlify/netlify-select-git-provider.png)
<figcaption>Netlify's git provider options</figcaption>

With your Git provider selected, now select your repository. Note, you _may_ have to configure your Git provider to have access to your repository in order to select it for deployment.

![Netlify's git repository selections](https://davefollett.io/2019/05/20/mdx-deck-deploy-to-netlify/netlify-select-git-repository.png)
<figcaption>Netlify's git repository selections</figcaption>

The last step to deploying is to select our build options. Because we included a `netlify.toml` configuration file, all the build options will already be set and all we need to do is click the `Deploy site` button at the bottom of the page.

![Netlify's deploy site button](https://davefollett.io/2019/05/20/mdx-deck-deploy-to-netlify/netlify-deploy-site.png)
<figcaption>Netlify's deploy site button</figcaption>

After approximately a minute, the next screen will indicate that your site has been deployed and provide its URL as shown in the next screenshot.

![Netlify's site deployed overview](https://davefollett.io/2019/05/20/mdx-deck-deploy-to-netlify/netlify-site-deployed.png)
<figcaption>Netlify's site deployed overview</figcaption>

## 🏁 Conclusion

Now that you have Netlify configured to deploy from your Git repository, anytime you make a change to the master branch on your Git Provider, Netlify will automatically rebuild your MDX Deck site and deploy it.

Reference Links:

- All code used for this article can be found on GitHub here:
  - [https://github.com/davefollett/learning-mdx-deck-getting-started](https://github.com/davefollett/learning-mdx-deck-getting-started)
- My deployment URL for this MDX Deck site can be found here:
  - [https://learning-mdx-deck-getting-started.davefollett.io](https://learning-mdx-deck-getting-started.davefollett.io)

## 🔜 Up Next

Next in the `Learning MDX Deck` series we will explore MDX Deck’s built in layout options for each slide. I’ll add a link here when it’s published.