GithubHelp home page GithubHelp logo

Jekyll replacement about gatsby-test HOT 7 CLOSED

mmistakes avatar mmistakes commented on May 19, 2024
Jekyll replacement

from gatsby-test.

Comments (7)

mmistakes avatar mmistakes commented on May 19, 2024 1

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

from gatsby-test.

BernCarney avatar BernCarney commented on May 19, 2024

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

from gatsby-test.

mmistakes avatar mmistakes commented on May 19, 2024

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.

from gatsby-test.

BernCarney avatar BernCarney commented on May 19, 2024

from gatsby-test.

mmistakes avatar mmistakes commented on May 19, 2024

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.

from gatsby-test.

mmistakes avatar mmistakes commented on May 19, 2024

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

from gatsby-test.

mmistakes avatar mmistakes commented on May 19, 2024

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

from gatsby-test.

Related Issues (1)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.