Deploy to gh-pages

[isBatak]

Is there a way to make it work with gh-pages branch.
problem is that links in generated index.html are relative from a domain (starts with /)
<link as="script" rel="preload" href="/commons-cb11f4ecc482359b7fd0.js"/>
And gh-pages branch served form https://<username>.github.io/<project-name>/ which will resolve to https://username.github.io/commons-cb11f4ecc482359b7fd0.js and won't work.

Path prefix form gatsby settings should solve the problem https://www.gatsbyjs.org/docs/path-prefix/

[jxnblk]

You should be able to use pathPrefix & --prefix-paths with the Gatsby theme

[isBatak]

🤔 I'm not sure I understand...
I can try to add gatsby-config.js in the root

module.exports = {
  pathPrefix: `/<project-name>`,
}

but where should I put--prefix-paths?
I tried mdx-deck build deck.mdx --prefix-paths but it isn't working :)

[jxnblk]

I think you'll need to use the theme directly instead of using mdx-deck, see https://github.com/jxnblk/mdx-deck/tree/master/packages/gatsby-theme

[beauroberts]

Thanks so much! I was about to open the same issue and submit a PR that was probably overkill. Can you recommend a good place to add this to the docs? Not sure I would have ever discovered it on my own. Happy to submit a PR.

[isBatak]

Maybe add a link to DOCS list under Usage with Gatsby called Deploy to GitHub pages or something similar

[pengx17]

@isBatak
I came up with a gh setup starter here https://github.com/pengx17/slides, you can fork it and try yourself.

@jxnblk I think we could add a new template using my boilerplate to create-deck cli besides the basic one for advanced users.

[fullstackzach]

I was able to deploy my slide-deck to github pages as well! Which is published here https://fullstackzach.com/git-talk/

here's a reference to my working repo. https://github.com/fullstackzach/git-talk

I thought I'd share as another setup reference. Thanks to @pengx17 for the example!

[rdeprey]

@pengx17 I followed your starter here, https://github.com/pengx17/slides, and was able to get my site working on Github Pages, but I noticed that the Theme UI customizations I had made don't end up in the build. Would you have any thoughts on why that might be? I'm not very familiar with Gatsby.

Also, thanks for pointing to the starter repo! It was really helpful.

[tomma5o]

Hello ✋
I ran into this error too,

Yesterday I’ve tried to fix this, and when adding pathPrefix in the gatsby-config.js all the paths seem right.

But (there is always a “but”) there is something in the router that point always at the root (probably the webpack configuration?), have some ideas about that?

BTW I've hardcoded in my bundle the broken paths and now works,
here proof: 😆
http://tomma5o.com/slides/introToReactThreeFiber

[karlhorky]

Edit: ‼️ Do not use ‼️

Both gatsby-plugin-relative-paths and gatsby-plugin-ipfs have big problems with them when using with mdx-deck - but after a lot of experience, problems are to be expected with Gatsby plugins, just in general 😫

Better solution below:

---

Workaround: Using patch-package, you can edit the internal Gatsby config and start command in mdx-deck to use the plugin gatsby-plugin-relative-paths.

After you've installed patch-package, just add the following to a file at patches/mdx-deck+4.1.1.patch and run npm install --force or yarn --force:

diff --git a/node_modules/mdx-deck/cli.js b/node_modules/mdx-deck/cli.js
index 2c3be60..e263b3e 100755
--- a/node_modules/mdx-deck/cli.js
+++ b/node_modules/mdx-deck/cli.js
@@ -76,7 +76,7 @@ const gatsby = async (...args) => {
 
 switch (cmd) {
   case 'build':
-    gatsby('build').then(() => {
+    gatsby('build', '--prefix-paths').then(() => {
       const public = path.join(__dirname, 'public')
       const dist = path.join(process.cwd(), 'public')
       if (public === dist) return
diff --git a/node_modules/mdx-deck/gatsby-config.js b/node_modules/mdx-deck/gatsby-config.js
index 60247e3..3bae469 100644
--- a/node_modules/mdx-deck/gatsby-config.js
+++ b/node_modules/mdx-deck/gatsby-config.js
@@ -4,7 +4,9 @@ const src = process.env.__SRC__
 const dirname = path.dirname(src)
 
 module.exports = {
+  assetPrefix: '__GATSBY_RELATIVE_PATH__',
   plugins: [
+    'gatsby-plugin-relative-paths',
     {
       resolve: '@mdx-deck/gatsby-plugin',
       options: {

This seems to have some problems with images, but it is the solution that works the most out of a bunch that I've tried. Oh Gatsby :(

[karlhorky]

Ah, one more fix is to the URL - to fix the pathname when the slide deck is not in the root. I've opened a PR here: #799

patch-package patch below.

After you've installed patch-package, just add the following to a file at patches/mdx-deck+4.1.1.patch and run npm install --force or yarn --force:

diff --git a/node_modules/@mdx-deck/gatsby-plugin/src/deck.js b/node_modules/@mdx-deck/gatsby-plugin/src/deck.js
index 863562d..ca87c55 100644
--- a/node_modules/@mdx-deck/gatsby-plugin/src/deck.js
+++ b/node_modules/@mdx-deck/gatsby-plugin/src/deck.js
@@ -38,8 +38,9 @@ export default props => {
   }, [index])
 
   React.useEffect(() => {
-    if (props.location.pathname === '/print') return
-    props.navigate('/#' + index, {
+    const pathname = props.location.pathname
+    if (pathname === '/print') return
+    props.navigate(`${pathname}#${index}`, {
       replace: true,
     })
   }, [index])

[karlhorky]

Full Working Workaround with patch-package 🙌 :

Create your pathPrefix programmatically from the path that you pass to the mdx-deck CLI.

You may need to adapt this to your needs. Currently the code below assumes that your slide decks are in a folder called slide-decks and uses /slide-decks/<path> as the Gatsby pathPrefix (which is the path that shows up in the URL)

After you've installed patch-package, just add the following to a file at patches/mdx-deck+4.1.1.patch and run npm install --force or yarn --force:

diff --git a/node_modules/mdx-deck/cli.js b/node_modules/mdx-deck/cli.js
index 2c3be60..e263b3e 100755
--- a/node_modules/mdx-deck/cli.js
+++ b/node_modules/mdx-deck/cli.js
@@ -76,7 +76,7 @@ const gatsby = async (...args) => {
 
 switch (cmd) {
   case 'build':
-    gatsby('build').then(() => {
+    gatsby('build', '--prefix-paths').then(() => {
       const public = path.join(__dirname, 'public')
       const dist = path.join(process.cwd(), 'public')
       if (public === dist) return
diff --git a/node_modules/mdx-deck/gatsby-config.js b/node_modules/mdx-deck/gatsby-config.js
index 60247e3..fcc7806 100644
--- a/node_modules/mdx-deck/gatsby-config.js
+++ b/node_modules/mdx-deck/gatsby-config.js
@@ -2,8 +2,14 @@ const path = require('path')
 
 const src = process.env.__SRC__
 const dirname = path.dirname(src)
+const pathPrefixDirectory = src.match(/slide-decks\/([^/]+)\//)[1]
+
+if (!pathPrefixDirectory) {
+  throw new Error(`Path prefix directory does not match format for path: ${src}`)
+}
 
 module.exports = {
+  pathPrefix: `/slide-decks/${pathPrefixDirectory}`,
   plugins: [
     {
       resolve: '@mdx-deck/gatsby-plugin',

This requires that you also use the other patch from above for @mdx-deck/gatsby-plugin:

diff --git a/node_modules/@mdx-deck/gatsby-plugin/src/deck.js b/node_modules/@mdx-deck/gatsby-plugin/src/deck.js
index 863562d..ca87c55 100644
--- a/node_modules/@mdx-deck/gatsby-plugin/src/deck.js
+++ b/node_modules/@mdx-deck/gatsby-plugin/src/deck.js
@@ -38,8 +38,9 @@ export default props => {
   }, [index])
 
   React.useEffect(() => {
-    if (props.location.pathname === '/print') return
-    props.navigate('/#' + index, {
+    const pathname = props.location.pathname
+    if (pathname === '/print') return
+    props.navigate(`${pathname}#${index}`, {
       replace: true,
     })
   }, [index])