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:
-
Jekyll:
-
Eleventy:
-
Hexo:
-
Pelican:
-
Hugo:
Notice that the last one have different url pattern.
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:
The next step is pretty straightforward.
Import Project
You should see th import project
button.
Click the button.
Choose from repository provider.
You may choose either github, gitlab or bitbucket.
In this case, I’m using 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.
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.
You may change the root directory. This is a common case. For simplicity reason, this example does not put source in subfolder.
Now we come to Eleventy Build Configuration. Zeit Now can smartly detect what SSG utilized in your repository.
- 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:
Now my site is already served as below:
4: Continuous Integration
Consider go back to your dashboard. You should see one new panel, made for your newly served site.
-
https://zeit.co/epsi (using username).
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"
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
-
Must use
.html
suffix
2: Hugo
-
Script
build.sh
above
3: Hexo
-
This site just works.
4: Jekyll
-
Must use
.html
suffix
5: Eleventy
-
Must use
.html
suffix -
Alter package.json
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.