How to publish a Vue CodeSandbox.io to Github Pages on a custom domain
Here's how I recently published dtrejo.com/colorpreview.
- I started developing with the vue template on codesandbox.io.
- Once I had something I liked and had shown it to a few people, I felt ready to put it on my site.
- I used codesandbox to create a repo named
- My site,
dtrejo.com, is a gh-pages site, which means that
dtrejo.com/$PROJECTNAMEwill resolve to any
$PROJECTNAMEgithub pages site for a repo under
- So I published
github.com/dtrejo/colorpreview, and it will show under
- I cloned the repo locally (github.com/dtrejo/colorpreview) and ran
npm i # I was told i needed these by `npm run build` npm i --save-dev stylus stylus-loader
- I ran
npm run buildto create a
dist/folder, which I could then publish to
- Problem: the paths on the files were wrong, because they expected to be
- Here's the fix for that:
Make sure you edit only the prod configuration.
// for github pages off dtrejo.com/colorpreview/* assetsPublicPath: '/colorpreview/',
npm run buildagain
- move the
distfolder somewhere else, e.g.
dist-temp, just for now
- Clone your repo into
- cd into
dist, delete all the files and dotfiles except for the .git folder
- Copy the files from
dist-tempback into dist
- add all the files and commit and push them to the
git checkout -b gh-pages git add . # repeat from here whenever you rebuild git commit -m 'deploy' git push -u origin gh-pages
- Now check e.g.
https://dtrejo.com/colorpreviewand you'll see your app!
- The most time consuming part of this was waiting for the webpack prod build to finish :(
Thankfully, I spent almost 0 time messing with webpack configs, and developing modern js apps in codesandbox is super painless. Thank you codesandbox.
It will be cool when it can support building/deploying to gh-pages and/or easy setup with a CI system that does the same. I suppose I should have investigated using travis or something to do deploys for me, maybe next time.