Let's take a look at the results of these 5 websites:
- https://www.py.bio
- https://www.works.dev
- https://www.js.bio
- https://www.sharp.page
- https://www.backend.pro
Building a website using AI is something that can be done in minutes. But building and publishing 5 dynamic websites in an hour is still a challenge. Let's see how I did it.
Prerequisites: You have already purchased a web server and installed the necessary software.
Since I am a Ruby on Rails developer, I will use Rails as an example. This time, I plan to deploy these 5 websites on a server with a pre-existing environment; all that's missing is the source code for the 5 websites, the Nginx configuration, and a start server command.
Step 1: Create an empty Rails project locally
cd /path/to/project
rails new landing # This can create an empty Rails project.
I named this project landing because the five websites currently share a single landing page.
I'll add a few asset images to app/assets/images/demo, and then have AI display these demo images on each website.
Afterward, I'll push this project to GitHub, and I'll name the repository Landing Repo.
Step Two: Generating Website Source Code with AI
This time, we'll use Clacky.ai because this AI employs a state-of-the-art large language model and supports full natural language interaction with the AI โโin dialog boxes.
- Log in to Clacky.ai and authorize
Landing Repoto Clacky.ai.
Implementing Interface Style Switching Based on Domain Name with Clacky.ai
AI promote words:
> This project will be used for multiple websites. Different domain names should correspond to different interface styles. Different interface styles should use different layouts files.
> For example, for the domain `works.dev`, use a naming pattern like `layouts/works-dev.html.erb`.
> Please implement the core functionality code above.
The AI โโwill complete the above requirements and finally push the code to Landing Repo. The final generated core code is as follows:
# app/controllers/main_controller.rb
class MainController < ApplicationController
layout "py-bio" # This is for domain py.bio. Can be replaced to another domain.
def root
domain = request.domain || request.host
layout_name = domain.to_s.gsub(".", "-")
if lookup_context.template_exists?(layout_name, "layouts")
render layout: layout_name
end
end
end
# config/routes.rb
root "main#root"
Implement a landing page for one of our websites using Clacky.ai
AI prompts (it is a bit long):
- Please create a marketing page for the domain `py.bio`. You need to create a `py-bio.html.erb` file under `views/layouts` (this is your main task!) and modify the default layout to it for local debugging.
- This page will introduce the benefits of using the `py.bio` domain as a subdomain! `py.bio` is the best personal business card for Python developers! Why? Because it's extremely short, and short domains are very valuable. py represents Python, their skill, while bio is widely used for personal homepages.
- Programmer X, who might use the domain `X.py.bio`, when applying for a job, if X adds this domain address to their resume, HR will be immediately impressed, and click-through rates will increase significantly. You need to complete the copy! You can also add other relevant content to the copy.
- Here, add a subdomain input for user input, along with a button: `Check Availability`. However, the functionality after clicking this button is fake; it doesn't need to query the database. Regardless of the subdomain the user enters, it will always show "Available". After clicking `Check Availability`, display a link or button for the user to click. The text should be something like "Own it". Clicking this should redirect directly to the `www.like.dev` homepage.
- The registration of this domain's subdomain, and the rendering of the content for `.py.bio`, are actually done on another platform, https://www.like.dev. You need to understand this first! Visiting this website and reading its homepage content is sufficient. Add a link to www.like.dev.
- Different domains must have different colors and themes! Adapt the theme based on the domain's keywords. What kind of theme should Python use?
- The generated code cannot have the same file structure as other files in the `layouts` directory. Adjustments are needed to avoid being penalized by search engines for duplication.
- All content must be in English! No Chinese characters should appear.
The following content, after being reworded, can be added to the page, but don't add it too late; you can add it to the middle or the beginning.
> ๐ **Level Up Your Developer Identity**
>
> showcasing your talent is what gets you hired.
>
> We recommend [**Like.dev**](https://www.like.dev) โ the ultimate all-in-one personal branding platform for programmers.
>
> **The All-In-One Career Powerhouse:**
> - ๐ **Resume, Portfolio & Blog:** Integrate your skills, GitHub projects, and writing into one stunning site.
> - ๐ **Free Custom Domain:** Bind your own personal domain for freeโforever.
> - โจ **Premium Subdomains:** Stand out with elite tech handles like `name.cto.page` or `name.engineer.dev`.
> - ๐ **Cool Short Links:** Get sleek, memorable bio-links like `is.bio/yourname` and `an.dev/yourname`. Up to 6 short links!
>
> [**Build Your Programmer Brand at Like.dev โ**](https://www.like.dev)
- Display the images from `app/assets/images/demo` (screenshots of the Like.dev render interface) on this page to help users understand the effect of their personal homepage. Show 2-3 images per line. No JavaScript effects are allowed; simply displaying the images is sufficient.
- List the domains managed on like.dev: `works.dev, webs.dev, that.dev, mine.cv, resumes.dev, expert.bio, portfolio.bio, leader.me, cto.page, manager.bio, engineer.dev, mine.dev, coder.expert, appdev.dev, backend.pro, frontend.expert, js.bio, py.bio, py.expert, cpp.guru, sharp.page, ruby.expert, showcase.rs, sre.bio`. You can vary the list; randomly select 10-16 domains in shuffled order.
After entering the above prompts, the AI will automatically complete the relevant code. The final generated interface can be seen at: py.bio.
Let Clacky.ai implement landing pages for four other websites.
After committing the code, slightly adjust the prompts above, replacing py.bio, for example, with works.dev, and add the corresponding prompts for works.dev. This example mainly explains the benefits of the works.dev domain and the theme that should be used. After submitting to AI, the source code for another website is automatically completed!
Step 3: Clone the project to the server and configure Nginx
Clone project and install Ruby gems
cd /srv # can be any folder
git clone https://github.com/username/landing.git
cd /srv/landing
bundle install
Set credentials
cd /srv/landing
# This file contains all the credentials that need to be set.
cat config/credentials.yml.example # Set "all" of them with the next command:
# After saving it, "config/credentials.yml.enc" and "config/master.key" will be created.
# In order for the modified credentials to take effect, you need to restart the Rails web server.
# If you have problem with this, maybe you can upload your local master.key to the server.
EDITOR="vim" bin/rails credentials:edit
Start or restart Rails web server
cd /srv/landing
rails assets:precompile
pkill -F /var/run/landing.pid # Stop Rails web server. If you haven't started the Rails web server yet, you don't need to run it.
bundle exec puma -w 1 -e production # This is used to test if Rails web server can run well.
ctrl + c # If it has no error, press `ctrl + c` to terminate it. Then run:
# Start Rails web server, the `-w` parameter value here needs to be the same as the number of CPU cores of the server to maximize the web load. You can use `lscpu` to view it.
nohup bundle exec puma -w 1 -e production -b unix:///var/run/landing.sock --pidfile /var/run/landing.pid &
tail -n 200 nohup.out # ./nohup.out is the log file
exit # When the ssh session is closed, the processes started during the session will also be terminated. So you should run `exit` in time to avoid the started processes being terminated.
Configure Nginx
Take CentOS 10 SELinux as an example.
cd /etc/nginx/conf.d
touch z_landing_nginx.conf
vim z_landing_nginx.conf
The content of z_landing_nginx.conf:
upstream landingup {
server unix:///var/run/landing.sock;
}
server {
listen 80; # Must be 80. Port 80 can be used for multiple websites on one machine.
listen [::]:80; # Must be 80.
server_name www.py.bio www.works.dev;
root /srv/landing/public; # I assume your app is located at this location
location ^~ /assets/ {
try_files $uri $uri/ =404;
expires max;
add_header Cache-Control public;
}
location / {
proxy_pass http://landingup; # Match the name of upstream directive which is defined above. Should not start with 'https://' since puma only understand http requests!
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
}
nginx -t # Check whether the configuration is correct.
systemctl reload nginx.service
Configure CloudFlare for domain py.bio
Configure DNS Records
On Cloudflare, go to the DNS > Records tab. You need to add (or edit) the following two records:
1. The Root Record (A)
This acts as a placeholder to catch traffic for your root domain so we can redirect it later.
- Type:
A - Name:
@(oryourdomain.com) - IPv4 address:
192.0.2.1 - Proxy status: Proxied (โ๏ธ Orange Cloud)
2. The "www" Record (A)
- Type:
A - Name:
www - Target:
Your_Server_IP - Proxy status: Proxied (โ๏ธ Orange Cloud)
Crucial: Ensure the Proxy status is Orange for both records. This is required for SSL to work.
Adjust SSL/TLS Settings
Since our origin server is optimized for performance, we let Cloudflare handle the encryption.
- Navigate to SSL/TLS > Overview.
- Set your encryption mode to Flexible.
Set Up Redirect Rules
Navigate to Rules > Overview (in the sidebar).
Rule1: Redirect from HTTP to HTTPS
- Click
Templates: - For template
Redirect from HTTP to HTTPS, clickPreview template. - Don't change anything, click
Deploy.
Rule2: Redirect from root to WWW
- Click
Templates: - For template
Redirect from root to WWW, clickPreview template. - Don't change anything, click
Deploy.
Test result
Visit
- https://www.py.bio
- https://www.works.dev
- https://www.js.bio
- https://www.sharp.page
- https://www.backend.pro
you should see that the sites work well.