Cloudflare vs Netlify for Hugo

support
1

Just researching where I’m going to land for hosting a group of projects. Most of which fit on free tiers.

Wanted to see if anyone had some up-to-date feedback on Netlify vs Cloudflare now that the dust has settled from the release of Pages.

I have no skin in this game. My choice weighed on the moral standing of a company as much as the technology. Netlify was far easier to setup and manage, builds were super fast. Cloudflare seems to have a ton of momentum as a company and their upcoming R2 storage has me pretty excited.

Cloudflare also seems to serve pages on their CDN a little faster, but configuration and fine tuning is far more complex, and the documentation isn’t the best. Not sure this matters, but of course I want the fastest possible load times to convenience ratio.

Is each site / build on a plan with Cloudflare? And Netlify is all my sites on one member account?

If my domain registrar is cloudflare, is there any gotchas pointing that to netlify? Or is netlify best served as an all-in-one package and hosting the domain there is considered best possible practice?

2 Likes
3

You already said everything to be said :slight_smile: Netlify good, Cloudflare good. Cloudflare complicated. Netlify is easy.

No gotchas in pointing domains. Netlify wants you to set your nameservers to its own nameservers, then you can fine-tune everything, or you have to do some form of CNAME setup if you like Cloudflare’s interface better.

CDN-wise both feel the same. I don’t have any knowledge about Cloudflare being faster. Don’t think so. Netlify runs via AWS if I remember correctly.

Moral standing… I don’t know of anything negative. But 2022 will be the year where these providers will be judged on if they are green or energy monsters. So you might find notes about that somewhere.

Cloudflare has more free build time than Netlify.
Cloudflare has more user accounts than Netlify (I think 3 or 5, Netlify just one).

In Netlify you can add your own headers and redirects, in Cloudflare you do that via site setup.

Judgement: Netlify if you want easy setups and don’t use too much build time. Cloudflare if you have a little bit more time. You probably want to set up a release script for both providers in any case.

If I have to hand over the project to an end customer then I prefer Netlify.

5 Likes
4

If you want server-side analytics:

  • Netlify is $9 per month
  • Cloudflare is free
3 Likes
5

I’m pretty happy with Netlify from the “easy to use” department, but while I haven’t done the math, I think they’re on the expensive side.

I was a little grumpy about Cloudflare (for different reasons, most recently when they decided to set NETLIFY=true by default in the build env for Cloudflare Pages, which broke Hugo on Cloudflare …), but they seem to have stepped up their game lately, and from a budget perspective, they seem hard to beat.

2 Likes
7

I appreciate hearing from everyone’s experience.

Originally for my portfolio site, I wanted to let the service handle the image resizing/serving, but it looks like that isn’t cost effective at my scale. I just liked the idea of serving 1 full size image and it all being stored in the cache. It’s not needed by any means, although I’m still wrapping my head where file size limitations may impact how I deploy this over time.

Netlify has been an amazing experience. Probably the best I’ve ever had. Cloudflare was jumping through hoops, build time is slower by 1-2 minutes, documentation isn’t as clear, support assumes you’re a sysadmin. But ultimately it was fun, everything seems to work. Pages just seems, premature as a standalone product.

As it stands right now, I am fond of the idea of Cloudflare being more of an end to end ecosystem and I like what they do for the Internet as a whole especially with the 1.1.1.1 and bandwidth alliance initiatives

vs Netlify, which looks to be a hybrid of public cloud services with an amazing tool built on top of them.

I typically just don’t want to give Amazon and Google my personal money even via proxy when possible. They get that in other ways.

1 Like
8

hi @willduncanphoto

I am not sure if it is fair to compare netlify with cloud flare.

With Netlify you can take your static site and add form functionality and some other options to really make benefit of the static site

but cloud flare is just a CDN at the end you cannot turn your static site to hybrid it will stay what it is.

or did I miss something about Hugo + cloud flare is it actually providing netlify type extras for static sites other than just serving it from CDN and auto deploy etc?

thanks

9

https://developers.cloudflare.com/pages/

You can use some things now, like workers and processing on cloudflares side.

1 Like
10

Any thoughts on the CMS side of things? recently tried to play around with Netlify CMS and ran into some initial problems, and was wondering what cloudflare had to offer.

11

thanks for sharing do you happen to know how can one define HUGO_VERSION : 0.92.1 directly in config.yaml for cloud flare instead of doing it for each site on cloud flare.

thanks

12

It’s my understanding that the build version needs to be in your site deploy settings, that there is no equivalent to netlify.toml

1 Like
13

I think for a CMS, you’re tied to netlify or something like https://forestry.io

14

after reading this form here I gave a try to Hugo with cloud flare pages,

I feel the build was really slow, are these normal Hugo build times on cloud flare almost 15 minutes to deploy 1 build.

Do the Hugo community have some tips & trick on how to optimise Hugo for cloud flare pages. thanks

Screenshot 2022-02-09 at 11.41.51 PM
Screenshot 2022-02-09 at 11.41.51 PM1890×1872 141 KB

15

Why are you executing hugo --gc during deployment.

Garbage collection is meant for cleaning up the local copy of a Hugo project before pushing to a remote git repo.

Also what is the build time of the same project on Netlify?
Just asking for comparison.

16

Hi @alexandros

I follow this example from Hugo docs. Plus I am using image shuffle on every new build images are generated differently on different pages so I thought the --gc is helping me clean the leftover images in resources folder from previous build. Not sure if it is true

on netlify the total time taken is 50% less than cloud flare

12:11:31 AM: ────────────────────────────────────────────────────────────────
12:11:31 AM:   1. Build command from Netlify app                             
12:11:31 AM: ────────────────────────────────────────────────────────────────
12:11:31 AM: ​
12:11:31 AM: $ hugo --gc --minify
12:11:31 AM: Start building sites …
12:11:31 AM: hugo v0.92.1-85E2E862+extended linux/amd64 BuildDate=2022-01-27T11:44:41Z VendorInfo=gohugoio
12:15:36 AM:                    |  EN  | EL
12:15:36 AM: -------------------+------+-----
12:15:36 AM:   Pages            |   17 | 16
12:15:36 AM:   Paginator pages  |    0 |  0
12:15:36 AM:   Non-page files   |    4 |  1
12:15:36 AM:   Static files     |   50 | 50
12:15:36 AM:   Processed images | 1151 | 24
12:15:36 AM:   Aliases          |    1 |  0
12:15:36 AM:   Sitemaps         |    2 |  1
12:15:36 AM:   Cleaned          |    0 |  0
12:15:36 AM: Total in 245002 ms
12:15:36 AM: ​
12:15:36 AM: (build.command completed in 4m 5.1s)
12:15:36 AM: ​
12:15:36 AM: ────────────────────────────────────────────────────────────────
12:15:36 AM:   2. Deploy site                                                
12:15:36 AM: ────────────────────────────────────────────────────────────────
12:15:36 AM: ​
12:15:36 AM: Starting to deploy site from '/'
12:15:36 AM: Creating deploy tree asynchronously
12:15:36 AM: Creating deploy upload records
12:15:39 AM: 1560 new files to upload
12:15:39 AM: 0 new functions to upload
12:17:14 AM: Site deploy was successfully initiated
12:17:14 AM: ​
12:17:14 AM: (Deploy site completed in 1m 38.1s)
12:17:14 AM: ​
12:17:14 AM: ────────────────────────────────────────────────────────────────
12:17:14 AM:   Netlify Build Complete                                        
12:17:14 AM: ────────────────────────────────────────────────────────────────
12:17:14 AM: ​
12:17:14 AM: (Netlify Build completed in 5m 43.2s)
12:17:14 AM: Caching artifacts
12:17:14 AM: Started saving node modules
12:17:14 AM: Finished saving node modules
12:17:14 AM: Started saving build plugins
12:17:14 AM: Finished saving build plugins
12:17:14 AM: Started saving pip cache
12:17:14 AM: Finished saving pip cache
12:17:14 AM: Started saving emacs cask dependencies
12:17:14 AM: Finished saving emacs cask dependencies
12:17:14 AM: Started saving maven dependencies
12:17:14 AM: Finished saving maven dependencies
12:17:14 AM: Started saving boot dependencies
12:17:14 AM: Finished saving boot dependencies
12:17:14 AM: Started saving rust rustup cache
12:17:14 AM: Finished saving rust rustup cache
12:17:14 AM: Started saving go dependencies
12:17:14 AM: Finished saving go dependencies
12:17:15 AM: Starting post processing
12:17:15 AM: Post processing - HTML
12:17:17 AM: Build script success
12:17:22 AM: Post processing - header rules
12:17:22 AM: Post processing - redirect rules
12:17:22 AM: Post processing done
12:17:23 AM: Site is live ✨
12:17:59 AM: Finished processing build request in 6m54.241478549s
17

A clean hugo build takes about a minute on cloudflare, vs 8-14 seconds on netlify until I can see it in the browser.

Build time doesn’t really have any impact on my life though, at least not if its under 10 minutes. Most of the time I would automate it and only look at it if there was a failure.

2 Likes
18

Post the log of that first step on Cloudflare. Those 10 minutes look like it’s loading and installing everything from server to golang to npm each time. Of maybe it’s not 10 minutes the second time you run. If you run “delete cache and build” then that is expected. Of course it takes time.

And regarding your --gc explanation… I have the feeling keeping those image files will not disturb your randomisation. It might even help if a randomly selected image was already processed before.

But your main log time is not explained in either of your logdumps/screenshots. The netlify log definitely has more output before the build line and the cloudflare log should have more verbose logging than just having it say 10 minutes.

So to get back to the answer: Stop deleting the cache and see if your images are still random. Better than assuming that would change anything. The processed images are cached, not the originals, so if the original image changes in a layout then it will be processed. If that original image was already processed then it will be checked from cache.

Also: do you have 1151 DIFFERENT images? If not, then you somehow force Hugo to reprocess lots of images that might be re-used.

Lastly, check the CLI documentation for hugo, there are two switches that tell you which layout file can be cached and optimised.

At the absolutely last comment: If you are on unpaid free packages on both providers there is no guarantee that they don’t somehow slow you down if you deploy n times per hour or give you speedy lines if you need to install external packages (like golang or NPM packages). That might count too. Thats why you should cache as long as you are sure there is nothing breaking your cache.

1 Like
19

I may be wrong but your cloudflare is 50% less than netlify as I see (Total in 119831 ms)?

From my perspective, the reason why I am not giving a try to CloudFlare is only Netlify Forms.
Having simple form submission, implementation and spam protection on Netlify is really great.

20

if it takes 5 times longer on clean Hugo build I guess the difference I see make sense.

when I push the changes to GitHub I want to see if everything is working on cloud flare as it does on local server and this long wait makes things uncomfortable.

full cloud flare log

23:24:57.581	Initializing build environment. This may take up to a few minutes to complete
23:35:36.072	Success: Finished initializing build environment
23:35:36.072	Cloning repository...
23:35:41.336	Success: Finished cloning repository files
23:35:41.557	Installing dependencies
23:35:41.559	Python version set to 2.7
23:35:42.546	v12.18.0 is already installed.
23:35:42.936	Now using node v12.18.0 (npm v6.14.4)
23:35:42.974	Started restoring cached build plugins
23:35:42.977	Finished restoring cached build plugins
23:35:43.083	Attempting ruby version 2.7.1, read from environment
23:35:43.917	Using ruby version 2.7.1
23:35:44.126	Using PHP version 5.6
23:35:44.152	5.2 is already installed.
23:35:44.157	Using Swift version 5.2
23:35:44.157	Started restoring cached node modules
23:35:44.160	Finished restoring cached node modules
23:35:44.299	Installing NPM modules using NPM version 6.14.4
23:35:44.846	npm WARN read-shrinkwrap This version of npm is compatible with lockfileVersion@1, but package-lock.json was generated for lockfileVersion@2. I'll try to do my best with it!
23:35:45.529	npm WARN test-project-59@1.0.0 No description
23:35:45.529	npm WARN test-project-59@1.0.0 No repository field.
23:35:45.530	
23:35:45.530	added 5 packages from 4 contributors and audited 5 packages in 0.714s
23:35:45.533	
23:35:45.533	1 package is looking for funding
23:35:45.533	  run `npm fund` for details
23:35:45.533	
23:35:45.533	found 0 vulnerabilities
23:35:45.533	
23:35:45.543	NPM modules installed
23:35:45.726	Installing Hugo 0.92.1
23:35:46.729	hugo v0.92.1-85E2E862+extended linux/amd64 BuildDate=2022-01-27T11:44:41Z VendorInfo=gohugoio
23:35:46.731	Started restoring cached go cache
23:35:46.734	Finished restoring cached go cache
23:35:46.755	go version go1.14.4 linux/amd64
23:35:46.760	go version go1.14.4 linux/amd64
23:35:46.761	Installing missing commands
23:35:46.761	Verify run directory
23:35:46.762	Executing user command: hugo --gc --minify
23:35:46.800	Start building sites … 
23:35:46.800	hugo v0.92.1-85E2E862+extended linux/amd64 BuildDate=2022-01-27T11:44:41Z VendorInfo=gohugoio
23:37:46.615	
23:37:46.615	                   |  EN  | EL  
23:37:46.615	-------------------+------+-----
23:37:46.615	  Pages            |   17 | 16  
23:37:46.615	  Paginator pages  |    0 |  0  
23:37:46.615	  Non-page files   |    4 |  1  
23:37:46.615	  Static files     |   50 | 50  
23:37:46.615	  Processed images | 1151 | 24  
23:37:46.615	  Aliases          |    1 |  0  
23:37:46.615	  Sitemaps         |    2 |  1  
23:37:46.615	  Cleaned          |    0 |  0  
23:37:46.615	
23:37:46.615	Total in 119831 ms
23:37:46.623	Finished
23:37:46.624	Note: No functions dir at /functions found. Skipping.
23:37:46.624	Validating asset output directory
23:37:47.068	Deploying your site to Cloudflare's global network...
23:37:55.408	Success: Your site was deployed!

no it more or less takes the same time the only difference I see is in the 1st step “Initialising build environment”

no I have around 60 images which are being resized using webp format and also using different .fill .fit based on the image aspect ratio which changes on mobile and desktop etc. so, all good with images suppose to be around that number

yes npm packages are used

hi @idarek I meant the total time it takes the platform to build the site and deploy the Hugo is pretty fast on both platforms but the total time I am referring to is the time it takes to setup the environment, install, build and deploy. I think netlify have given Hugo the attention needed where cloud flare is still playing catch up.

thanks everyone for taking the time

1 Like
21

Hugo docs have no mention of cloud flare pages. I currently use gitignore like this

.DS_Store
resources/
node_modules/
archetypes/
public/

just to keep the repository to what is needed to pull and run hugo

I know netlify make use of public folder so it is better to not have public/ in .gitignore what about cloudfalre

does someone have a .gitignore example for cloud flare one can look at to expand knowledge of what Hugo directories can cloud flare make use or any additional Hugo + cloud flare files one should use to speed up builds etc. Cloud flare only show the Hugo basics and how to deploy but not much is mentioned if it can make use of /public folder etc.

any tips or trick will be greatly appreciated until Hugo update docs and included cloudflare in the list

thanks

22

I mean this:

templateMetrics and templateMetricsHints.

Also: Open a new topic, we went far away from the original of the topic.

What I wrote stays: your hugo run works on 1151 pictures, if you have only 60 real images then it’s redoing them. Post a new topic with your issue and a sample repo so people can look into it. Run Hugo with the CLI parameters above for a start and include those metrics.

Your issue and experience is no indicator to the original topic of this, if one or another is better. If Cloudflare needs 10 minutes to warm up… that can be anything from the free tier being slowed down to some settings somewhere that disable caches.

But like I said: It’s an issue that is basically offtopic for this one and looks very specific.