Using Hugo, Gitlab Pages, and Cloudflare to Create and Run a Free Static Website(tkainrad.dev)

55 pointsby tkainradvor 7 Jahren28 comments

tkainrad.dev

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/

8 comments

aries1980vor 7 Jahren

How can you avoid content dupe for search engines?

dredmorbiusvor 7 Jahren

What do you mean?

aries1980vor 7 Jahren

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.

JonLimvor 7 Jahren

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/

jvnsvor 7 Jahren

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.

JonLimvor 7 Jahren

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!

jopsenvor 7 Jahren

What are your odds of hitting 100GB/month

Assuming you're just hosting your personal blog?

jvnsvor 7 Jahren

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.

Gysvor 7 Jahren

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 ;-)

detarovor 7 Jahren

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.

doliveiravor 7 Jahren

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

tkainradvor 7 Jahren

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.

bilal4hmedvor 7 Jahren

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

infominervor 7 Jahren

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...

tkainradvor 7 Jahren

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.

JonLimvor 7 Jahren

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!

pmtarantinovor 7 Jahren

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

JonLimvor 7 Jahren

Agree! And I'm sure it's also another script to add to the templates, at the footer of a post template, probably?

abduscovor 7 Jahren

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

tkainradvor 7 Jahren

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

KajMagnusvor 7 Jahren

Another Disqus alternative you maybe haven't heard about? https://www.talkyard.io/blog-comments (this too with privacy, no ads etc. I'm developing it. Feedback & feature wishes = welcome)

[deleted]vor 7 Jahren

the_dukevor 7 Jahren

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.

mikro2ndvor 7 Jahren

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".

usgroupvor 7 Jahren

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...

iamnotherevor 7 Jahren

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

tkainradvor 7 Jahren

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.

aleks_me2vor 7 Jahren

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...

infominervor 7 Jahren

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...