loading...
Cover image for Learning MDX Deck: Deploy To Netlify

Learning MDX Deck: Deploy To Netlify

davefollett profile image Dave Follett Originally published at davefollett.io on ・4 min read

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:

  1. GitHub
  2. GitLab
  3. Bitbucket

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
  2. Push to create a new GitLab project
  3. 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.

Netlify's deploy new site button

Netlify's deploy new site button

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

Netlify's git provider options

Netlify's git provider options

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

Netlify's git repository selections

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

Netlify's deploy site button

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

Netlify's site deployed overview

🏁 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:

🔜 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.

Posted on by:

davefollett profile

Dave Follett

@davefollett

Husband, father of 👧 👧, and software developer living in the Metro Detroit area. Interested in continuous learning, tinkering, and exploring new technology. LEARN.always

Discussion

pic
Editor guide
 

<3 Netlify!

Stashing this article for my next presentation :)