Jun 17, 2016 - Marcia Ramos

SSGs Part 3: Build any SSG site with GitLab Pages

Which Static Site Generators (SSGs) can I use with GitLab Pages? How to setup GitLab CI to build my SSG site? Where can I find some examples?

If these questions ring a bell, this series of posts is for you! We prepared three articles around the same theme "Static Site Generators (SSGs)".

This is Part 3: Build any SSG site with GitLab Pages, where we'll show you some examples of SSGs using distinct GitLab CI configurations, so you can understand it and adjust it to your needs.

Read through the previous posts:

Note: For this series, we assume you are familiar with web development, curious about Static Site Generators, and excited to see your site getting deployed with GitLab Pages.


What's in this page?


Build any SSG site with GitLab Pages

In the previous articles of this series on Static Site Generators, we explained the difference between static and dynamic websites, and provided a general overview on Modern SSGs. Now let's understand how can we use them with GitLab Pages.

You can use GitLab Pages to host and build any SSG available! You can also use custom domains, SSL/TLS certificates, create as many sites as you want, and deploy your site from private repositories. And that's all for free on GitLab.com! If you are not familiar with GitLab Pages, you might want to read the article "Hosting on GitLab.com with GitLab Pages", where you will find this information and a detailed step-by-step guide to walk you through the process. See also the quick start guide and the official documentation for further information.

SSGs examples

On the following tables you can explore some examples of SSGs sites built with GitLab Pages and hosted on GitLab.com. Some of them came from contributions from our community. We'll be very happy to have your contribution too!

The key for building your site with GitLab Pages is the GitLab CI configuration file, called .gitlab-ci.yml.

To make GitLab CI work for this specific purpose is necessary creating a job called pages, and generate your compiled site to a public folder. Everything else is adjustable to your needs.

On the tables below, there are some examples we've gathered for you, organized by their respective environments.

Environment: Ruby

SSG Website URL Project URL Configuration
Jekyll Default Theme Source on GitLab Building Jekyll 3.1.2 with Bundler
Middleman Default Theme Source on GitLab Default + Bundler ENV=PRODUCTION
Nanoc Default Theme Source on GitLab Default
Octopress Default Theme Source on GitLab Default

Environment: Node JS

SSG Website URL Project URL Configuration
Hexo Hueman Theme Source on GitLab Default + test job
Brunch Default Skeleton Source on GitLab Default
Harp Default Theme Source on GitLab Default
Metalsmith Default Theme Source on GitLab Default
GitBook Default Theme Source on GitLab Default

Environment: Python

SSG Website URL Project URL Configuration
Pelican Default Theme Source on GitLab Default
Lektor Default Theme Source on GitLab Default
Hyde Default Theme Source on GitLab Default + test job
Nikola Default Theme Source on GitLab Default

Environment: Go Lang

SSG Website URL Project URL Configuration
Hugo Lanyon Theme (Default) Source on GitLab Default

More Examples

On the following GitLab groups you can find even more examples.

Group Environment SSGs
Pages (Official) Ruby, Node, Python, etc. All SSGs presented on this post
Jekyll Themes Ruby Jekyll
Middleman Themes Ruby Middleman
Themes and Templates Miscellaneous Miscellaneous

Note: these themes, templates, and SSGs were casually chosen, and listed on this post to provide you with some distinct GitLab CI configurations.

FAQ: which SSG should I get started with?

This is a tricky question, and there is no easy answer for it. Perhaps the best way to choose an SSG is installing three or four of them locally and give them a try. This list might help too.

However, if you don't know where to start, and you never used any Static Site Generator before, I suggest you to get started with Jekyll. Why?

  • It's very well documented
  • If you search the web for information you'll find plenty
  • Its template engine is rigid. Meaning, there's no chance to mess up the code
  • It is easy to learn

But this was merely a suggestion. There are better ways to choose. For example, if you are a programmer, you could choose the SSG according to the language it's written in (Ruby, JavaScript, Python, etc), picking up one you're familiar with. If you are a PHP developer, you might want to choose an SSG with a PHP template engine. And so on.

Getting Help

If you need some help regarding GitLab Pages on GitLab.com, feel free to use one of our channels. You can also open an issue on the Pages group.

Conclusion

With this post we end up this series on SSGs. Hopefully, we got you inspired to start working with Static Site Generators, and by now you comprehend what they are and how they work.

You are more than welcome to contribute with new SSGs, or with your cool themes and templates, to the groups mentioned earlier.

If you already work with an SSG, please let us know which one you prefer (click on the image below). It's a quick survey that will only take a minute, and your participation means a lot to us! Share it with your friends too!

Survey - SSGs on GitLab Pages

Don't you have an account on GitLab.com yet? Let's create one! Remember, we can use GitLab Pages to build any SSG for us and host it for free on GitLab.com!

Follow @GitLab on Twitter and stay tuned for updates!

For the latest and most detailed news follow @gitlab on Twitter. Future blog posts suggestions.

Install GitLab in 2 minutes

With Ubuntu, Debian, CentOS and Raspbian packages or from source

Install GitLab Now

Try GitLab Enterprise Edition risk-free for 30 days.

No credit card required. Have questions? Contact us.