Deploy a Website from scratch to Akash!
INTRO
I’m no tech whiz, but I successfully deployed my html/css files as a static instance on the Akash network. It honestly took a long time for me to figure it out! There were a ton of great guides and people that helped, however some guides skip small steps that I had to figure out (like how to create a Dockerfile). So, I will pretend you know nothing and take you from start to finish about how to get this done! I’ll be using a 2015 Macbook Pro for my device, Terminal for the command line (comes preinstalled on Mac) and Atom code editor to write our website. I recently did a YouTube walk through of this guide as well; watch it here.
BUILD A WEBSITE
To start off, we need to write some html and css files which will make up our website. Create a project folder on your desktop to house your files: I’ll name mine “Example” for this demonstration. Download Atom code editor off their website (it’s free!) and then open the application. You’ll see a nav bar with the options of “Add folders” and “Reopen a project”. Click Add folders and select your empty project folder. Underneath your project folder in Atom, right click and select “New File”. I’ll be creating 2 html documents and 2 css documents just to demonstrate it is possible to deploy to Akash using multiple of each document. You can download these extremely simple example files or build your own.
This is what the code editor should look like. There are a ton of courses about how to get good at html and css. I recommend free code camp or this introductory course. Btw, I am not sponsored by any company/person/link! I recommend you name your homepage document index.html as it will make navigation easier when you get further in this guide. Once you have written these files, go back to your desktop, enter into your project folder, and double click on index.html. It should open your document into a browser where you’ll be able to test your code and css design!
CREATE A DOCKER IMAGE AND CONTAINER
Now that our website is built, it’s time for the meat and bones of this guide…how do we actually deploy it on Akash? The process will work like this: build a Dockerfile → create a Docker image → create a Docker container → Push to docker hub → create an akash wallet → port in to deployment user interface → write a manifest → deploy. We’ll deal with Docker in this section. First, download Docker to your desktop. Once it is installed, open up terminal. To create the Dockerfile, navigate into your project file with the command:
cd desktop/Example (Remember, “Example” is my folder project name)
Then, to create the Dockerfile, type:
touch Dockerfile
And then to enter and edit the Dockerfile, type:
vim Dockerfile
Once inside the Dockerfile, press the “i” key on your keyboard to enter “insert mode” (edit mode). Type this into your blank Dockerfile:
FROM nginx
COPY . /usr/share/nginx/html
Click the “esc” key on your keyboard to exit insert mode and then type “:wq!” and press enter to exit the Dockerfile and return to terminal. Ensure the Docker desktop app is up and running at this point.
This is what your desktop folder will look like at this point:
Now type:
docker build -t website:1.0 .
This command will build a Docker image inside your docker desktop app. Ensure you are still inside your project folder at the command line or this won’t work (“Example”—our foldername—comes before %).
Now, open up the Docker desktop app and you should see the image you just created under the images tab:
Hover above the Image name, and on the far right, click the “run” button. Type in port 3000 (any local port would work) and click run again.
Now, still in the Docker app, click on Containers/Apps on the lefthand navbar. On this page, you should see a green box running your container! Click on “open in browser”.
Viola! Our website is now running on localhost 3000! Now we can also see why we named our homepage index.html. The program typically opens the index.html file first. If you see an nginx page instead of your webpage, type /index.html after the local host portion which will populate the website. No worries if you need to do this.
Time to push this image to the docker hub so the Akash network will be able to use it! To do this you need to create an account on docker hub. Then on your docker hub account, create a public repository.
Next, on the terminal command line type:
docker tag website:1.0 dockerhubusername/website:1.0
Hit enter and then type:
docker push dockerhubusername/website:1.0
You’ll want to change out “dockerhubusername” with your actual username you created on docker hub. This will tag the image and send the file to your repositories. You should now see a public repository with your image in it on dockerhub!
CREATE AN AKASH WALLET
You will need to create and fund an Akash wallet to fund the deployment costs on the network and create a lease. You can do this at the command line, as stated here. However, I created a new wallet on the keplr browser extension, purchased some AKT on Ascendex and called it a day!
AKASH DEPLOY GUI
We’re at the fun part now. Go back to terminal and type the command:
gh repo clone tombeynon/akash-deploy
This will clone an awesome GUI made by Tom Beynon off his Github. This means you’ll be able to skip a lot of command line coding and deploy your contract much easier. Once you’ve completed this command, go into the docker desktop app and run the image on a local port.
Here, I added a password and used the recovery mnemonic from my keplr wallet. Create the wallet. Then, navigate to your wallet and create a certificate.
Then, navigate to the deployments page and create a new deployment. Enter this into the manifest box (taken from Tom Beynon):
Change the italicized portions. The image section should contain your docker hub username and project name + tag (our example would be 1234/website:1.0).
---
version: "2.0"
services:
web:
image: tombeynon/akash-hello-world:release-v0.1.1
expose:
- port: 80
as: 80
to:
- global: true
profiles:
compute:
web:
resources:
cpu:
units: 0.5
memory:
size: 512Mi
storage:
size: 512Mi
placement:
dcloud:
attributes:
host: akash
signedBy:
anyOf:
- "akash1365yvmc4s7awdyj3n2sav7xfx76adc6dnmlx63"
pricing:
web:
denom: uakt
amount: 500
deployment:
web:
dcloud:
profile: web
count: 1Submit the manifest. Now, click on your bids and create a lease from this bids. Do this quickly as it will expire within 5 minutes! Finally, click send to provider. You are finished and deployed on the decentralized cloud. Pretty amazing huh?
ADDITIONAL DETAILS
I registered my domain name on namecheap and used it as a webdirect for my Akash DN. Your Akash domain will be something long and funky. After you purchase a domain name on namecheap, navigate to the advanced DNS tab found here (/yourdomainname will be replaced with the domain name you purchased.): https://ap.www.namecheap.com/Domains/DomainControlPanel/yourdomainname/advancedns
Then click on Add New Record, scroll down to URL Redirect Record, type @ for host (@ represents your purchased domain name) and then put your Akash web address as the “Value”. If you want your domain name to show up in the search bar, and not Akash’s url, click unmasked and change it to Masked. Masked will display your domain name. It took about two hours for my web redirect to work so give it a little time!
I have undoubtedly missed details, like all guides.
If this guide doesn’t make sense to you or you are struggling, reach out to me at @Jerome1705 on telegram and I’ll be happy to help. I appreciate feedback to make this guide more useable for the general public. The Akash Discord is full of helpful people too! Goodluck!
P.S. Please consider donating to Paul Alexander, one of the last surviving men in the iron lung. A victim of Polio, he never gave up, became a lawyer, and wrote a book. His family is struggling with medical expenses and needs help. https://www.gofundme.com/f/20ozlofeqo?utm_campaign=m_pd+share-sheet&utm_medium=social&utm_source=twitter
