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:
- Add existing project to GitHub
- Push to create a new GitLab project
- Import code to Bitbucket from an existing project
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:
- My deployment URL for this MDX Deck site can be found here:
🔜 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.
Top comments (1)
<3 Netlify!
Stashing this article for my next presentation :)