Customizing a Web for Real Estate

Customizing a Web for Real Estate

September 27, 2024

How to make a cool website for Real Estate?

Astro SSG is the Answer.

Competitor 1

Competitor 2

Competitor 3

â„šī¸
How much better is the result? Jump to it

Demo with Cloudflare Pages

Lets do this.

A quick project - meme

But in a way that the client will love it!

â„šī¸
I created a Private repo with Github with the Real Estate Web Project

Which is deployed with CF Pages: <screwfastmoirealestate.pages.dev>

Powered by Astro 😍 ScrewFast and some ideas from Nebulix Shop

â„šī¸
Nebulix supports Static CMS
Ready to Demo, with Free Cloudflare Pages 📌
npm install
npm run dev
  • It also has starlight for the docs!
npm run build
  • Output –» ./dist or .vercel/output/static/
npm install -g serve #serve with npm

#serve -s dist
serve -s .vercel/output/static #http://localhost:3000

#cd dist #serve with python
cd .vercel/output/static
python3 -m http.server 8000
npx wrangler pages project create
  • Project name: moises
    • Images are at ./src/images

Now pushing the generated content to Cloudflare:

#npx wrangler pages project list #check existing projects
npx wrangler pages deploy .vercel/output/static #dist 

Thanks to Astro & mearashadowfax

Just as we did here, but this time, with a private repo.

Normally, Astro pages push the build files to ./dist, but this theme does it differently to ./vercel/...

Cloudflare will build Astro for us

When you hit deploy, the process will start: build environment -> clone git repo -> build web files/

Astro will take a little bit longer than HUGO to build.

Cloudflare workers building Astro

â„šī¸
The domain and pages are handled by Cloudflare

After it’s deployed, you can just hit Add custom domain, in this case for screwfastmoirealestate.pages.dev, we will choose: dm-real-estate.com

A CName record will be added automatically:

Cloudflare workers pages custom domain DNS Setup

You can also add the www.dm-real-estate.com if you hit again Set up a custom domain.

After Verification is completed, your Web deployment Workflow is Ready with Cloudflare Pages and Workers plus a private Github Repository.

Cloudflare workers subdomain Setup

Real Estate Web - Results

You can have a look to the crafted Website:

And it seems that Google likes it:

RealEstate Web - Performance


Extra Functionality

  • Newsletters and contact form added with MailerLite
  • GDPR Compliant out of the box
â„šī¸
Who said, embedded Chatbot? Maybe Flowise AI? Or just a LLM over custom data?

Flowise AI Example

More Embedded ChatBots for your website… 🚀

Real Estate Bot Agent

But, if you really want something to perform with your data…

make it yourself.

  • Features it should be able to reply:
    • Follow up questions from the real state agent etc
    • Do you have family / car / pool

From Idea to Impact, with AI

â„šī¸
You could say this is all a Data-ChatBot. LlamaIndex + Mem0 does the trick.

AI Driven Website Migration

Do you have tons of images in and old website?

Maybe a Wordpress, Ghost or Wix?

Not a problem. You can quickly use AI to create a migration script.

In the end, Astro (and other SSGs) are all about markdown files and images.

â„šī¸
For this Real Estate Web project I used this assistant, migrating the images with this AI script.

Checks Before Web Delivery

How to Use LinkChecker… 🚀

Links can be checked with LinkChecker.

# docker run --rm -it -u $(id -u):$(id -g) ghcr.io/linkchecker/linkchecker:latest --verbose https://https://www.psikolognevinkeskin.com/

podman run --rm -it ghcr.io/linkchecker/linkchecker:latest --verbose https://www.psikolognevinkeskin.com/ > linkchecker_psyc.txt

Resulting at:

That's it. 53 links in 53 URLs checked. 5 warnings found. 0 errors found.
Stopped checking at 2024-10-19 07:34:09+000 (12 seconds)

Alternatively, linkchecker can do its job during the build with Github Actions.

Create a WF with 3 jobs: build, test (Linkcheck here, informative), deploy. Like this one with HUGO.

Whatsapp Bubble

As simple as: https://api.whatsapp.com/send?phone=34123456789