1. A registered Avvy domain (e.g., webpage.avax).
1. How To Register A Domain
2. Little to no knowledge of HTML/CSS (for GrapesJS).
3. A Core wallet or another EVM-compatible wallet.

GrapesJS is a web-based, open-source tool designed to make website building easy for everyone - even those without coding knowledge. It offers a user-friendly, drag-and-drop interface where you can create and customize websites by simply dragging elements like text, images, and buttons onto your page. Think of it like a digital canvas where you can visually design and arrange your content, much like using a graphic design tool but for building web pages. GrapesJS provides a variety of pre-built components and templates, allowing you to create professional-looking websites without needing to write a single line of code.

1. Go to the GrapesJS website.
1. grapesjs.com
2. Click on the Webpage Demo button to start the GrapesJS editor.

3. Design your website using the drag-and-drop interface.

1. Once you have completed your design, click on the </> button in the menu bar at the top of the screen.

2. In the window that displays you can select Export to ZIP , in the bottom left corner of the window, to download your website files.

3. Find the zip file you just downloaded in your file system (Windows Explorer, Finder, etc) and open it to reveal your HTML and CSS files.
4. Create a folder (these are called directories in GitHub) called “src” and put the “index.html” file and CSS folder from Step 1.2.3 into that “src” folder. Your folder structure should mimic the image below.
1. Folder structure example
return to Step 2.4.4
return to Step 2.5.5

GitHub is a web-based platform that allows people to collaborate on projects by managing and sharing files, primarily code, though it's useful for any file type. Think of it as a version control system where you can track changes to your documents, work with others simultaneously, and keep a history of all edits. It's like Google Docs, but for more complex projects, where every change is recorded, and multiple versions of the project can be worked on and merged together seamlessly. It also fosters community interaction through discussions, issue tracking, and collaborative problem-solving.

1. Go to the GitHub website.
1. github.com
2. Add an e-mail address, and click the Sign up for GitHub button or sign in with an existing account.
1. Click here to follow GitHub’s tutorial on creating an account.

1. Click the +▼ button, in the top-right corner of the screen, within the menubar.
return to Step 3.3.3

2. Click the New Repository button, from the dropdown menu, and give it a name relevant to your website.
1. Choose your repository to be public or private.
2. Check the box to create a README.md. (optional) ~> About READMEs
3. Check the box to create a License. (optional) ~> About Licensing

1. Click the Add file▼ button to the left of the < > Code▼ button.

2. Click the Create new file button in the dropdown menu that displays.

3. A new page displays. Type “src/” in the “Name your file…” section to the right of your repository name. This will create you a “src” folder in GitHub.
return to Step 3.4.2

4. Click the new “Name your file…” section and type “css/”. This will create another folder called “css”.

5. Click the new “Name your file…” section and name the file “dummy.file”. GitHub does not allow the creation of empty directories so we must create a dummy file until we can upload the HTML/CSS in the coming step.

6. Click the Commit changes… button. A new window displays with another Commit changes button; click it.

7. The window will disappear. Click the link titled as your repository name.

1. Click the src directory.

2. Click the Add file▼ button to the left of the < > Code▼ button.

3. From the dropdown menu, click the Upload files button.

4. Drag and drop the "index.html" file from Step 1.2.4 into the browser or click the "choose your files" link to upload the file from Step 1.2.4.

5. Below that window is another window titled "Commit changes".

6. In the top section insert a brief description of the upload - ex. uploading HTML file.

7. Click the Commit changes button.

1. Click the src directory.

2. Click the css directory.

3. Click the Add file▼ button next to the ... button.

4. From the dropdown menu, click Upload files .

5. Drag and drop the "styles.css" file from Step 1.2.4 into the browser or click the "choose your files" link to upload the file from Step 1.2.4.

6. Below that window is another window titled "Commit Changes".

7. In the top section insert a brief description of the upload - ex. uploading CSS file.

8. Click the Commit changes button.

Fleek is a platform that simplifies the process of creating and hosting websites on the decentralized web. It allows anyone, even those without technical skills, to deploy websites using decentralized technologies like IPFS (InterPlanetary File System) and blockchain. With Fleek you can integrate seamlessly with popular web development frameworks, making it easy to maintain your site while leveraging the benefits of decentralized infrastructure, such as enhanced privacy and control over your data.

1. Go to the fleek website.
1. Fleek website
2. Click the Create a free account button.

3. Sign up for an account with a wallet or email address.

1. Click the Add new▼ button in the top-right corner of the screen.

2. From the dropdown menu, click on the Deploy my site button.

3. Click the GitHub button.

1. Click the Install Fleek app on GitHub button.

2. A window populates, representing GitHub, suggesting to install & authorize Fleek CI.

3. Choose the "Only select repositories" option and select the repository, created in Step 2.2, from the Select repositories▼ menu.

4. Scroll down, if necessary, and click the Install & Authorize button.

1. Click the Deploy button to the right of the repository you want to deploy to IPFS as your website.

2. The window changes to a new display titled "Configure Site". Change the "Publish Directory" section to "src". This is the folder you created in Step 2.3.3,

3. Click the Deploy site button
4. A dashboard will display which provides the status of the initial deployment.

5. An IPFS hash was generated.

1. Click the Settings option in the menubar at the top of the website.

2. A new page displays with a sidebar to the left. Click the Domains option in the sidebar.

3. A window to the right of the sidebar displays titled "Custom Domains". Click the "example.com" section to add your domain.
1. ex: webpage.avax.sh

4. It will check for availability and then confirm in green text below the provided input -
   ✔ webpage.avax.sh is available
   .

5. Click the Add custom domain button.

6. A new window displays titled "Set CNAME Record". Here you will notice a "Value" section. Click the icon to copy the link, within the "Value" section, to your clipboard.
   ! keep this window open! !
return to Step 4.3.4
return to Step 5.1.1

1. Go to Avvy Domains website.
1. Avvy Domains website
2. Click the Connect button.

1. Click the My Domains button.

2. Click the domain of your choice. You are then provided the domain configuration page for that domain.
3. Look for the section titled "Records".
1. If this is a new domain then you will need to set the resolver. If your resolver is set, then move forward to Step 4.2.4
2. Click on the "Set a resolver" link in the "Basic Information" section (not shown in image) or click the "Set a resolver" link in the "Records" section (shown in image).

3. A new window displays titled "Set Resolver". Change the "Type" section from "None" to "Default Resolver".

4. Click the Submit button.

5. Your preferred wallet will display a transaction user interface for you to approve the transaction initiated by clicking the Submit button in the previous step. (A small fee must be paid to make changes to the Avalanche C-Chain).
6. Click the Approve button to authorize the transaction.

7. Click the Close button after the transaction has confirmed. Continue to Step 4.2.4.

4. Click the "Add a record" link in the section previously mentioned in Step Step 4.2.3.

1. A new window displays titled "Add Record". Two sections appear within the window titled "Type" and "Value" respectively.

2. Click the "Type" section and a dropdown menu displays.

3. In the dropdown menu you will notice multiple record types appear. Choose the "DNS CNAME Record" option.

4. In the "Value" section you will paste the link that was copied from Step 3.5.6

5. Click the Submit button.

1. Your preferred wallet will display a transaction user interface asking for you to approve the transaction initiated by clicking the Submit button in the previous step (You must pay a small fee to add data to the Avalanche C-Chain).
2. Click the Approve button to authorize the transaction, and add the DNS CNAME to your Avvy domain that was chosen in Step 3.5.6

1. Go back to the Fleek site where you should still see the window from Step 3.5.6.
2. Click the Ok, I have added it button.

3. It will begin to verify the management request.
4. Once verification has finished you should see a small, green Active sign next to the respected domain.

5. Click the three dots to the right of the Active sign and a menu displays under it.

6. Click the Visit button. Your website should load in a new tab.

7. You have just deployed your first .avax domain!