Webpack doesn't currently support hot-reloading new files added to a context. When you add a new file, restart the gatsby develop process and your new page will show up.
Make sure you also including the trailing slash in your URLs:
- Bad:
http://localhost:8000/foo - Good:
http://localhost:8000/foo/
A neat performance feature supported by Gatsby is inlining your CSS in
the <head> of each HTML page. Not referencing external style sheets
significantly speeds up the initial render of your site by avoiding
another round trip to your server as the initial render of a page is
blocked by external CSS files. This is a best practice suggested by
many groups including Google's AMP
project.
Each of the official starters supports this pattern. The code to make it happen is in brief:
// In your html.js
let css
// In development, css is injected by Javascript by the Webpack style-loader.
if (process.env.NODE_ENV === 'production') {
css = <style dangerouslySetInnerHTML={{ __html: require('!raw!./public/styles.css') }} />
}
// Then in your <head>
{css}CSS modules are support by default for all files with .module.(css|less|scss|sass) extension.
// Uses CSS Modules
import './my-component.module.css'
// Doesn't use CSS Modules
import './main.css'You can modify Babel's behavior as normal by either providing a .babelrc in
your site's root directory or by adding a "babel" section in your site's
package.json. You can find out more about how to configure babel
here.
Gatsby by default will use your Babel configuration over the default if it can find it. Gatsby will automatically add react-hmre to your Babel config during development.
Note that if you want to use babel-plugin that is not provided by Gatsby, you will have to also add it to your package.json. You can use any babel-plugin that Gatsby packs as a dependency without having to add it to your own package.json:
- babel-plugin-add-module-exports
- babel-plugin-transform-object-assign
- babel-preset-es2015
- babel-preset-react
- babel-preset-stage-0
If you need to change the loader to be something completely custom. You will have to define your own webpack loader by following the steps described above.
Gatsby uses markdown-it to parse markdown files into HTML. By default Gatsby ships with only basic markdown support. You can extend the syntax (e.g. for mathematical equations) by installing markdown-it plugins.
If you want to do this you will need to use a custom markdown loader. You can
copy the one provided in the default starter here.
Add the relevant packages to your dependencies, including the markdown-it
plugins that you want to use and enable them with md.use(require('markdown-it-plugin-name'))
within the markdown loader file.
Gatsby supports automatically prefixing links with its prefixLink helper function.
First set the prefix in your config file e.g. linkPrefix = '/your-project'
Then simply import the function and run all links in your site thorough it e.g.
import { prefixLink } from 'gatsby-helpers'
prefixLink('/')
// During development this will return "/"
// When deployed to example.github.io/your-project/ this will return "/your-project/"Then finally, when building your site, run gatsby build --prefix-links
The built site is now in /public. Th
3526
ese files need copied to your
gh-pages branch and committed and pushed. You can do this manually or
use the handy gh-pages CLI tool.
Both the sample sites are deployed to github pages and use link prefixing. Read their source for more help: documentation/blog.
Jekyll has a comprehensive import tool for these and many other website tools.
Once your pages are converted to markdown, change the file extensions to
.md from the .markdown the tool outputs and then use them in your
site.