gatsby-starter-blog on glitch.com
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
public
src
.babelrc
.env.development
.gitignore
.glitch-assets
README.md
gatsby-config.js
gatsby-node.js
package.json
watch.json

README.md

glitch-gatsby-starter-blog

gatsby-starter-blog boilerplate running on glitch.com.

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 github.com/gatsbyjs/gatsby/issues/1515 for further discussion.


Glitch.com?

"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>/index.md
    • 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 glitch.com/edit/#!/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

Conclusion

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


Changelog

17-7-18:

17-7-12:

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}.glitch.me/__webpack_hmr&reload=true`
    config._config.output.publicPath = `https://${process.env.PROJECT_DOMAIN}.glitch.me/`
    // 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"