@tanglemedia/directus-extension-whm-preview-hook

When a collection data is deleted, created, or updated, it will trigger the scripts that builds the hugo site for preview.

Installation

npm i @tanglemedia/directus-extension-whm-preview-hook

How to enable the preview server

Prerequisite

• A website account on WHM server.
• Directus ^10.x.x
• Node ^18.x.x
• Git

Configuration

Set up SSH Keys to pull repo from Bitbucket

We need to create an ssh key for the server to pull a repo from bitbucket

• On the WHM server, go to List Accounts
• Search for the domain you want to add preview.
• Go to that domain's CPanel
• Using a terminal, cd .ssh to your domain/site account
• ssh-keygen -t ed25519 -b 256
• Enter name of the file for your ssh key. Recommended: <project_name>_bitbucket
• Leave passphrase blank
• Once ssh key file is generate, copy contents of the public key to the bitbucket repoitory of the hugo site (Repository Settings > Security > Access keys)

Add the following env variables

Setting up Preview Domain

• On your site account CPanel, go to Domains
• Click Create A New Domain
• Enter the desired domain. By convention, it's usually preview.<CURRENT_DOMAIN_ADMIN_URL> example: preview.admin.example.org.
• Enter the document root, which is the folder containing the files you want to deploy. It's usually /public_html/preview
• Then submit

Add the preview domain to the site DNS

• On your dns provider (in this case, Netlify), add a new A record to the domain
• Enter the preview domain as the name
• Enter the IP address of the site account on whm XXX.XXX.XX.XX

Add 404 page

• In the .htaccess file, append the following:

ErrorDocument 404 {DIRECTUS_BASE_URL}/404/404.html?base_url={PREVIEW_SITE_BASE_URL}&url_req=%{REQUEST_URI}

• In the public_html/ folder, create a folder called 404. Inside the folder, add the 404.html that will act as the 404 page that gets displayed when the preview pages are being build. The 404 page should also contain a javascript that redirects the user automatically to the preview page after is done building. Also add an image called preview-404.{ext}. It's usually the logo of the website. For example, refer to the other projects.

Folder Structure

By the end of the above steps, you should end up with the following folder structure. For it to work, make sure package-lock.json is not included in the hugo folder

account-root/
   hugo/
      .
      .
      .
      package.json
      .env-local
      node_modules/
         .bin/
            dotenv
            hugo
   preview/
      error.log
      hugo-git-initializer.sh
      preview.sh
   public_html/
      404/
         404.html
         preview-404.{ext}
         .
         .
      preview/
      .htaccess