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

https://tkainrad.dev/posts/using-hugo-gitlab-pages-and-cloudflare-to-create-and-run-this-website/

by tkainrad • 7 years ago

55 28 7 years ago

JonLim4• 7 years 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/

jvns2• 7 years 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-bandwidt...). I put Cloudflare in front of my Netlify site because of that.

JonLim4• 7 years 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• 7 years ago

What are your odds of hitting 100GB/month

Assuming you're just hosting your personal blog?

Gys• 7 years 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 ;-)

tkainrad4• 7 years 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• 7 years ago

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

JonLim4• 7 years 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• 7 years ago

For comments you can embed an external service, like Disqus.

abdusco• 7 years ago

For comments, check out https://commento.io

tkainrad4• 7 years ago

Thanks for the input, I will do some reading regarding Disqus VS commento.

tkainrad4• 7 years ago

Op here, I am using Disqus for comments. This is very easy to setup. My template even supports this out-of-the-box. Google Analytics is even easier - the only thing you have to do is set your analytics ID in your hugo site configuration.

infominer2• 7 years ago

I'm really interested to try staticman to run from a pi, but I found a bunch of different ways that I'll experiment with and have listed here.

That page is geared towards GitHub Pages\Jekyll, however a number of the solutions are SSG agnostic.

https://staticman.net/

https://github.com/aioobe/dead-simple-jekyll-comments

https://infominer.id/web-work/posts/github-pages-starter-pac...

the_duke• 7 years 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• 7 years 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".

usgroup• 7 years 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-h...

tkainrad4• 7 years 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• 7 years 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

aleks_me2• 7 years 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-an...

aries19802• 7 years ago

How can you avoid content dupe for search engines?

dredmorbius• 7 years ago

What do you mean?

aries19802• 7 years 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.

infominer2• 7 years 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

Direct Link- Migrating from Jekyll-HPSTR to HPSTR-Hugo:

https://infominer.id/web-work/posts/migrate-jekyll-hpstr-hug...

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

Related Stories