Publish (Github pages)

A typical penguin.js setup has two servers in production: The CMS Server and the CDN Server. After setting up a production environment with penguin.js you might wonder, how to publish your website.

Publishing a website works always follows this process: Trigger Build > Create Build > Send Build to a CDN.

There are three main components when it comes to publishing.

1. A publish button

2. The publish driver

3. The CDN you deploy to

4. Show progress indicator and success messages during deploy

1. Publish button

The context of a component has the publish function ctx.publish(). Calling this function will trigger a build.

Example component:

export function mount(ctx, props, el) {
  el.addEventListener('click', e => {
    e.preventDefault()
    ctx.publish()
  })
}

export function render(ctx, props) {
  return { replace: '' }
}

2. Publish driver

After triggering a build, penguin.js will look for the publish driver that you can define in via penguin run --publish-driver.

Currently available publish drivers:

• git

Usage:

penguin run --publish-driver [ penguin.js/git --url "$GIT_REPO" --branch gh-pages ]

Make sure that the variable $GIT_REPO either contains a api key in the URL or you have added a deployment(ssh) key.

Feel free to create more publish drivers (check git.js in the repo). E.g. for AWS S3 or FTP.

3. CDN

The publish driver will push the contents to the CDN. Make sure to configure the CDN according to your needs.

Example for GitHub:

• Find more information about GH-Pages here.
• Use the repo URL containing your API key in $GIT_REPO.
• GIT_REPO is an URL like: https://[email protected]/user/website-reponame.git. It is used to push the rendered website to Github. Find more info about Github tokens. Generate a new token here and make sure to give "Full control of private repositories" (Checkbox: Repo).
• Push to the branch gh-pages (default for GH-Pages). Make sure to create the branch first.
• To make your website available using a custom domain, you will need a CNAME in the root directory in GitHub. In penguin.js you can add a file files/CNAME for this case. Files in files/ will be on root level in the build.
• Set a CNAME in your DNS to username.github.io

4. Messages during publishing

Publishing indicator

To show a publishing indicator you can subscribe to the store.

ctx.store.getState().isPublishing is true while penguin.js is deploying.

Styled example

Don't forget to mount the component: div(data-component='PublishingIndicator')

Sucess message:

Use the component penguin-published-indicator

Or find an example here

Usage:

div(style='position: fixed; top: 10px; right: 10px; display:none; background-color: white; z-index: 99999; padding: 25px; color: green;' data-component='PublishedIndicator' data-props='{"timeout":3500}')
  strong Successfully published. Penguin!

FAQ

In some cases you will need files on root level to configure the CDN. Files in files/ will be on root level in the build. E.g. files/CNAME would be /CNAME in the build.