Build and Deploy a Custom Graduation Album on Alibaba Cloud in Minutes

Graduation Album Tutorial

After a turbulent 2020, the 2021 graduation season is cherished. Using Alibaba Cloud's Cloud Development platform, anyone can quickly create a personalized online graduation album.

Graduation Album Deployment Steps

1. Create Application

a. Log in to Cloud Development Platform

Open https://workbench.aliyun.com/ , log in with an Alibaba Cloud account, create a team, and accept the agreement. New users can register on the login page. Use Chrome for the best experience.

b. Create Application

Visit the quick‑start page https://workbench.aliyun.com/page/quickstart and click “Create New Application”.

c. Cloud Resource Authorization

If you have not used the platform before, you will see a resource authorization prompt. Click “Agree” to authorize, then proceed to the next step.

d. Choose Language and Compute Service

Select NodeJS as the development language, choose direct creation, then click Next. Fill in the app name and description, select the product line as needed, and choose FC for the compute service. Click Finish; if the cloud service is not enabled, enable it (free of charge).

2. Configure and Deploy the Application

a. Download the Album Code

Visit https://github.com/cloudworkbench/memory-album , download and unzip the source code.

b. Create Environment

After the app is created, go to the app details page, click “Deployment Configuration” under the daily environment, and select “Auto‑create environment”, “Choose any available zone”, and “Auto‑create switch”.

c. Online Development Deployment

After environment configuration, return to the page, click “Online Development Deployment”, open CloudIDE, and upload the code files.

d. Upload Code Files

In CloudIDE, drag the extracted source files into the root directory, then save and push.

e. One‑Click Launch

In CloudIDE, select the daily environment under the Deploy tab, click “Deploy Now”, confirm the configuration, and deploy. A temporary domain is generated for accessing the site (valid for 30 minutes).

f. Bind a Custom Domain

The temporary domain is free but expires after 30 minutes. To keep the site long‑term, bind your own domain (many cost only ¥1 for the first year). In the domain console, configure a CNAME record pointing to the temporary domain. If the domain is new and not备案 (ICP), you can create a Hong Kong region product on the Cloud Development platform.

In the app details page, click “Domain Configuration” under the online environment, bind the custom domain, configure the environment as before, save, and redeploy.

Customizable Features of the Album

Background Image Replacement

In index.html, change the URL path to your desired image or replace classroom.png in the images folder.

body {
    perspective: 1000px;
    display: block;
    padding:0;
    margin:0;
    overflow:hidden;
    background-image:url("images/classroom.png");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

Sakura Opacity

Adjust the opacity value (0–1) in index.html to change the transparency of the cherry blossom layer.

/* Sakura opacity */
canvas {
    padding:0;
    margin:0;
    opacity:0.3;
}

Time Counter

In js/time.js, set the enrollment date to calculate the time spent together.

var arr = "2018-10-1 21:00:00".split(/[- :]/); // modify here
var box = document.getElementsByClassName('textCon')[0];

Graduation Message on Blackboard

Edit the str variable in js/typing.js to change the displayed message, speed, and style (adjustable via CSS).

let divTyping = document.getElementById('text');
let i = 0, timer = 0,
    str = '山无棱,天地合,才敢与君绝'; // message
function typing () {
    if (i <= str.length) {
        divTyping.innerHTML = str.slice(0, i++) + '_';
        timer = setTimeout(typing, 450);
    }
}

Rotating Photo Album

Customize images, sizes, and rotation positions in css/xuanzhuan.css and replace pictures in the images/xuanzhuan folder.

.xuanzhuan {
    width:200px;
    height:200px;
    margin: 100px auto;
    background: url("../images/xuanzhuan/shu.jpg") no-repeat;
    background-size: cover;
    transform-style: preserve-3d;
    position: absolute;
    transition: 15s linear;
    top: 50%;
    left: 42%;
    z-index: initial;
}
.xuanzhuan:hover{ transform: rotateY(360deg); }
/* ... other child div styles ... */

Background Music

Include an external music link or a local file in index.html using the <audio> tag.

<!-- Music -->
<audio controls class="music">
    <source src="http://m10.music.music/2021060508530538.mp3" type="audio/mpeg">
</audio>

Join the Cloud Celebration and Claim Graduation Gifts

Share your deployed album in the “Read Original” comment area; the top 10 liked posts receive a graduation gift pack (Alibaba Cloud mascot blind box and a ¥10 voucher).