CI/CD - Zeit Now

   
   
 git  ssg  deploy  
 devops  
Article Series

CI/CD for SSG Articles.

Where to Discuss?

Local Group

Table of Content

Preface

Goal: Deploy SSG using Zeit Now.

Most of the explanation doesn’t require coding at all. Using figures below as an explanation would be sufficient.

After explanation for dummies, there will be some kind of DevOps configuration using now.json.

Official Example

1: Prepare Your Repository

now.sh has the similar concept like netlify.com.

Zeit Now only build repo to static site, but doesn’t host the repository itself. So you need to create your own repositry.

Where ?

You can create git repository using

Practice

Now you can make repository, with any name, for example:

  1. Jekyll:

  2. Eleventy:

  3. Hexo:

  4. Pelican:

  5. Hugo:

Notice that the last one have different url pattern.

Bitbucket: Project Page Repository

This is just an example, you should use your username account. and you should use your own repository.

2: Using Dashboard

This step doesn’t require coding at all. Using figures below as an explanation would be sufficient.

First, login to <now.sh>. And find your dashboard at:

Zeit Now: Dashboard

The next step is pretty straightforward.

Import Project

You should see th import project button.

Zeit Now: Import Project

Click the button.

Zeit Now: From Repository

Choose from repository provider. You may choose either github, gitlab or bitbucket. In this case, I’m using bitbucket.

Zeit Now: Import from Bitbucket

Select repository from my bitbcuket account. In this case, I’m using zeit-11ty. I’m going to use eleventy SSG for the first Zeit Now example.

Zeit Now: Import from Bitbucket

Click import. This will get you to the next page.

3: Install Site

First configuration first. Your project name. Zeit Now will pick your repository name asa default. You may alter the project name.

Zeit Now: Project Name

You may change the root directory. This is a common case. For simplicity reason, this example does not put source in subfolder.

Zeit Now: Root Directory

Now we come to Eleventy Build Configuration. Zeit Now can smartly detect what SSG utilized in your repository.

Zeit Now: Eleventy Build Config

  • Build Command:
`npm run build` or `npx @11ty/eleventy`
  • Output Directory
_site
  • Development Command:
`npx @11ty/eleventy --serve --watch --port $PORT`

I guess Zeit Now can read your package.json.

Just wait for a few second, Zeit Now will build your site. If everything is fine, your site will be served soon. And the page will give a preivew of your site as below figure:

Zeit Now: Eleventy Deployment

Now my site is already served as below:

Zeit Now: Eleventy Site Served

4: Continuous Integration

Consider go back to your dashboard. You should see one new panel, made for your newly served site.

Zeit Now: Dashboard

You can go to your private area to see what is going on in your docker build. You should check it for debugging, even your site successfully served, just in case you found something peculiar, or maybe just something that can be improved.

This is what I have in my zeit-11ty area:

18:16:53.110 Downloading 158 deployment files...
18:17:02.826 Installing build runtime...
18:17:03.258 Build runtime installed: 432.041ms
18:17:03.603 Looking up build cache...
18:17:03.635 Build cache not found
...
...
...
18:17:29.947 Build completed. Populating build cache...
18:17:34.789 Uploading build cache [23.10 MB]...
18:17:35.345 Build cache uploaded: 555.952ms
18:17:35.354 Done with "package.json"

Zeit Now: Eleventy Build Logs

This build process is actually a very interesting topic. And I will explain thouroughly using other tools other than Zeit Now.

5: Now Configuration

What good is it CI/CD without configuration As alternative you can use now.json to build your site. It is more flexible, you can do more thing with your own configuration.

I must admit, I haven’t explore much about Zeit Now, compared to Travis and Circle-CI.

However this below is an example of configuration:

Taken from link above.

{
  "version": 2,
  "name": "my-hugo-project",
  "builds": [
    {
      "src": "build.sh",
      "use": "@now/static-build",
      "config": { "distDir": "public" }
    }
  ]
}

That configuration above utilize bash script build.sh.

#!/usr/bin/env bash

curl -L -O https://github.com/gohugoio/hugo/releases/download/v0.62.2/hugo_0.62.2_Linux-64bit.tar.gz
tar -xzf hugo_0.62.2_Linux-64bit.tar.gz

./hugo

Live Site

Now the site is live. Served in this address as below:

Why can’t have a simple URL such as zeit-hugo.now.sh 🤔? It is simply because, the URL has already been taken by other user 🙏🏽.

6: Adjustment

This is the adjustment summary:

1: Pelican

2: Hugo

3: Hexo

4: Jekyll

5: Eleventy

From

  "scripts": {
    "build": "npx eleventy",
    "watch": "npx eleventy --watch",
    "debug": "DEBUG=* npx eleventy"
  },

To

  "scripts": {
    "build": "eleventy --output=_site",
    "watch": "eleventy --watch",
    "debug": "DEBUG=* eleventy",
    "dev": "npx @11ty/eleventy --serve",
    "start": "eleventy",
    "now-build": "npx @11ty/eleventy --output=_site"
  },

What is Next ?

Consider continue reading [ CI/CD - Git Worktree - Part One ]. Step into a git command, using worktree feature.