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.
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:
- Add existing project to GitHub
- Push to create a new GitLab project
- Import code to Bitbucket from an existing project
Now that the project is setup in Git, we need to add the following build script to our
"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.
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.
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.
If you are interested in reading more about
netlify.toml you can find it here in Netlify’s documentation.
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.
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.
- All code used for this article can be found on GitHub here:
- My deployment URL for this MDX Deck site can be found here: