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

ℹ️
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.