6 ms·

Ask HN: Where do you host images for your blog or landing pages?

• tyingq 4y ago
  >use GitHub repositories for hosting images I don't know the current state of doing this, but it has been problematic in the past because they don't return the right content-type headers.
• demindiro 4y ago
  I scp them to some folder on my VPS and point nginx to it. I also have ffmpeg installed on the VPS if some images are too big for my taste.
• gitgud 4y ago
  I use imgur most of the time, it's super simple and hasn't failed me yet
• ochronus 4y ago
  On the same server, my Ghost instance manages it. I have Cloudflare before it all. I wish I'd get to outgrow this setup
• taubek 4y ago
  When it comes to GitHub repo, what does the URL of the image look like? Is some kind of hash added to the filename? At the moment I use media files from my WordPress blog to store images.
  • chatmasta 4y ago
    Try using the URL you get from dragging an image into a comment box (you don't even need to submit the comment). It's not a long-term solution but it works.
  • stephanheijl 4y ago
    I just add them to an img folder in my Github repository and it is then served as part of the Github page. Just using `src=img/picture.jpg` works fine.
    • taubek 4y ago
      I've used systems like Docusarus[1] (for building my project documentation). It is build from my github project. And I end up with URLs on my server like https://mysite.com/docs/assets/images/connect-to-app-02c6a40c0df420da9d87b62c5f96c9ab.png https://mysite.com/docs/assets/images/connect-to-app-02c6a40... But I've never tried to link directly to source file, not builded version on my server. [1] https://docusaurus.io/ https://docusaurus.io/
• deleted 4y ago
  [deleted]
• mattw2121 4y ago
  I guess I'm behind the times, but I just store them on the file system where I am serving the website from.
  • bombcar 4y ago
    This is what I’ve done - if you want to be a bit more protective you can do some things to make sure they’re not hotlinked from elsewhere, but that’s up to you.
    • FerretFred 4y ago
      Me too. I took it one step further: I don't have an image-heavy site, so I degrade the resolution to make images as small as possible, then embed them in the HTML as base64 strings. Very portable!
      • bombcar 4y ago
        There are tools that will do this for you - some of the "static site" generators IIRC, or the minifiers. You can even base64 the thumbnails and still have "click through" to the source image if desired.
  • mdasen 4y ago
    If one is worried about scale, it's pretty easy to throw them behind a CDN like Cloudflare or Bunny.net. They'll cache the static file for you so that your web server isn't always delivering it. I used to upload assets for apps to S3 to be served from there when I just started thinking that my CDN is going to be taking the vast majority of hits for static files so why should I be adding a step to my deploy process?
    • gwbas1c 4y ago
      > If one is worried about scale, it's pretty easy to throw them behind a CDN... But at that point, why don't you just put your entire site into a CDN? I would think a landing page / blog would be mostly static?
• chrismorgan 4y ago
  In the same place. Why anything else? Much simpler, and no extra HTTPS connection to make, and probably within ε on file delivery performance (though that’s heavily subjective). There’s almost never any reason to do it any other way.
• subpixel 4y ago
  I have an entire repo set up to share images via iPic - I just select an image locally and with a keyboard command updload it and add the url to my clipboard https://github.com/toolinbox/iPic https://github.com/toolinbox/iPic
• janeway 4y ago
  The image is placed in my website directory and then my static site generator, jekyll, uses a relative path tag to generate the path for the final compiled website on my machine. This static website is then uploaded to github. If I was uploading elsewhere, the workflow would be the same. Only the relative path is hardcoded and the domain therefore doesn’t matter. The true filepath is to some github link in my “_site” directory, but neither I nor the user see it. Static sites are very easy to manage in this way.
• ianpurton 4y ago
  I commit to a github repo and that gets deployed to cloudflare pages. https://pages.cloudflare.com/ https://pages.cloudflare.com/ I use Zola the static site generator. My repo is here https://github.com/purton-tech/cloak/tree/main/www https://github.com/purton-tech/cloak/tree/main/www
• cheptsov 4y ago
  Just curious, what do you use for hosting the blog or landing page itself? For example, we use GitHub Pages for hosting the landing page. So for hosting images, we use GitHub itself and it mostly works. For the blog, we currently use Substack, but thinking of maybe moving it to GitHub Pages too. FYI, here is our repo: https://github.com/dstackai/dstack https://github.com/dstackai/dstack
• Trufa 4y ago
  It’s probably not the cool answer but aws s3.
• marginalia_nu 4y ago
  If you aren't getting hundreds of requests per second, and the resources aren't huge, there's really no reason why you can't host them yourself. Especially with webp, the bandwidth is negligible. If you're really worried, cloudflare can help with caching. FWIW, this is served off domestic broadband with cloudflare caching: https://search.marginalia.nu/explore/random https://search.marginalia.nu/explore/random It's survived the HN front-page, despite being a bit of a pathological case since the images are random out of a pool of tens of thousands. Images are also larger than they appear visually. Native res is like this: https://search.marginalia.nu/screenshot/187889 https://search.marginalia.nu/screenshot/187889
• Apreche 4y ago
  That depends. Some files are files that are part of the web site. They are put there by the developer(s) of the web site. Things like maybe the logo image in the header, or that cool rotating flaming skull in the footer. These files just go on the file system of the web server. Some files are user uploads. A person writing a blog post wants to upload some images to be inserted into that blog post. For these sorts of files I just use whatever object storage system makes the most sense given the circumstances S3, GCS, etc.
• beemaestro 4y ago
  Okay this might be an overkill but my images are on CloudFront. I store them in S3, which get served through the CDN. It’s practically free at my scale. The actual blog is a GitHub pages site.
• gh123man 4y ago
  You can go surprisingly far with a $5/mo Digital Ocean droplet and the Cloudflare free tier. Just host your website the boring way, put CF in front of it and they will cache and serve all of your static content for free.
  • bradley_taunt 4y ago
    This is a good workflow and pretty flexible. I would actually recommend NearlyFreeSpeech for hosting and BunnyCDN for caching etc. Turns that $5/month to less than $3/month for low traffic sites.
    • metadat 4y ago
      Saving twelve bucks a year is, well, $12 per year. Better than nothing.
  • Ptchd 4y ago
    or $5/year with a cheap VPS https://www.lowendstock.com/ https://www.lowendstock.com/
    • xhrpost 4y ago
      Haven't seen this site, thanks for posting. Interesting seeing so many boxes using NAT for IPv4, wonder how that gets shared, just one person gets port 80 and too bad for everyone else?
  • kingsloi 4y ago
    +1, I use DO's App platform to host 3 static nuxt.js sites, and because they're all static, it's all under their free tier, which is a huge plus!
  • sofixa 4y ago
    Why not use CloudFlare Pages directly? It avoids you having to deal with and maintain a droplet, beings the $5/month to $0/month, reduces attack surface, makes scaling "magic", etc. The only caveat is that your site needs to be fully static, but it probably already is anyways.
• pocketsand 4y ago
  S3 has no minimum fee. For a small site they'll probably send you a 4 cent invoice each month. You can then throw cloudflare in front of the S3 box for free. Alternatively, as others have said, you can just plop them on the server and call it a day.
  • 0xbadcafebee 4y ago
    Let's see what the pricing calculator says. Assuming you stored 1GB of content, with 4MB images, and you transferred out 40GB of content each month: 1 GB per month / 0.00390625 GB average item size = 256.00 unrounded number of objects 1 GB x 0.0230000000 USD = 0.02 USD 100,000 GET requests in a month x 0.0000004 USD per request = 0.04 USD (S3 Standard GET requests cost) 40 GB x 0.0007 USD = 0.028 USD (S3 select returned cost) 0.023 USD + 0.04 USD + 0.028 USD = 0.09 USD (Total S3 Standard Storage, data requests, S3 select cost) Internet: 40 GB x 0.09 USD per GB = 3.60 USD Total: $3.69 And for 1TB stored & transferred & 1M GETs each month: 1,024 GB per month / 0.00390625 GB average item size = 262,144.00 unrounded number of objects 1024 GB x 0.0230000000 USD = 23.55 USD 1,000,000 GET requests in a month x 0.0000004 USD per request = 0.40 USD (S3 Standard GET requests cost) 1,024 GB x 0.0007 USD = 0.7168 USD (S3 select returned cost) 23.552 USD + 0.40 USD + 0.7168 USD = 24.67 USD (Total S3 Standard Storage, data requests, S3 select cost) 262,144 number of objects x 0.000005 USD = 1.31072 USD (Cost for PUT, COPY, POST requests for initial data) Internet: 1024 GB x 0.09 USD per GB = 92.16 USD Total: $118.14 Assuming Cloudflare had a significant cache hit rate, you'd save a decent chunk of change.
• qudat 4y ago
  for https://prose.sh https://prose.sh we use https://imgs.sh https://imgs.sh
• brycewray 4y ago
  Have done both “local” (site host) and Cloudinary. With static sites in particular, a lot of it depends on your preferred site-building tool. The Hugo static site generator does a pretty impressive job of managing and processing images out of the box while, with most other SSGs, you’ll need to wrangle plugins and packages and you won’t get the same high performance. Thus, apart from Hugo sites, Cloudinary may end up being a better solution — although you’re right about its UI, and I’d say the same thing about its documentation. Even if you do use Hugo, it may be better to go with Cloudinary so you can avoid having to keep a lot of images in the site repo.
• jasode 4y ago
  Some meta-commentary about some of the replies ... so far, there are 4+ replies suggesting the obvious step of storing in the images on the same web server host. But I notice the submitter is software engineer ex-Stripe, ex-Yelp, ex-Adobe... so I'm guessing he already knows that simple setup but doesn't locally host gifs & vids for technical reasons (bandwidth?, latency?). Maybe recalibrate the suggestions based on the above. (Or the submitter can further clarify why hosting local image assets instead of using a CDN is not feasible in his particular case so the crowdsourced answers can be more productive to his goals.) EDIT add: Sure, obvious technical answer may be applicable but some replies have a bit of condescension that doesn't seem appropriate and respectful of this person's tech background.
  • uptown 4y ago
    Sometimes the best answer is still the obvious one, regardless of the audience.
  • dewey 4y ago
    Seems even more appropriate to reply with the most obvious answer and not some overengineered / "will it scale" setup then.
  • akshaykumar90 4y ago
    OP here. All answers are good. I was looking for a lay of the land and appreciate all the options people are chipping in with.
    • jasode 4y ago
      >I was looking for a lay of the land Why & how did you arrive at the decision to use Cloudinary to host images for your Savory website instead of locally hosting them yourself? Have you looked at your Cloudinary analytics dashboard to quantify what magnitude of bandwidth you're dealing with? Are you currently on Cloudinary's free tier plan or paid? Since you mentioned the Github image hack, are you looking for a zero cost hosting of images? The more datapoints and constraints you provide as background, the better the advice in your replies will be.
• iamflimflam1 4y ago
  My site is generated by Jekyll and then I just sync to S3 and serve it all through CloudFront - works pretty well https://atomic14.com https://atomic14.com
• sidcool 4y ago
  Scene7 or Cloudflare or AWS Cloudfront.
• orangepurple 4y ago
  Vultr object storage
• BurningPenguin 4y ago
  On the same server i have my website on. It's easy to implement and i don't have headaches due to GDPR. Performance is good, if it's properly optimized. I also add Hotwire Turbo if necessary.
• dreen 4y ago
  I just commit them to the git lfs (in my case via netlify). Larger sites benefit from actual asset management systems though.
• colbyfayock 4y ago
  Colby from Cloudinary here what framework / tooling are you using? Sorry you haven't had a great experience with the UI, but if you stick around with Cloudinary, I would suspect there's a lot of solutions where the processing / uploading can be automated, such as using a Cloudinary plugin within a headless CMS (like Contentful) where you just use a URL or plugins like the Gatsby plugin: https://github.com/cloudinary-devs/gatsby-transformer-cloudinary https://github.com/cloudinary-devs/gatsby-transformer-cloudi... (only supports images so far) If you're on the Netlify side of things, I have a plugin there that automates images https://github.com/colbyfayock/netlify-plugin-cloudinary/ https://github.com/colbyfayock/netlify-plugin-cloudinary/ There's a ton others too: https://cloudinary.com/documentation/cms_ecommerce_integrations https://cloudinary.com/documentation/cms_ecommerce_integrati... https://cloudinary.com/documentation/partner_built https://cloudinary.com/documentation/partner_built Hope that helps, happy to brainstorm other ideas as well!
• Archelaos 4y ago
  My own Web-site is mostly static, so images (I don't use video) are in the file system. For customer's it is sometimes more complex: The setup of dynamic Web-site content happens in a database application. The images are stored in their raw format in a database and transfered to the file system of the Web-site in the right dimensions and scale when their associated data-set (such as a specific product information, etc.) is to be published. This makes it easy to reuse the images in other contexts, e.g. PDFs, or to adapt to changes in the Web-site layout, e.g. low resolution/high compression for mobile.
• a6chris 4y ago
  Your title mentions blogs - if you use self hosted WordPress and their Jetpack plugin (free), you get to use their CDN for free and seamlessly. Likely this is also already the case for WP.com
• g5095 4y ago
  On GH :)
• HHalvi 4y ago
  I have been super impressed by the latency of the images hosted on Imagekit. Used to host images on Cloudinary, found Imagekit to be faster for my visitors + more affordable. I currently have 2 accounts with them, one for my personal website/blog on free tier and a paid tier for landing pages for my employer. Highly recommend them, no affiliations, just a super happy customer!
• ifqwz 4y ago
• Alcha 4y ago
  I use [DigitalOcean Spaces](https://www.digitalocean.com/products/spaces https://www.digitalocean.com/products/spaces) with a custom domain fronting the assets. It's fairly cheap and easy to use.
• 0xbadcafebee 4y ago
  GitHub Pages works for non-commercial purposes. You get 1GB to serve and max file size is 100MB. Soft bandwidth limit 100GB/month, with some rate limiting. Best to put CloudFlare in front (actually I can't get CloudFlare to work with Google Pages, their cache never expires so no new pages show up through CloudFlare) CloudFlare Pages (https://pages.cloudflare.com/ https://pages.cloudflare.com/) has a free plan with 100 sites, unlimited requests, unlimited bandwidth. Maximum file size 25MB, 20,000 files, 100 domains, 100 custom headers, 2,000 static redirects, 100 dynamic redirects. (https://developers.cloudflare.com/pages/platform/limits/ https://developers.cloudflare.com/pages/platform/limits/) Unknown if there's a commercial restriction.
  • TrueGeek 4y ago
    The first option is what I'm using. CloudFlare in front of GitHub Pages. It seems to work well, my blog gets literally dozens of visits a month and it's never gone down.
• madmax108 4y ago
  Simple hack for one-off (or a few) images. Go to any Github repo and create a new Issue, drag and drop your image into the issue-box. Github uploads it to their server and adds a markdown link for the image, which has a perfectly usable *.githubusercontent.com url that you can pick and use anywhere. I use this way more often than I should TBH. YMMV Note: Only do this for images you have backed up elsewhere (heck, in git itself is fine). This is purely to prevent having to spend any $$$ on hosting/CDN whatever
• pkrumins 4y ago
  On the blockchain of course!
• D13Fd 4y ago
  I do Amazon S3. Not because I have any particular love for Amazon, but because it was the default in the original template I used, and it was easy to set up and almost free. It has worked well. Most months I'm under the free tier usage limit, and the largest bill I've seen so far was less than $5. My hosting provider (Render) requires an add-on for file storage, so last I checked AWS S3 free tier was the cheaper option.
• labarilem 4y ago
  My blog is built on Github pages. I don't have lots of images, so they're hosted in the same repo of my website.
• egamirorrim 4y ago
  Check out upload.io - it was a refreshingly simple take on Cloudinary etc for me
  • davidnewland 4y ago
    Looks pretty cool, the UI is certainly a lot better than Cloudinary's.