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?

a shot of animal crossing island with the words morgan lucas beneath

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. 

 

my past projects in a grid above the inspect tool in Firefox with code dispalyed

 

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

a page on Azure that is pulling from my GitHub Repo

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.

Labels:

Comments

Post a Comment

Popular posts from this blog

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

 If you're seeing this post, I'm helping you, and you probably have LI presence: React and share this post to help me in return.   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
Post a Comment
Read more

Create a Simple Network (Packet Tracer) + A Walkthrough

Again; I've done this, but now there's so many new things, I'm doing it again. The truly new portions were...everything on the right side of this diagram; The cloud needed a coax connector and a copper Ethernet connector. It's all easy to install, turn off the cloud (Weird), install the modules. Getting the Cable section of Connections was an unusual struggle - The other drop down menu had nothing within. It required going into the Ethernet options and setting the Provider Network to 'cable', which is the next step AFTER the drop-downs. The rest was typical DHCP and DNS setups, mainly on the Cisco server down there. The post is rather short - How about adding a video to it? Find out what A Record means - This site says 'Maps a name to an IP address', which is DNS. So it's another name for DNS? You can change them (presumably in a local context) to associate an IP address to another name.
Post a Comment
Read more

Securing Terraform and You Part 1 -- rego, Tfsec, and Terrascan

9/20: The open source version of Terraform is now  OpenTofu     Sometimes, I write articles even when things don't work. It's about showing a learning process.  Using IaC means consistency, and one thing you don't want to do is have 5 open S3 buckets on AWS that anyone on the internet can reach.  That's where tools such as Terrascan and Tfsec come in, where we can make our own policies and rules to be checked against our code before we init.  As this was contract work, I can't show you the exact code used, but I can tell you that this blog post by Cesar Rodriguez of Cloud Security Musings was quite helpful, as well as this one by Chris Ayers . The issue is using Rego; I found a cool VS Code Extension; Terrascan Rego Editor , as well as several courses on Styra Academy; Policy Authoring and Policy Essentials . The big issue was figuring out how to tell Terrascan to follow a certain policy; I made it, put it in a directory, and ran the program while in that directory
Post a Comment
Read more