5 ms·

Using Hugo, Gitlab Pages, and Cloudflare to Create and Run a Free Static Website

55 points by tkainrad 7y ago

usgroup 7y ago
So far as I can see github pages supports ssl termination with let’s encrypt certificates all by itself: https://github.blog/2018-05-01-github-pages-custom-domains-https/ https://github.blog/2018-05-01-github-pages-custom-domains-h...
- tkainrad 7y ago
  Interesting, seems that this is indeed an advantage of GitHub Pages. With GitLab Pages, you have to setup Let's Encrypt certificates for custom domains manually.
- iamnothere 7y ago
  Let's Encrypt for GitLab pages should be coming in the next release though (finally). It's been in the works forever. Edit: source https://gitlab.com/gitlab-org/gitlab-ce/issues/28996 https://gitlab.com/gitlab-org/gitlab-ce/issues/28996
JonLim 7y ago
Guess it's having connectivity issues? Haven't read the post yet, but any advantages to using Gitlab Pages and Cloudflare with Hugo over using Netlify? My personal blog[0] is Hugo + Netlify, and it's been a pretty great experience, so I'm always curious about alternatives! (I'm not a fan of the Netlify CMS though.) [0] https://jonlim.ca/ https://jonlim.ca/
- jvns 7y ago
  the main advantage for me is that Cloudflare's free tier has no bandwidth limit. Netlify's free tier has a 100GB/month limit (https://www.netlify.com/blog/2019/02/26/netlify-and-bandwidth/ https://www.netlify.com/blog/2019/02/26/netlify-and-bandwidt...). I put Cloudflare in front of my Netlify site because of that.
  - JonLim 7y ago
    Ah, you know for some reason I was thinking Cloudflare was also doing some hosting, and now I realize I shouldn't make comments on things without having consumed a coffee to start the day. I also have Cloudflare in front of my site, but that was there before I made the switch, and it's great!
  - jopsen 7y ago
    What are your odds of hitting 100GB/month Assuming you're just hosting your personal blog?
    - jvns 7y ago
      I used about 350GB in the last month according to Cloudflare (over about 3.5 million requests), probably because I serve a lot of 5-10MB PDFs. Being able to not worry about bandwidth fees for a medium sized personal site is really amazing.
  - Gys 7y ago
    Or instead spend some time to optimize your website a little (like not hosting yourself standard stuff like jquery, Bootstrap and such, compress images, etc). So you can serve 10s of 1000s visitors without hitting a 100 GB free tier ;-)
    - detaro 7y ago
      You're responding to someone running one of the more well-known developer blogs and hosting PDFs, it's not exactly surprising she might need a bit more bandwidth.
    - doliveira 7y ago
      That does not follow, though. It's not like people are generally optimizing their bundle sizes when they are in services where that costs money like AWS or there's a quota like Netlify. Not having a limit liberates you to deliver other types of content and you have something less to worry about. It does not imply not worrying about optimizing your users' experience
- tkainrad 7y ago
  One advantage with GitLab Pages is that you don't even need any other service. You have everything in one (free) place (repository, CI/CD, static site hosting, ...). Cloudflare is already only for convenience. Page speed for a static site should be fine also without it. I use Cloudflare mainly for simplifying HTTPS setup and page forwarding rules.
bilal4hmed 7y ago
What is a good way to get analytics and comments in such a set up ?
- JonLim 7y ago
  Not OP, but you can embed Google Analytics (or Tag Manager) into your Hugo template, and it's fairly straightforward to do. Comments I'm not entirely sure of, because I never wanted them on my site in the first place!
  - pmtarantino 7y ago
    For comments you can embed an external service, like Disqus.
    - JonLim 7y ago
      Agree! And I'm sure it's also another script to add to the templates, at the footer of a post template, probably?
- abdusco 7y ago
  For comments, check out https://commento.io https://commento.io
  - tkainrad 7y ago
    Thanks for the input, I will do some reading regarding Disqus VS commento.
    - KajMagnus 7y ago
      Another Disqus alternative you maybe haven't heard about? https://www.talkyard.io/blog-comments https://www.talkyard.io/blog-comments (this too with privacy, no ads etc. I'm developing it. Feedback & feature wishes = welcome)
- tkainrad 7y ago
deleted 7y ago
[deleted]
the_duke 7y ago
I used to rely on Github + Cloudflare, but now services like netlify.com are a a simpler/better alternative. EG netlify gives you a Docker based build environment + CDN, all you need is a a Github/lab repo with a config file.
- mikro2nd 7y ago
  Gitlab gives you a build environment with a choice of several static website builders. Personally I'm using Hexo rather than Hugo and it "just works".
aleks_me2 7y ago
I have also chosen gitlab, hugo and netlify. Netlify because they have the nice feature to use forms in the site. My setup is described in this post. https://www.me2digital.com/blog/2017/09/move-from-wp-hugo-and-netlify/ https://www.me2digital.com/blog/2017/09/move-from-wp-hugo-an...
aries1980 7y ago
How can you avoid content dupe for search engines?
- dredmorbius 7y ago
  What do you mean?
  - aries1980 7y ago
    Gitlab (this is where you host the content) Gitlab Pages and Cloudflare are public-facing. If e.g. Google starts caching, for Gitlab Pages you might be able to set the canonical tag to point to the CloudFlare-served hostname, but I am not aware how to do it for the Gitlab UI.
infominer 7y ago
Nice Work! I'd will check out GitLab pages soon! I just wrote a guide on how to migrate from Jekyll-HPSTR to HPSTR-Hugo. This in-detail guide should help anyone switch from Jekyll to Hugo or even Hugo to Jekyll. I didn't notice this before posting: https://news.ycombinator.com/item?id=20070203 https://news.ycombinator.com/item?id=20070203 Direct Link- Migrating from Jekyll-HPSTR to HPSTR-Hugo: https://infominer.id/web-work/posts/migrate-jekyll-hpstr-hugo/ https://infominer.id/web-work/posts/migrate-jekyll-hpstr-hug...

55 points by tkainrad 7y ago

So far as I can see github pages supports ssl termination with let’s encrypt certificates all by itself: https://github.blog/2018-05-01-github-pages-custom-domains-https/ https://github.blog/2018-05-01-github-pages-custom-domains-h...

tkainrad 7y ago
Interesting, seems that this is indeed an advantage of GitHub Pages. With GitLab Pages, you have to setup Let's Encrypt certificates for custom domains manually.
iamnothere 7y ago
Let's Encrypt for GitLab pages should be coming in the next release though (finally). It's been in the works forever. Edit: source https://gitlab.com/gitlab-org/gitlab-ce/issues/28996 https://gitlab.com/gitlab-org/gitlab-ce/issues/28996

JonLim 7y ago

Guess it's having connectivity issues? Haven't read the post yet, but any advantages to using Gitlab Pages and Cloudflare with Hugo over using Netlify? My personal blog[0] is Hugo + Netlify, and it's been a pretty great experience, so I'm always curious about alternatives! (I'm not a fan of the Netlify CMS though.) [0] https://jonlim.ca/ https://jonlim.ca/

jvns 7y ago
the main advantage for me is that Cloudflare's free tier has no bandwidth limit. Netlify's free tier has a 100GB/month limit (https://www.netlify.com/blog/2019/02/26/netlify-and-bandwidth/ https://www.netlify.com/blog/2019/02/26/netlify-and-bandwidt...). I put Cloudflare in front of my Netlify site because of that.
- JonLim 7y ago
  Ah, you know for some reason I was thinking Cloudflare was also doing some hosting, and now I realize I shouldn't make comments on things without having consumed a coffee to start the day. I also have Cloudflare in front of my site, but that was there before I made the switch, and it's great!
- jopsen 7y ago
  What are your odds of hitting 100GB/month Assuming you're just hosting your personal blog?
  - jvns 7y ago
    I used about 350GB in the last month according to Cloudflare (over about 3.5 million requests), probably because I serve a lot of 5-10MB PDFs. Being able to not worry about bandwidth fees for a medium sized personal site is really amazing.
- Gys 7y ago
  Or instead spend some time to optimize your website a little (like not hosting yourself standard stuff like jquery, Bootstrap and such, compress images, etc). So you can serve 10s of 1000s visitors without hitting a 100 GB free tier ;-)
  - detaro 7y ago
    You're responding to someone running one of the more well-known developer blogs and hosting PDFs, it's not exactly surprising she might need a bit more bandwidth.
  - doliveira 7y ago
    That does not follow, though. It's not like people are generally optimizing their bundle sizes when they are in services where that costs money like AWS or there's a quota like Netlify. Not having a limit liberates you to deliver other types of content and you have something less to worry about. It does not imply not worrying about optimizing your users' experience
tkainrad 7y ago
One advantage with GitLab Pages is that you don't even need any other service. You have everything in one (free) place (repository, CI/CD, static site hosting, ...). Cloudflare is already only for convenience. Page speed for a static site should be fine also without it. I use Cloudflare mainly for simplifying HTTPS setup and page forwarding rules.

bilal4hmed 7y ago

What is a good way to get analytics and comments in such a set up ?

JonLim 7y ago
Not OP, but you can embed Google Analytics (or Tag Manager) into your Hugo template, and it's fairly straightforward to do. Comments I'm not entirely sure of, because I never wanted them on my site in the first place!
- pmtarantino 7y ago
  For comments you can embed an external service, like Disqus.
  - JonLim 7y ago
    Agree! And I'm sure it's also another script to add to the templates, at the footer of a post template, probably?
abdusco 7y ago
For comments, check out https://commento.io https://commento.io
- tkainrad 7y ago
  Thanks for the input, I will do some reading regarding Disqus VS commento.
  - KajMagnus 7y ago
    Another Disqus alternative you maybe haven't heard about? https://www.talkyard.io/blog-comments https://www.talkyard.io/blog-comments (this too with privacy, no ads etc. I'm developing it. Feedback & feature wishes = welcome)
tkainrad 7y ago

deleted 7y ago

[deleted]

the_duke 7y ago

I used to rely on Github + Cloudflare, but now services like netlify.com are a a simpler/better alternative. EG netlify gives you a Docker based build environment + CDN, all you need is a a Github/lab repo with a config file.

mikro2nd 7y ago
Gitlab gives you a build environment with a choice of several static website builders. Personally I'm using Hexo rather than Hugo and it "just works".

aleks_me2 7y ago

I have also chosen gitlab, hugo and netlify. Netlify because they have the nice feature to use forms in the site. My setup is described in this post. https://www.me2digital.com/blog/2017/09/move-from-wp-hugo-and-netlify/ https://www.me2digital.com/blog/2017/09/move-from-wp-hugo-an...

aries1980 7y ago

How can you avoid content dupe for search engines?

dredmorbius 7y ago
What do you mean?
- aries1980 7y ago
  Gitlab (this is where you host the content) Gitlab Pages and Cloudflare are public-facing. If e.g. Google starts caching, for Gitlab Pages you might be able to set the canonical tag to point to the CloudFlare-served hostname, but I am not aware how to do it for the Gitlab UI.

infominer 7y ago

Nice Work! I'd will check out GitLab pages soon! I just wrote a guide on how to migrate from Jekyll-HPSTR to HPSTR-Hugo. This in-detail guide should help anyone switch from Jekyll to Hugo or even Hugo to Jekyll. I didn't notice this before posting: https://news.ycombinator.com/item?id=20070203 https://news.ycombinator.com/item?id=20070203 Direct Link- Migrating from Jekyll-HPSTR to HPSTR-Hugo: https://infominer.id/web-work/posts/migrate-jekyll-hpstr-hugo/ https://infominer.id/web-work/posts/migrate-jekyll-hpstr-hug...