Learning MDX Deck: Deploy To Netlify

In the previous article, Learning MDX Deck: Getting Started, I showed how to get up and running with MDX Deck. MDX Deck is a tool for creating presentation deck websites using MDX. 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 and deploy it to Netlify.

1️⃣ Create a Git repository

Netlify has a few deployment options, but my favorite is 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:

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:

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 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. Once logged in, on the sites tab, click the new site from Git button located in the upper right of the page.

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

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.

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.

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.

🏁 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
My deployment URL for this MDX Deck site can be found here:
- 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.

Blog