Skip to content

How publishing works

Publishing in Silex takes your visual design and turns it into a live website, ready for visitors.

When you click Publish, Silex transforms your site into clean HTML and CSS files, sends them to a storage service (like GitLab), and then automatically builds and deploys your site to the web. The entire process is designed to feel seamless — you click a button and your site goes live.

The publishing pipeline: from design to live site

Here's what happens behind the scenes when you publish:

1. You click Publish — The Publish dialog opens. You choose where to store and host your website. For most designers, that's GitLab Pages (free hosting included with GitLab).

2. Silex transforms your design — Your visual design is converted into clean, semantic HTML and CSS. Symbols are resolved into reusable components. CSS Variables are written. Images and media are optimized and prepared.

3. Files are committed to Git — The transformed files (HTML, CSS, assets) are committed to a Git repository. If you're using GitLab, this happens automatically — Silex handles the Git commit for you.

4. GitLab CI runs a build — GitLab detects the new commit and automatically runs a build pipeline. This is where build awesome (powered by Eleventy) enters the picture.

5. Build awesome builds your site — Build awesome is a static site generator. It takes your HTML files and processes them: it applies build awesome shortcodes (if you use them), handles collection pages (pages generated from data), and prepares everything for deployment. Build awesome outputs a public/ folder with the final HTML, CSS, and assets.

6. GitLab Pages deploys — The public/ folder is automatically deployed to GitLab Pages, a free hosting service. Your site is now live at a URL like https://youruser.gitlab.io/yourproject/.

7. Optional: custom domain — You can point a custom domain (e.g., mysite.com) to your GitLab Pages URL using DNS records.

Why Build awesome?

Build awesome is a lightweight build tool that sits between your design files and the live website. While your Silex design is static HTML, build awesome adds powerful features without requiring you to write code:

  • Collection pages — If you bind your site to a CMS (like WordPress), build awesome can generate multiple pages from a single template. For example, one page design for blog posts becomes 10 actual pages — one for each post in your database.
  • Data processing — Build awesome can transform file formats, optimize images, and minify code.
  • Shortcodes — You can insert special blocks in your design that build awesome processes at build time.

For simple static sites without a CMS, build awesome's job is lightweight — it mostly just moves your files into the right folder and prepares them for deployment.

The role of storage and hosting connectors

Silex separates two concepts:

Storage — where your website files and assets live while you're designing (and where they're committed when you publish). The default is GitLab repository.

Hosting — where your live website is served from. Usually the same place — GitLab Pages pulls files from your GitLab repository and serves them.

When you click Publish, you authenticate with your storage service (GitLab). Silex commits your files there. The hosting service (GitLab Pages) then automatically detects the new commit and deploys.

What gets published?

When you click Publish, Silex sends these files to your storage:

  • HTML pages — One per page (e.g., index.html, about.html, contact.html)
  • CSS — Your site's styles, including all the rules you've set in the Style panel
  • Assets — Images, videos, fonts, and any media you've added
  • Data files — If you use a CMS, the data bindings and expressions are stored so build awesome can process them at build time
  • .gitlab-ci.yml — The build configuration for GitLab CI (if using GitLab hosting)
  • Build awesome config — The build awesome configuration so the build runs correctly

Silex handles all of this automatically. You don't need to understand what each file is — just know that everything needed to build and deploy your site is included.

Troubleshooting publication issues

If your site doesn't publish or shows an error:

Check your connection — Make sure you're logged in to your storage service (GitLab) in Silex. The Publish dialog will show the status.

Watch the CI/CD pipeline — After you publish, go to your GitLab project page and click CI/CD → Pipelines. You'll see the build process. If there's an error, the log shows why.

Check file permissions — On GitLab, your project must be public or the CI/CD pipeline must have permission to deploy. Go to Settings → Pages and ensure the build source is set correctly.

Verify the domain — If you set up a custom domain, check that your DNS records are correct and pointing to GitLab Pages.

Learn more

Quiz

Q1: What does build awesome do in the publishing pipeline?

  • A) Converts your Silex design to HTML and CSS
  • B) Hosts your website on the internet
  • C) Builds your site from your HTML files, processes CMS data, and prepares everything for deployment
Answer

C) Builds your site from your HTML files, processes CMS data, and prepares everything for deployment — Build awesome is the build step between your files and deployment. Silex handles the design-to-HTML conversion; GitLab Pages handles hosting.

Q2: When you publish to GitLab, where does Silex store your files?

  • A) Directly on GitLab Pages (the live server)
  • B) In a GitLab repository (Git storage)
  • C) On your local computer
Answer

B) In a GitLab repository (Git storage) — Silex commits your files to a Git repository. GitLab's CI/CD pipeline then automatically builds and deploys from there.

Q3: What happens after you click Publish?

  • A) Your site is immediately live
  • B) Silex commits files to Git, GitLab CI builds the site with build awesome, and GitLab Pages deploys it
  • C) You need to manually run a build command
Answer

B) Silex commits files to Git, GitLab CI builds the site with build awesome, and GitLab Pages deploys it — The entire process is automated. Once you click Publish, Silex handles everything.

Q4: Can you use a custom domain with GitLab Pages?

  • A) No, you must use the default youruser.gitlab.io domain
  • B) Yes, by setting up DNS records and configuring the domain in GitLab Pages settings
  • C) Only if you upgrade to a paid plan
Answer

B) Yes, by setting up DNS records and configuring the domain in GitLab Pages settings — Custom domains are free and available to all users. See the Custom domain page for step-by-step instructions.

Q5: What is the relationship between storage and hosting in Silex?

  • A) They are two completely separate services with no connection
  • B) Storage is where files live during design; hosting is where the live website is served from. Usually both are GitLab.
  • C) Storage and hosting are the same thing
Answer

B) Storage is where files live during design; hosting is where the live website is served from. Usually both are GitLab. — Silex separates these concepts so you can use different services if needed, though most users use GitLab for both.

Edit this page on GitLab