Jekyll replacement

[mmistakes]

Testing what Gatsby has to offer and how it compares to Jekyll.

Build Speed

• Building thousands of posts
• Optimizing/resizing thousands of images

Markdown

How well does Kramdown written Markdown convert via remark?

• Footnotes (gatsby-remark-numbered-footnotes)
• Reference links in footnotes
• Auto-table of contents, gatsby-remark via tableOfContents in graphQL
• Abbreviations (gatsby-remark-abbr)
• HTML, eg. figure and figcaption elements (remark-captions?)
• Heading IDs
• Apply inline classes/ids

Other

• Permalinks
• Pagination (posts, tags, categories, etc.) (gatsby-paginate)
• Archive pages for categories/tags
• SEO/OpenGraph tags
• Sitemap (gatsby-plugin-sitemap)
• RSS/Atom feeds (gatsby-plugin-feed)
• Comments - pull in YAML data files from Staticman
• BigFoot.js equivalent for cleaner footnote experience
• Custom Jekyll tags (e.g. {% figure %}, {% notice %}, etc. ~> remark-shortcodes?
• Image gallery components added in Markdown files, leveraging gatsby-image?

[BernCarney]

Interested to see how you feel about Gatsby. Trying to decide between the two myself as I overhaul my site.

[mmistakes]

I like Gatsby for a lot of things, but it's still early days for me to replace Jekyll with it (at least on my personal site). If you have a fairly simple site I think it's a no-brainer to use.

What I really like is how you can cleanup your Markdown files and remove a lot of custom tags and includes I'd typically use Jekyll filters for. I really like how Gatsby has transformers to take images written in standard Markdown (eg. ![my image](my-image.jpg) and can convert that into an <img> tag with all the responsive goodness of srcset... generating all of the appropriately sized images as well.

GraphQL is really great and that's another reason that's drawn me to Gatsby. I like the idea of being able to pull in all sorts of content from different sources and then query for what I need in the page generation process.

I don't really use React so that's not that big of a driver for me, but I do like the modern tooling behind Gatsby. Especially its focus on building performat pages... auto critical CSS, responsive images, etc.

What I don't like so much about Gatsby is the extra effort you have to put into doing some simple things Jekyll and other static-site generators take for granted. Gatsby is hands-off on a lot of things leaving it up to you on how you want to implement things. Which is nice, but also a pain if you have no clue how to write the necessary Javascript to do what you want.

For example, permalinks. I haven't really seen any Gatsby starters that handle them as well as Jekyll does. The examples I've seen are you either format your filenames in a certain way, or manually specify the path in front matter.

There's some other minor things missing with remark (its Markdown parser of choice). From what I've learned remark has a lot of plugins to do many of the things I'm used to Kramdown supported, but they're not available to Gatsby yet.

I'm definitely keeping an eye on Gatsby as things get more fleshed out.

[BernCarney]

Thanks for the info! I may have to give it more of a look now since I'll basically be starting from the ground up and fleshing out as I go along. Another generator I've been looking at is Hugo which seems to be on the up-and-up. Similar vision to Gatsby with focusing on performance and scaling but a little different approach using Go. I feel like my biggest hurdle right now is getting a new dev environment set up using Docker on windows since I have no experience with it prior haha.

…

On Sun, Oct 22, 2017 at 10:34 AM Michael Rose ***@***.***> wrote: I like Gatsby for a lot of things, but it's still early days for me to replace Jekyll with it (at least on my personal site). If you have a fairly simple site I think it's a no-brainer to use. What I really like is how you can cleanup your Markdown files and remove a lot of custom tags and includes I'd typically use Jekyll filters for. I really like how Gatsby has transformers to take images written in standard Markdown (eg.  and can convert that into an <img> tag with all the responsive goodness of srcset... generating all of the appropriately sized images as well. GraphQL is really great and that's another reason that's drawn me to Gatsby. I like the idea of being able to pull in all sorts of content from different sources and then query for what I need in the page generation process. I don't really use React so that big of it doesn't really appeal to me, but I do like the modern tooling behind Gatsby. Especially its focus on building performat pages... auto critical CSS, responsive images, etc. What I don't like so much about Gatsby is the extra effort you have to put into doing some simple things Jekyll and other static-site generators take for granted. Gatsby is hands-off on a lot of things leaving it up to you on how you want to implement things. Which is nice, but also a pain if you have no clue how to write the necessary Javascript to do what you want. For example, permalinks. I haven't really seen any Gatsby starters that handle them as well as Jekyll does. The examples I've seen are you either format your filenames in a certain way, or manually specify the path in front matter. There's some other minor things missing with remark (its Markdown parser of choice). From what I've learned remark has a lot of plugins <https://github.com/wooorm/remark/blob/master/doc/plugins.md> to do many of the things I'm used to Kramdown supported, but they're not available to Gatsby yet. I'm definitely keeping an eye on Gatsby as things get more fleshed out. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#1 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ARl6mnybA_qC2s42XzzzKJoGaj5hQNbxks5su26ggaJpZM4PtpdQ> .

[mmistakes]

Hugo is a solid choice and like Jekyll is fully featured and fleshed out.

I'm not as big of a fan of its templating language,but would be willing to look past that because it's extremely fast at building HTML files.

[mmistakes]

Gatsby 2.0.0-beta.4

gatsby-test branch: gatsby-v2

• 950 posts
• paginated home index page
• generated 13,758 images via gatsby-image

Built in ~14 minutes, which is great considering the Jekyll version of this builds in ~18 minutes and only generates 5,180 images.

Unfortunately trying to build paginated category and tag pages using front matter data in the 950 posts breaks the build with an out of memory error.

⠁ createPages
<--- Last few GCs --->

[14984:0000000000345910]   147690 ms: Mark-sweep 1680.8 (1788.3) -> 1680.8 (1742.8) MB, 715.8 / 0.2 ms  last resort GC in old space requested
[14984:0000000000345910]   148382 ms: Mark-sweep 1680.8 (1742.8) -> 1680.8 (1737.8) MB, 691.6 / 0.2 ms  last resort GC in old space requested


<--- JS stacktrace --->

==== JS stack trace =========================================

Security context: 000001B61C2A5879 <JSObject>
    2: push [E:\Users\Michael.Rose\Documents\Repositories\gatsby-test\node_modules\bluebird\js\release\queue.js:40] [bytecode=00000075F0AEA311 offset=156](this=0000008FAE1BADB9 <Queue map = 000000FC0E9C4939>,fn=000002215920BC71 <JSFunction Promise._settlePromiseCtx (sfi = 00000369CD4E4409)>,receiver=000000DD43F7F209 <Promise map = 0000015AB1EF8CE1>,arg=000000DD43F7F2F9 <Object map = 0000037272...

FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory
 1: node_module_register
 2: v8::internal::FatalProcessOutOfMemory
 3: v8::internal::FatalProcessOutOfMemory
 4: v8::internal::Factory::NewUninitializedFixedArray
 5: v8::internal::WasmDebugInfo::SetupForTesting
 6: v8::internal::WasmDebugInfo::SetupForTesting
 7: v8::internal::WasmDebugInfo::SetupForTesting
 8: v8::internal::WasmDebugInfo::SetupForTesting
 9: v8::internal::SharedFunctionInfo::SetScript
10: v8::internal::JSReceiver::class_name
11: v8::internal::SourcePositionTableIterator::Advance
12: v8::internal::operator<<
13: v8::internal::operator<<
14: 000000D3A3E843C1

[mmistakes]

Using the following build script helps with OOM issues:

{
  "scripts": {
    "build": "node --max_old_space_size=7168 node_modules/gatsby-cli build"
  }
}

• ~1,000 posts
• paginated tag and category archive pages
• generated 24,660 images via gatsby-image

built in 3689.322 sec

[mmistakes]

Migrated to Gatsby https://github.com/mmistakes/made-mistakes-gatsby