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)

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 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 over 280 people weekly. [ Example Job Description ]        Auditing :        Something doesn't work on your page or in your app. I can find it, or you can lose business. [ Here ] [ Example Job Description ]   I really enjoy testing apps and webpage concepts! I have an iPhone and Android phones ready. Technical: Still as-needed, always remote, contract, or temporary. IT Operations Tech [ Example Job Description ]     Hardware and SaaS support.     Cisco routing and switching (Networking). CCNA, A+, Sec+, Azure certified WORKING ON: Junos

Portfolio of UX/Product Feedback [Vol. 1]

I browse websites and apps, while making note of things I find frustrating for end users. You have probably been linked here from a form or my resume. If you have any questions about what I'm looking for in a role, click here .   This post is not to shame, but to point out errors and hopefully make my talent for finding and documenting such mistakes clear to someone hiring. Contents: Instances where I offer constructive feedback on someone's website, logo, or app. Actions that were taken by the developers or artists.  I'm glad you want your webpages to be the best they can be with my help; If you need your sites audited, e-mail me . Latest Update -  November 20th, 2020.   Vol. 2 is here .

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.