Build a custom website using Power Automate (part 2)

Introduction

To recap part 1, I showed how we can use premium connectors, request, and response in power automate to host a simple website (part 1 here).

I have built a fully functional, responsive personal portfolio website template that you can play around with and use it for your projects.

What to expect from this template

• A responsive portfolio website.

• Site with Social media links and image attachments.

• A popup contact me form storing information in SharePoint.

• Newsletter attachment.

For the purpose of this demo I have used Web Design Mastery’s website portfolio template and modified it to work on power automate.

An upgrade from the previous power automate flow in part 1

Download the solution and import it to your environment first.

Go to PowerApps portal, and under solutions, select import solution. Select browse and upload the downloaded LandingPage_1_0_0_1.zip solution. Hit next and create the solution. Open the solution

I have created two flows. The LandingPageGeneratorV2 is the flow that will create the website for you, and ContactFormFlow is the flow that will store details when user interacts with the contact form in the site.

Lets first dive into the LandingPageGeneratorV2 flow. Open the flow in edit mode.

I’ve separated the the web contents into 4 parts:

• 3 compose actions named, style, script, and body.

• A scope action named, Links, with compose actions where you can attach social media links, Image URLs, and other links. I’ve done this way so you can easily customize it.

The body will contain the html content body. All the responsive functions, including the popup modal JavaScript functions will be in the script action, and styles will contain all the CSS for the website.

The Link scope action is further divided into three scope actions:

• Social Media - contains compose actions where you can embed social media links

• Resources - contains aboutImg and headerImg where you can attach your image URLs. The contactForm will be where you attach the microsoft form URL and CV will be the shared URL link of your CV

• Portfolio - contains image URLs and respective project link URLs for you to showcase.

Edit the Link scope with your content and save the flow. Once you save the flow the Request connector (named manual in this flow) will generate a URL link.

Copy the URL and paste on a new browser tab and hit enter to test it first.

Creating contents for the custom form

1. Add a new action: Response.

2. In the Headers section, type:

   • Key: content-type

   • Value: text/html

3. In the Body section, paste your HTML content—this is your web page.

I’ve decided to go with Microsoft form for ease of use and simplicity. Go to https://forms.office.com/ and create a new form. Make the visibility available for anyone to see, copy the sharable link and paste it in the ContactForm compose action, under Resources scope.

Now save the flow again and run the site and select contact me to check if the form is properly working. Once this part is complete we can go a step further and store the form details into a SharePoint list to keep track of responses.

These are the columns I’ve used but you can add your own variation.

Updating the ContactFormFlow

Once you have created the list, go to the solution and open the ContactFormFlow. Select the form you just created as the trigger for the first connector.

For the second connector dynamically add the FormId to retrieve form responses. Then under create item SharePoint connector update with the list you created and map it to the form contents.

Now save the flow and fully test the site again to see if all functionalities are working.

And there you have it. A fully functioning personal portfolio with just power automate. we can take this even a step further by using URL shorteners or even setting up a domain address that would make it look even more professional.

Let me know in the comments if you have any queries or other ideas you would like me to build on 🙂 .

And there you have it. we built a custom web page, using a flow with just a request trigger and a response connector.