Deploy to CPanel

Introduction

In this article we will learn how to deploy a static HTML website to a shared hosting CPanel using a CD pipeline.

It is built to work for anyone who has proper account on CPanel hosting provider.

Main goal is to automate deployment process of static HTML website to CPanel without need of SSH or manual actions.

We will see how quak.com.pl (opens in a new tab) is deployed to CPanel using puppetter and node.js in an automated process of Continuous Deployment.

Results

We will have a CD pipeline that will build Nextra .mdx pages, export to static HTML files and where deployment process will look like this:

> node ./index.js "Archive_19_05_2024_node_init.zip"
 
🚀 Starting deployment (Archive_19_05_2024_node_init.zip)
🌐 Opened browser (1920x1080)
🔑 Logging in to CPanel (your-username)
    Checked username
    Logged in
📂 Opened File Manager page
📬 Opened Upload File page
    Uploading from path: ../../out/Archive_19_05_2024_node_init.zip
    Uploaded file
📂 Opened File Manager page
    Extracting file: Archive_19_05_2024_node_init.zip
    Extracted file
🚢 Deployed!
🔒 Closed browser, total time: 16s

Prerequisites

quak.com.pl (opens in a new tab) is a static HTML website that is hosted on a shared hosting provider.

To recreate same pipeline in your app you will need to have:

• A CPanel account on your hosting provider.
• Your static HTML website.
• A node.js runtime.
• MacOS is used in this article, but you can use any OS with some tweaks to the zip creation step in case e.g. Windows.

Deploy to CPanel

We will deploy our website to CPanel using a CD pipeline.

Pipeline is started inside quak-docs repository with a command like this:

$ sh scripts/build-deploy.sh 'Archive_19_05_2024_3.zip'

Pipeline will:

1. Build the website.
2. Export the website to static HTML.
3. Zip the website as Archive_19_05_2024_3.zip.
4. Upload the website to CPanel.
5. Unzip the website.
6. Store screenshots of whole deployment process in scripts/deploy/process-screenshots directory.

To achieve this we will use Nextra our website main framework to build and export to static HTML files, bash for running terminal commands in batch, puppeteer to visit CPanel via Chrome DevTools and node.js as our runtime for javascript code.

Website repository structure

quak-docs
├── out - exported static HTML files
├── pages - Nextra pages
├── scripts - bash scripts
│   ├── build-deploy.sh - main script
│   └── deploy - node script for deploying
└── ...

And visually:

Build deploy script

We want to click on the CPanel, log in, open file manager, upload the zip file and unzip it.

Final structure

Final files content

Page Object Model pattern is used to help with page behavior and selectors management.

import { Deploy } from './deploy.js';
import dotenv from 'dotenv';
 
// load .env variables
dotenv.config();
if (!process.env || !process.env.USERNAME || !process.env.PASSWORD) {
    console.error('🚨 Missing USERNAME or PASSWORD in .env file');
    process.exit(1);
}
 
const USER = {
    username: process.env.USERNAME,
    password: process.env.PASSWORD
};
 
(async () => {
    const deploy = new Deploy();
    await deploy.init(USER, getFilePathOrError());
    await deploy.run();
    await deploy.close();
})();
 
function getFilePathOrError() {
    if (process.argv.length < 3) {
        console.error('🚨 No file path provided, proper command `node ./index.js path/to/file.zip` or `pnpm run deploy path/to/file.zip`');
        process.exit(1);
    }
    return '../../out/' + process.argv[2];
}

Build bash pipeline

We want to execute build, export to static files, zip and deploy to CPanel.

echo "Building zip: $1"
pnpm build
pnpm export
cd out
zip $1 -r . # zip all files
cd ../scripts/deploy
echo "Deploying zip: $1"
pnpm run deploy $1 # deploy the zip file

Run pipeline

To run the pipeline we need to execute the bash script with the zip file name.

Remember to create srcipts/deploy/process-screenshots folder before run if one does not exist.

$ sh scripts/build-deploy.sh 'Archive_19_05_2024_3.zip'

Conclusion

In this article we have learned how to deploy a static HTML website to a shared hosting CPanel using a CD pipeline.

READ

Latest readings

• Readings are sites which will help you with detailed

• information about given topic. Read latest ones from Learn.