Hosting web pages
Web pages written in HTML, CSS, and JavaScript can be hosted on Replit. HTML/CSS/JS repls are given a unique URL that can be shared with your friends, family, peers, and clients.
After running a repl, your repl will be hosted at the URL provided in the result
tab.
URL Format
The repl will be hosted with the following URLs:
https://REPL-NAME--USERNAME.repl.co
http://REPL-NAME.USERNAME.repl.co
Where REPL-NAME
is the name of the repl and USERNAME
is the owner's username.
If you create a repl with a title that matches your username (i.e. repl.it/@username/username), it will be hosted at:
https://USERNAME.repl.co
If an anonymous repl is created, the username used in the URL will be five-nine
.
Note that if your username contains underscores _
, they will be converted to dashes in the URL.
Updating Websites
Changes made to your repl will not be reflected in the live version until the web project is re-run. Running a web repl will update its live version.
Note that a repl's public link will persist, even after the repl has been deleted. You can clear a repl of its server code before deleting it in order to prevent it from loading.
Custom Domains
Part 1: Find your domain
Any hosted repl can be linked to a domain that you own. This includes both static sites and HTTP servers. To get started, you'll need a domain to link with your repl. If you don't already have a domain, Dotcomboom has created a great tutorial on getting a free domain from Freenom. CoolcoderSJ also has a helpful step-by-step tutuorial. on acuqiring your domain for free.
Part 2: Setting it up with Cloudflare
Next to your domain, click
Manage Domain
.On the menu bar, click Management tools > Nameservers and select
Use default Nameservers.
Clickuse custom nameservers
and pause.In another tab, open Cloudflare. Either login or signup from the navigation bar. Once you're logged in, check the navbar top right for a link to add a domain. Click that link.
Enter your domain and click
Add site.
NOTE: It may take multiple tries and a lot of time before it works.Once it actually loads, scroll down and select the free plan, unless you want to pay for cloudflare Pro.
Click
continue.
Wait for it to scan existing DNS records, it should find none.
Part 3: Option 1: Root and WWW
Click
Add record
(We will be doing these steps twice). From the dropdown, selectCNAME.
Set the name of the record as
@.
This is the root domain, so for example, Google has these two CNAME records:google.com
, andwww.google.com.
If you do not add a root record, you would have to addwww
in front of it every time. NOW PAUSE.
Go to the repl you are linking:
- Click on the pencil icon next to the URL for your repl:
- Enter the full domain where you'd like the repl to be accessible from without the
www.
(Example -replitiscool.tk
)
- Click the
COPY
button. Now head back to cloudflare and enter the copied url into the target box. ClickSave,
then add another record. SelectCNAME
from the dropwdown, name the record aswww,
and paste the text into the target.
Part 3 Option 2: Subdomains
Go to the repl you are linking. Click the pencil icon next to the domain.
Enter the domain you are linking, including subdomain. (Example -
project.replitiscool.tk
). Click theCOPY
button.Now head back to cloudflare and enter the copied url into the target box. Click
Save.
Click continue. It might give you some NAMESERVERS and tell you to update nameservers. IF that is the case, go back to freenom,: manage domain > Management tools > nameservers.
Click
use custom nameservers,
then enter the nameservers cloudflare gave you. Clicksave,
and clickcontinue
on cloudflare.On the top bar, click
SSL/TLS'. Choose
full.` It should be the second to last option.Go back to Replit and click
next.
After some time, a LINK DOMAIN button should appear. Click it and you have successfully linked your domain.
Edit: On your first try, you may get a 525 SSL Handshake
error. If you do, be patient, wait a bit, and reload. It takes a bit to update.
Note: Make sure the CNAME record is not proxied and is set to "DNS only" (the cloud icon should not be orange)
It may take some time for the DNS record to be updated. Once connected, click the big green button to finish and your domain should be linked!
Example
Here's an example of a hosted webpage using p5.js. The live, full-screen version can be found here.
Takedown Requests
You can unlink your domain at any time by clicking on the pencil icon and clicking unlink.