If you are looking to build a free, serverless, Git-based Jamstack blog site, I recommend Hugo + GitLab Pages as the platform. I will explain why, comparing it to other leading static site generator/platform services.
Below is a diagram of the components of the Git-based Jamstack service set. Here I compare the static site generator, which is the heart of Jamstack, and the Git/build/hosting platform services. Note that the optional dynamic content service is not included because I want to compare them as a basic platform.
Static site generator comparison
Compare the top four Site Generators - Jamstack.org.
| Softare | Next.js | Hugo | Gatsby | Jekyll |
|---|---|---|---|---|
| GitHub star count1 | 82068 | 57301 | 52420 | 44171 |
| Theme count2 | 31(unknown) | 126(414) | 231(112) | 325(459) |
| View framework | React | Go template | React | Liquid |
| Build speed(256 pages)3 | 15.11s | 0.11s | 33.22s | 0.89s |
| Page load time suitability(LCP)4 | 25.8% | 70.3% | 41.2% | 76.4% |
| Layout collapse resistance(CLS)4 | 50.0% | 74.2% | 65.7% | 81.1% |
| Web resource size4 | 1838KB | 1025KB | 1739KB | 753KB |
| ├ JS size | 746KB | 177KB | 645KB | 129KB |
| └ CSS size | 14KB | 29KB | 1KB | 23KB |
Opinions may differ as to whether one prefers the clarity of template languages such as Go template and Liquid or the flexibility of programming frameworks such as React, but I think Hugo is the best for the following reasons.
- Fast build. Build speed is very important, both to meet the build time limit set by the build container service and to quickly check the operation and preview submissions after view program changes.
- High core web vitals (Google's viewer experience index). Because it uses more CSS than JS, it can create a site with a high viewer UX, with faster page loading/display and less layout shifting after display.
- A full range of themes are available. Even if you don't know Go template, you can enjoy changing the look of your site by simply choosing your favorite theme.
Comparison of platform services for a serverless, Git-based Jamstack blogging environment
Git + Build + Hosting platform service comparison
This is an all-in-one platform service that allows you to build a stand-alone Git-based Jamstack blog site. Compare the two leading ones.
| Vender | GitHub | GitLab |
|---|---|---|
| Product plan | Free | Free |
| Project type | Pages | Pages |
| Git publicness | Public | Public, Private |
| Git capacity limit | 1GB/repository | 5GB/repository(currently 10GB) |
| Git transfer limit | (unknown) | 10GB/month |
| Build time limit | Unlimited for public repository | 50000 minutes/month for public repository, 400 minutes/month for private repository |
| Build count limit | 10 times/hour | Unlimited |
| Hosting capacity limit | 1GB/project | Unlimited within the project's repository capacity |
| Hosting bandwidth limit | 100GB/month | Unlimited |
| Static site generator template | Jekyll | Gatsby, Hugo, Jekyll, GitBook, Hexo etc. |
| Commercial use | Not acceptable | Acceptable |
GitLab, which supports private repositories and provides templates for various static site generators, is easier for many people to use. Also, if you want to generate revenue through advertisements/affiliates, GitLab is safer for commercial use (advertisements/affiliates may be considered commercial).
Build + Hosting platform service comparison
A build+hosting-only platform service used in conjunction with another Git service. Compare the two leading ones.
| Vender | Netlify | Vercel |
|---|---|---|
| Product plan | Starter | Hobby |
| Build time limit | 300 minutes/month | 6000 minutes/month |
| Build count limit | (unknown) | 100 count/day |
| Hosting capacity limit | Unlimited | (unknown) |
| Hosting bandwidth limit | 100GB/month | 100GB/month |
| Commercial use | Acceptable | Not acceptable |
Assuming no commercial use, Vercel has a build time of 6,000 minutes/month. In cases where GitLab Pages build time of 400 minutes/month is not enough, using Vercel in combination with GitLab Pages may be an option.
Conclusion : Hugo + GitLab Pages is recommended
For a static site generator, Hugo has the fastest build speed and high core web vitality, and for a platform service, GitLab Pages supports private repositories and is safe for advertisements/affiliates, a combination that I think is necessary and sufficient.
The small build time of GitLab Pages is a concern, but it has not been a problem in my experience. When I spent 3 hours on weekdays and 8 hours on weekends for site renewal, the build time was about 250 minutes/month, which is 63% of the maximum build time of GitLab Pages.
Note that the build time varies greatly depending on the theme you use, because of different circumstances such as updating dependencies by git sub moddule, installing additional packages, calling PostCSS from Hugo, and so on. The 250 minutes/month above is based on using Docsy as the theme.
| Theme | Beautiful Hugo | Docsy |
|---|---|---|
| Build time/times | 17s | 45s |
| ├ Docker startup | 9s | 13s |
| ├ Pull from Git | 1s | 13s |
| ├ Hugo preparation | 1s | 11s |
| ├ Hugo execution | 0s | 3s |
| ├ Artifacts registration | 2s | 3s |
| ├ Work area cleared | 1s | 1s |
| └ Others | 3s | 1s |
-
The number of GitHub stars is the value as of 2022/02/27. ↩
-
Number of themes is the value of Jamstack Themes as of 2022/02/27. The numbers in parentheses indicate the number of themes registered at each official site. ↩
-
Build speeds are from Comparing Static Site Generator Build Times. Note that this is the time for the static site generator only and is part of the range that the build container measures as build time (e.g., pull/launch Docker image for build, pull source from Git, launch static site generator...). ↩
-
LCP/CLS/resource amounts, etc. from Jamstack - Web Almanac. ↩
Top comments (0)