Upload the Website Files
After creating the bucket, click on the upload files button and upload your website-related files. Here, I am creating three files for the calculator app. The files for the web app include index.html, styles.css and script.js. Refer below for the code in each file.
Javascript
// Save in script.js function appendToDisplay(value) { document.getElementById( 'display' ).value += value; } function clearDisplay() { document.getElementById( 'display' ).value = '' ; } function calculateResult() { try { document.getElementById( 'display' ).value = eval(document.getElementById( 'display' ).value); } catch (error) { document.getElementById( 'display' ).value = 'Error' ; } } |
HTML
<!-- Save in index.html --> <!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < title >Calculator</ title > < link rel = "stylesheet" href = "styles.css" > </ head > < body > < div class = "calculator" > < input type = "text" id = "display" readonly> < div class = "buttons" > < button onclick = "appendToDisplay('1')" >1</ button > < button onclick = "appendToDisplay('2')" >2</ button > < button onclick = "appendToDisplay('3')" >3</ button > < button onclick = "appendToDisplay('+')" >+</ button > < button onclick = "appendToDisplay('4')" >4</ button > < button onclick = "appendToDisplay('5')" >5</ button > < button onclick = "appendToDisplay('6')" >6</ button > < button onclick = "appendToDisplay('-')" >-</ button > < button onclick = "appendToDisplay('7')" >7</ button > < button onclick = "appendToDisplay('8')" >8</ button > < button onclick = "appendToDisplay('9')" >9</ button > < button onclick = "appendToDisplay('*')" >*</ button > < button onclick = "appendToDisplay('0')" >0</ button > < button onclick = "clearDisplay()" >C</ button > < button onclick = "calculateResult()" >=</ button > < button onclick = "appendToDisplay('/')" >/</ button > </ div > </ div > < script src = "script.js" ></ script > </ body > </ html > |
CSS
/* Save in styles.css */ body { display : flex; justify- content : center ; align-items: center ; height : 100 vh; margin : 0 ; } .calculator { text-align : center ; width : 350px ; margin : 0 auto ; } #display { width : 100% ; height : 40px ; margin-bottom : 10px ; font-size : 20px ; text-align : right ; } .buttons button { width : 65px ; height : 65px ; font-size : 24px ; margin : 5px ; cursor : pointer ; } .buttons button:active { background-color : #ccc ; } |
After uploading the files, go to the permissions tab and click on the Grant Access button in the View by Principals tab as shown below.
Now, in the New Principals field add allUsers and on the Role field select Cloud Storage -> Storage Object View as shown below. Click save and Click the Allow Public Access button. This way, we are making all our files to be readable by the public.
Static Website Hosting with Google Cloud Storage: Hosting a Web App
In this tutorial, we will host a static website in Google Cloud Storage(GCS). If you want to host your resume as a portfolio website or if you want to have a website for your small to medium company, then hosting a static website is the best solution. This is very useful if you don’t have much traffic to your website and you don’t want to pay much for web hosting.
In this article, we will host a basic calculator web app in Google Cloud.
Contact Us