gatsbyjs / gatsby Goto Github PK
View Code? Open in Web Editor NEWThe best React-based framework with performance, scalability and security built in.
Home Page: https://www.gatsbyjs.com
License: MIT License
The best React-based framework with performance, scalability and security built in.
Home Page: https://www.gatsbyjs.com
License: MIT License
A docker image that autobuilds and serves site. Leverages ONBUILD to build Gatsby site from src on building Docker image. Would include preconfigured Nginx + Gatsby ONBUILD instruction.
Any advice on where to start on generating sitemap either during gatsby serve or build ?
Thinking of using gatsby for my blog: https://johnbrett.me/
There's a number of dependencies from when the examples/starters were in this repo. They're fattening the install unnecessarily.
File webpack.config.coffee
assumes too much about how npm layouts modules when installing them. npm 3.x is radically different than npm 2.x in this regard and so gatsby doesn't work.
Suggestion is to use require.resolve
instead of relying on ../../node_modules
paths (webpack-dev-server entry points). resolveLoader.modulesDirectories
also needs a tweak.
Need to be able to fire off page views to google analytics.
Not supported on older versions of node.
As suggested by @andreypopp, it'd be very useful to be able to build a Gatsby site from a single JSX file. This would probably be built on top of #20 i.e. the base Gatsby \site would expect a single component to be passed in. The base site would setup the HTML structure etc. and render the react component inside of it.
$ gatsby build
Generating static html pages
failed at generating static html pages
{ [Error: Cannot find module "components/page-layout"] code: 'MODULE_NOT_FOUND' }
$ echo $?
0
This should return something other than zero.
First, I apologize if this is due to my own ignorance and not knowing enough about how webpack works, but I cannot seem to load any css files.
In html.jsx
I have:
import './css/style.css';
Whenever I run gatsby serve
, I get an "Illegal token error" on the css file. I've also seen "Unexpected reserved word" errors where javascript reserved words are used in the CSS (like @import). It doesn't appear that it is recognizing it as a css file, but the webpack loaders look good and I've seen the same thing done in gatsby examples.
Am I missing something obvious here?
When copying assets to the public folder, optimize images.
On remote servers you can set the host but this breaks serving the JS and other assets atm.
There are potentially dozens of different file types people would want to use with Gatsby + many different ways to prepare Markdown and other file formats. To simplify (code + conceptually) adding or modifying how files are loaded/wrapped, we should create a plugin architecture + break out existing markdown/html loaders/wrappers into plugins that are installed separately from Gatsby core.
If there is a folder in pages
that includes only images (no jsx/md/html pages), the build crashes with an error Cannot read property 'path' of undefined
:
> mkdir pages/images
> touch pages/images/foo.jpg
> gatsby build
Generating static html pages
Compiling production bundle.js
Copying assets
/Users/ville/Projects/gatsby/lib/utils/post-build.coffee:37
newPath = parsePath(page.path).dirname + parsed.basename;
^
TypeError: Cannot read property 'path' of undefined
at copy (/Users/ville/Projects/gatsby/lib/utils/post-build.coffee:31:16)
at /Users/ville/Projects/gatsby/node_modules/async/lib/async.js:358:13
at /Users/ville/Projects/gatsby/node_modules/async/lib/async.js:239:13
Every site needs a loadContext
function to create a Webpack context (Webpack doesn't let you create require contexts with variables meaning loadContext
has to have a hardcoded path which means it must have a known relationship with the pages source directory.).
Right now you need an app.js
file for this function. We should make that optional by auto-writing a .gatsby.js
file in the root directory of a site. This would also remove a potential roadblock from people creating a Gatsby site + allow us to easily change/add to this loadContext
function.
Perhaps just look for metadata like ignore: true
?
E.g. from a markdown file's frontmatter?
Steps to reproduce:
npm install -g [email protected]
gatsby new gatsby-test
cd gatsby-test
gatsby build
Generating static html pages
failed at generating static html pages
{ [Error: Cannot find module "wrappers/md"] code: 'MODULE_NOT_FOUND' }
As Hexo does.
Gatsby
installed successfully (no node-gyp
errors), but creating a new site is throwing the error at me. I'm using Windows 10. Reinstalling gatsby
didn't fix it.
Full error:
C:\Users\aniru>gatsby new test
module.js:339
throw err;
^
Error: Cannot find module 'C:\Users\aniru\AppData\Roaming\npm\node_modules\gatsby\bin\cli-new'
at Function.Module._resolveFilename (module.js:337:15)
at Function.Module._load (module.js:287:25)
at Function.Module.runMain (module.js:467:10)
at startup (node.js:134:18)
at node.js:961:3
Currently someone can visit a new page and if they've cached the old bundle.js in their browser, after loading that, the new page will go blank as the old bundle.js doesn't know yet about it.
Hello, I know how to support sass files using webpack, but I am little confused if/how that is supported in gatsbyjs as webpack config seems buried in source of gatsby.
Thanks in advance for help.
Just a quick FYI, we've been working on a similar tool known as Antwar for a few months. Interestingly there's a huge amount of overlap in terms of functionality and goals.
Perhaps we could find some way to collaborate or share code even? That might be beneficial to both projects.
UPDATE: We'll be using https://www.npmjs.com/package/gh-pages
Very excited by this, thanks for providing it!
Hit a problem when following the tutorial, to reproduce:
$ npm i -g gatsby
$ gatsby new docs-site gh:gatsbyjs/gatsby-starter-documentation
// gives the following stack trace:
Error: Cannot find module '../lib/utils/init-starter'
at Function.Module._resolveFilename (module.js:338:15)
at Function.Module._load (module.js:280:25)
at Module.require (module.js:364:17)
at require (module.js:380:17)
at Object.<anonymous> (/usr/local/n/versions/0.10.25/lib/node_modules/gatsby/bin/new.coffee:2:15)
at Object.<anonymous> (/usr/local/n/versions/0.10.25/lib/node_modules/gatsby/bin/new.coffee:1:1)
at Module._compile (module.js:456:26)
at Object.loadFile (/usr/local/n/versions/0.10.25/lib/node_modules/gatsby/node_modules/coffee-script/lib/coffee-script/register.js:16:19)
at Module.load (/usr/local/n/versions/0.10.25/lib/node_modules/gatsby/node_modules/coffee-script/lib/coffee-script/register.js:45:36)
at Function.Module._load (module.js:312:12)
at Module.require (module.js:364:17)
at require (module.js:380:17)
at Object.<anonymous> (/usr/local/n/versions/0.10.25/lib/node_modules/gatsby/bin/gatsby-new.js:4:1)
at Module._compile (module.js:456:26)
at Object.Module._extensions..js (module.js:474:10)
at Module.load (module.js:356:32)
at Function.Module._load (module.js:312:12)
at Function.Module.runMain (module.js:497:10)
at startup (node.js:119:16)
at node.js:906:3
Any tips to debug / fix ?
Better match for intent of message. Deprecate old command and print depreciation notice and actually remove at 1.0
Markdown has standardized on frontmatter. Don't want to force frontmatter on other file types e.g. JSX.
My proposal for the post-build is that we create a special metadata gathering webpack entry file that pulls in all pages and grabs their metadata. Each loader would need to return a metadata
key.
The Gatsby website should have a list of starters.
This would be derived from a YAML file within this repo.
People can create a PR to add their starter.
There should be tests which:
These two tests will ensure the quality of starters remain high without a lot of manual intervention.
Perhaps when a starter test fails, auto email the author?
Setup http://greenkeeper.io/ for each community starter?
Perhaps run install + build tests weekly and then generate a screenshot from that? On a failure, create a PR on their repo to update. If they don't fix by the following week, comment them out of the community listing until they've fixed themselves. If they fix their starter before the following week, they can manually create a PR against Gatsby to re-add themselves.
This might simplify some things + make code more efficient as it doesn't have to scan all files in order to find some subset of files (e.g. all files owned by a template).
Broccoli would be a source of inspiration / potentially code if we move this direction.
Via #6. Should have the ability to add Surge as an option for deployment.
Right now, surge token
will give you a token (example) you could use in your config as mentioned in the other issue, but you wouldn’t want it committed to repo, so not sure that’s the best approach. For Surge at least, account creation is implicit, if you aren’t logged in already you will be prompted, so that isn’t necessarily an issue.
Just installed a fresh copy of gatsby, and created a blog. When I try to run gatsby serve
I get this error:
/usr/local/lib/node_modules/gatsby/lib/utils/serve.js:2
import Hapi from 'hapi';
^^^^^^
SyntaxError: Unexpected reserved word
Seems like babel isn't running for some reason. Any clues?
I haven't dig much about it, does gatsby have built in support for pagination and categories/tags?
i.e.
http://blog.ghost.org/page/2/
http://blog.ghost.org/tag/writing/
That would sum up in two special routes that accept a wildcard * after the main path.
/page/*/
/tag/*/
While playing with gatsy I also found beneficial to leave the main route "themable", I mean
/page/_template.jsx
/tag/_template.jsx
As it would work for WordPress (use the custom page if found, or pick the default one).
Another different scenario is the 404 page that should be supported by React Router.
Thank you for this wonderful script
➜ nikblog gatsby serve
/usr/local/lib/node_modules/gatsby/lib/utils/serve.js:25
HTML = require(`${__dirname}/../isomorphic/html`);
^
SyntaxError: Unexpected token ILLEGAL
at exports.runInThisContext (vm.js:73:16)
at Module._compile (module.js:443:25)
at Module._extensions..js (module.js:478:10)
at Object.require.extensions.(anonymous function) [as .js] (/usr/local/lib/node_modules/gatsby/node_modules/babel-core/lib/api/register/node.js:214:7)
at Module.load (/usr/local/lib/node_modules/gatsby/node_modules/coffee-script/lib/coffee-script/register.js:45:36)
at Function.Module._load (module.js:310:12)
at Module.require (module.js:365:17)
at require (module.js:384:17)
at Object.<anonymous> (/usr/local/lib/node_modules/gatsby/bin/serve.coffee:5:9)
at Object.<anonymous> (/usr/local/lib/node_modules/gatsby/bin/serve.coffee:1:1)
at Module._compile (module.js:460:26)
at Object.loadFile (/usr/local/lib/node_modules/gatsby/node_modules/coffee-script/lib/coffee-script/register.js:16:19)
at Module.load (/usr/local/lib/node_modules/gatsby/node_modules/coffee-script/lib/coffee-script/register.js:45:36)
at Function.Module._load (module.js:310:12)
at Module.require (module.js:365:17)
at require (module.js:384:17)
at Object.<anonymous> (/usr/local/lib/node_modules/gatsby/bin/gatsby-serve.js:5:1)
at Module._compile (module.js:460:26)
at Object.Module._extensions..js (module.js:478:10)
at Module.load (module.js:355:32)
at Function.Module._load (module.js:310:12)
at Function.Module.runMain (module.js:501:10)
at startup (node.js:129:16)
at node.js:814:3
Can you please help me fix this?
If someone wants to grab this, this would be an easy first PR.
It'd be interesting though if not in a Gatsby directory to auto-scan above and below the current working directory for Gatsby sites (glob for a gatsby.config.* file?) This is potentially problematic as could lead to opening 1000s of files. Not sure if node-glob can limit how many directories you look into.
There's also finding modules like https://www.npmjs.com/package/find which might be a better choice. Have to investigate cross-platform compatibility.
Here's a quick braindump of directions I've been thinking.
posts/a-long-voyage-across-the-southern-seas/index.md
) to auto-generate the react-router configuration.There's a lot of static site generators out there and I've played with several and written my own for my blog. They're all pretty much the same and not particularly interesting. I think a React.js based SSG can push the state of the art in three ways — easy no-page transitions, react.js style components, and leveraging the growing react.js ecosystem of tools and components.
Most stuff on the web are sites not apps. And react.js components as just as powerful for sites as they are apps so a kickass tool for building react.js sites would be very valuable.
I'm trying to use stylus and just prepend the loader when requiring the file since there's no way to alter the webpack config:
require('!css!stylus!./css/main.styl')
but it appears gatsby only searches its own node_modules
rather than node_modules of the project itself. Any way around this?
This also brings up a good question about implementing a way to extend the webpack config with other plugins and things.
Once we upgrade to ReactRouter 1.0, leverage Webpack's code splitting to dynamically load sections of large sites e.g. docs/*
or blog/*
http://webpack.github.io/docs/code-splitting.html
remix-run/react-router#755
As brought up in this discussion
Woah. Just had an idea. What do you think about the idea of "composable" websites? Gatsby is already doing this to some extent as it has fallbacks for most critical files you need but you can override them easily but we could extend that concept further to something like Object.assign(Gatsby, website_base, actual_website).
So in practice how this would work is there'd be a base documentation site hosted on github. When you want a new docs site you'd just set the github url for the base site and then start adding markdown files. Anything else you'd want to modify could be set in the site config file.
Frequently when creating a site you'll want to reference pages elsewhere e.g. on index pages or menu sections.
To simplify this, it'd be nice if you could create ad-hoc page indexes something like:
const blogIndex = createIndex('/blog/*.md', {sort: (page) => page.meta.date})
// Now on an index page.
latestBlogPosts = blogIndex({first: 10})
// Render links...
Right now every time you build, every html file is changed due to the React ids changing. Is this avoidable somehow? It'd be nice if the only changed files in the public directory where files that had actually changed in src.
Which means Gatsby should have defaults for all other necessary files.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.