With the right mix of port forwarding and DNS records you too can create your own Arduino powered website / webserver!

This webpage will have two buttons for controlling a led!

STEP 1 ---------------------------------------------

Follow the schematic, then connect one end of your ethernet cable to your router and connect the other end to your Arduino's ethernet shield. 

STEP 2 ---------------------------------------------

Plug your Arduino Uno into your computing using an Arduino compatible USB A to USB B cable then, upload the code.

STEP 3 ---------------------------------------------

Open the Serial Monitor - See the IP address? Write it down.

STEP 4 ---------------------------------------------

Open your ISP's "gateway". You can normally find it on windows like this:

1. Search for Control Panel through the Windows search box.
2. Click Control Panel, and Network and Internet.
3. Click Network and Sharing Center.
4. Click Ethernet, and Details.
5. The IP address will be listed beside IPv4 Default Gateway.
   

You can normally find it on MacOS like this: 

1. Open the Apple menu, and click System Preferences.
2. Click Network, then select the network to which you’re connected.
3. Click Advanced, and open the TCP/IP tab.
4. Your default gateway address will appear beside Router.
   

STEP 5 --------------------------------------------- (See the first image under "Documentation")

Navigate to your "gateway"'s port forwarding rules (how you navigate to your port forwarding rules will be unique to every ISP), add a new rule with these settings: 

NAME/SERVICE: [anything]

PROTOCOL: TCP

EXTERNAL HOST: your IP (you can find it by typing "whats my ip" into a search engine)

INTERNAL HOST: [that IP you wrote down (hopefully!) ]

Internal Port and External Port should both be 80.

Click confirm or accept.

STEP 6 --------------------------------------------- (See the second image under "Documentation")

Register a domain name. I registered mine through Google Domains. They range in price.

Navigate to your domains DNS settings (how you navigate to your DNS settings will be unique to every domain name registrar). In the DNS settings, create a new A record. Under data, type in your IP address (you can find it by typing "whats my ip" into a search engine). Leave host name blank but set TTL to 3600 (or 1 hour).

Click confirm or accept.

STEP 7 ---------------------------------------------

You can't test your own domain. You'll need a friend. Ask them to type in the new domain name you registered into the address bar of their search engine. If they see a webpage with 2 buttons, Success! If not... try again. Check all the steps then head to google to try and debug.

-------------------------------------------------------

Thank you for reading, Good Luck!

Please note that the Arduino Ethernet shield can get quite hot, make sure it has adequate airflow and consider attaching a heatsink to its main processor.

EXPANDED TECHNICAL DETAILS

Embedded Web-Server Hosting

This project turns an Arduino into a standalone web server, allowing for direct browser-based control of hardware.

• W5100 / W5500 SPI Bridge: The Ethernet Shield handles the heavy lifting of the TCP/IP stack. The Arduino listens for incoming "GET" and "POST" requests on Port 80.
• HTML Content Generation: The Arduino serves a small, hand-coded HTML page. When a user navigates to the IP address, the Arduino prints the page content (buttons and status text) line-by-line via the client.println() command.

Remote Interaction

• Browser-to-Pin Control: By clicking a hyperlink on the hosted page (e.g., 192.168.1.1/led_on), the browser sends a request that the Arduino parses to toggle a physical relay or LED strip.