Which Static Site Generators (SSGs) can I use with GitLab Pages? How to set up 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?
- TOC
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 | Beautiful Hugo 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!
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!
