Skip to content
Switch branches/tags
Go to file

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time


gatsby-starter-blog boilerplate running on

Remix on Glitch

Enabling HMR

glitch by default restarts & reloads the app server on code edits. This prevents webpack Hot Module Replacement from working. To fix:

  • If you are "remixing" anonymously, open the URL of your running app in a new browser tab. DON'T use the "Show Live" button in the editor.
  • If you have an account, click circular user icon in upper-right of window > turn off "Refresh App on Changes".

Also check for further discussion.

"Glitch" by Fog Creek Software:

With working example apps to remix, a code editor to modify them, instant hosting and deployment - anybody can build a web app on Glitch, for free.

Terrific, we can all stop doing dev the old fashioned way with our cumbersome "laptops" and "terminals" and "operating systems" etc etc 👴

But can it run the mighty gatsby-starter-blog?! :trollface: 💪

UX Impressions

  • in-browser glitch editor can be used create/edit markdown files in src/pages/<date>-<post-name>/
    • but can't (easily) upload image files to src/pages/ folders
    • because images etc are supposed to be put into glitch's assets folder, which is served by cdn
    • maybe someone will make a gatsby-source-glitch-assets plugin to help
  • authoring content & uploading / hosting media is possible, but not as simple off-the-shelf
  • gatsby/glitch live-reloads changes quickly, but currently running in dev mode
  • in general, glitch seems designed to make collaborative editing & instant hosting of app painless

Implementation Notes

Will gatsby-starter-blog work on glitch? I wasn't able to get a direct import of the repo working (see broken app at!/gatsby-lobster), but after stripping out sharp plugins & the fonts (which did work initially, mysteriously), it's running.

What's not working:

  • gatsby-plugin-sharp - sharp won't compile
  • gatsby-transformer-sharp
  • typeface-merriweather - see components/Bio.js
  • typeface-montserrat
  • gatsby-remark-images - not sure if it will work / needed
  • gatsby-remark-copy-linked-files - not sure if needed

Not sure how useful it is to configure gatsby to use markdown source files in the pages directory when it is hosted here on glitch. I think most users would prefer gh-pages since then the content is revisioned local + github locations :) And gatsby can deal with copying images/assets in the markdown folders into their proper places.

So for gatsby-on-glitch, it probably makes more sense to check out the gatsby-source-contentful plugin

for getting images etc stored in the assets folder, I guess we need a gatsby-source-glitch-assets plugin - we could base it on the glitch assets-lib example: "Assets.js allows you to use relative paths to serve your assets on Glitch."

Future Directions


For newcomers to gatsby, glitch-gatsby-starter-blog is potentially a painless way to explore running gatsby code with minimal friction.




got webpack hot module replacement working in dev mode

exports.modifyWebpackConfig = ({ config, stage }) => {
  if (stage === `develop`) {
    config._config.entry.commons[1] = `/app/node_modules/webpack-hot-middleware/client?path=https://${process.env.PROJECT_DOMAIN}`
    config._config.output.publicPath = `https://${process.env.PROJECT_DOMAIN}`
    // console.dir(config, {depth: 3})
  return config

trying to figure out how to run gatsby in production mode. glitch kitchen-sink-reference project shows how.

Tried the following in package.json, didn't work...

"postinstall": "gatsby build",
"production": "gatsby serve -p $PORT"


gatsby-starter-blog on




No releases published


No packages published