Skip to main content

Using Azure Web Apps to Host a Landing Site (#CloudGuruChallenge)

The video is really a Creative Agency webpage, but I followed along and repurposed it for my own ends. I got this out during the time of the #CloudResumeChallenge on LI!

The parameters for the challenge are here. I found this page after I created the site. Hey, still learned something. Isn't the entire point of tech thinking outside the box and figuring stuff out anyway?


Technologies used: Azure, HTML, CSS, Javascript, GitHub, Deployment Tokens, Twitter, Canva, Talking to People

Resources: Tyler Potts' Creative Agency webpage with edits to make it an online portfolio - resume.


Why Make a Landing Site?

It's a brief site where a potential client or employer can quickly get the idea of what I do. You see it, and it's less overwhelming than a LinkedIn profile, or a blog with long posts.

I had a similar site made in Webflow, and a links landing page made in Canva. Fine options, however - 

- I couldn't get the Webflow elements lined up properly - An issue you'll see in a different form here 

- The Canva page kept hiding my borders on buttons.

+ I wanted to make something myself and host it somewhere. Normally, I use Azure to make closed virtual networks and publicly reachable servers for small production environments - Why not use it for this?

I've done this before in 2019, and there seems to be more features added, like Azure Storage integrated with VS Code and GitHub. Amazing!

(Or they escaped my notice the first time.)

 

Making The Site 

Navigation

I just copied and pasted the pages and changed the contents on everything but the hamburger menu. A lot of the content is justified-centered under the same <section> header as the opening paragraph and H1. I traded fanciness for a small site.

The Center of It All

On the Services pages, I wanted to center the image in their div boxes. 

 


 

They would be centered if the viewport was smaller than 980px. When the viewport is the full size, they align to the left in their (margins?). If I disable the width: 250px in the developer tools, it works no matter the screen size. Removing the option in the code does not. The discrepancies in image sizes in the demo did not help, so I adjusted them.

Div Hell

List components (UL, OL) did not play nicely within the divs on the resume page. I added 'homemade' bullets instead.

Hosting on Azure Static Sites - The Second Time Around


GitHub

I'm working on updating the Tourism page with new images and a new layout. 

When you do this, it takes a few minutes for GitHub to do whatever to make the site work ("We're waiting for the content"). When it works, It's quite speedy, with no delay on the initial images. 

I could host all of the code and images in a storage blob on Azure. I'll use GitHub, so I can move everything to a free service later. 

The bones of the site - all the HTML - worked when ported from GitHub. Nothing else did. Not the CSS, the Javascript, nor the images.

 I tried to host the site with everything hosted from Azure - no dice. 


Some of Microsoft's offerings can be frustrating, but every time I've talked vaguely into the void on Twitter, someone from the appropriate team has always helped me figure it out, and that's the mark of people who want to improve their product. A big thank you to Anthony Chu on the Static Apps and Functions Azure team.

This time it was my fault (Though I did uncover some unclear documentation that's been flagged to be updated).

What Happened?

The file paths for everything were incorrect in the actual code. Even when I put the appropriate files in the main branch, the code kept linking to them via .../agency/js/script.js, for example.

I'm pretty sure we can upload entire directories and various folders in GitHub, I'll double check in the future. 

 I also learned how to manage the deployment token and update the secret file in my GitHub project's directory.

The other pages (resume, projects) did not display images at first either, so I left the project alone for a few days. When I came back, they were loaded up. Probably took a bit of time from GitHub to work with Azure.

The Site in Action

Here!

I remember an option to change the URL before, but it seems to have gone missing, perhaps because it's in Preview. I'll keep it up for about a month or so, then reevaluate.

What Did I Learn?

  • Ask for help.
  • Check your file paths.

Walkthrough

Check out the video here.

Comments

Popular posts from this blog

What Do You Need? [AKA; List of Offered Services / My Next Role] (2020)

UPDATED 2021 I am a trusted outsourced remote consultant for your company.   I enjoy having the flexibility to take on temporary projects from time to time! I start at part-time, temp work for now. If we like each other, we can renegotiate. If anything sounds weird, out there, or unusual - Feel free to e-mail me .  3 Services Offered Technical: Cloud Technician     Azure [ See tag ] WORKING ON: Infrastructure As Code (Specifically Terraform/Azure and CloudFormation/AWS)  Support [Web: Example Job Description ] [Text : Example Description ]     I help you with adjustments in HTML, CSS, and Javascript.     When you email a business a question and they answer? That's me.   IT Operations Tech [ Example Job Description ]     Hardware and SaaS support.     Cisco routing and switching (Networking). CCNA, A+, Sec+, Azure certified WORKING ON: Junos Networking  Writing :      You want to pay me to write more of *waves hand* this blog? I am game .     I write B2C e-mails going out to o

Contactless Tech’s Role in the New Guest Experience ft. Intelity and The George

 Contactless hospitality technology is growing. You want to get away, and you'll be damned if a little thing like a deadly virus will stop you! But you still don't want to touch things. Ew. During the chat between INTELITY CEO Robert Stevenson and THE GEORGE Director of Operations Kerrie Hunter, you’ll learn how the historic boutique hotel has adapted a mobile-first guest experience in the wake of COVID-19—and how they see contactless technology affecting the future of hospitality. I don't remember how I found INTELITY (probably hoping to score a position with them), but I liked them enough to stay on the e-mail lists.  

Connecting IoT Devices to a Registration Server (Packet Tracer, Cisco)

In Packet Tracer, a demo software made by Cisco Systems. It certainly has changed a lot since 2016. It's almost an Olympic feat to even get started with it now, but it does look snazzy. This is for the new CCNA, that integrates, among other things, IoT and Automation, which I've worked on here before. Instructions here . I don't know if this is an aspect of "Let's make sure people are paying attention and not simply following blindly", or an oversight - The instructions indicate a Meraki Server, when a regular one is the working option here. I have to enable the IoT service on this server. Also, we assign the server an IPv4 address from a DHCP pool instead of giving it a static one. For something that handles our IoT business, perhaps that's safer; Getting a new IPv4 address every week or so is a minimal step against an intruder, but it is a step. There are no devices associated with this new server; In an earlier lab (not shown), I attached them to 'H