DEV Community: Oxpampam

Beginners Guide To Building A Static Decentralized Website(dWebsite) Using IPFS + Unstoppable Domains

Oxpampam — Tue, 14 Mar 2023 14:38:38 +0000

Introduction

In the traditional online space, hosting a website would entail using dedicated or shared hosting plans from platforms such as Hostinger, BlueHost, e.t.c, creating and registering a domain name with services such as NameCheap and Google domains, and lastly pointing your domain to your hosted server.

Having said that, this process appears to be experiencing major setbacks. Centralised registrars and private servers are becoming increasingly vulnerable to phishing attacks, denial of service attacks, hijacking, and other forms of threats. Websites can be taken down because these providers control your content. When this occurs, web content becomes unavailable to end users, increasing the bounce rate.

However, you would want users to have complete access to your content at all times, right? This is where decentralized hosting and serving of your website comes into play.

Decentralized web hosting uses a peer-to-peer system to store content across computer networks (nodes). In this case, even if one node fails, your content is served by other running nodes, ensuring that your content is always available.

In this article, you will learn how to host a static website using the Interplanetary File System (IPFS), Pinata, and Unstoppable Domain (UD), as well as visualize the content in your browser. Here's a quick rundown of what you'll be doing in this article:

Introduction
What are decentralized websites
Prerequisite
Building your Static Webpage
- Deploying to IPFS
- Pinning website on Piñata
Purchasing Domain on Unstoppable domain
Connecting IPFS hash on UD
Resolving dWebsites in a browser
Websites hosted using IPFS + UD(dWebsite)
Conclusion

Decentralized Websites(dWebsites)

Simply put, dWebsites are websites that serve censorship-resistant content to end users by utilizing the decentralized storage system and blockchain domains. Let us now break down these two concepts and explain why they are important to dWebsites.

dWebsites, as opposed to traditional websites, use decentralized storage (dStorage) systems to ensure that data or websites stored are accessible, have no single point of failure, and cannot be shut down. IPFS is one example of a dStorage system.

The Interplanetary File System (IPFS) is a distributed peer-to-peer system for storing and accessing files, websites, applications, and data. When storing data, IPFS stores data based on its content and returns the content identifier(CID), which is a unique hash of that data. Unlike the traditional web, which uses location addressing, IPFS employs content addressing, which means that files are stored based on their content rather than their location. As a result, you won't be able to change the content of the files while keeping the same CID. Therefore, if the content changes, so does the CID.

Blockchain domains are another essential part of dWebsite. These domain names are required for mapping d-website hash (CID) hosted on IPFS to human-readable names. In contrast to traditional domain naming services (DNS), which are prone to downtime and single-point control, decentralized DNS stores their domain registries on the blockchain, making it resilient.

For the purposes of this tutorial, you will purchase your blockchain domain from Unstoppable Domains.

Now that you know what decentralized websites are, let's get started building one!

Prerequisites

Must be familiar with Command Line
Basic Knowledge of HTML, CSS, and Javascript(JS)

Building your Static Webpage

This section demonstrates how I uploaded my simple portfolio website to IPFS.

To host your simple one-page on IPFS, you must have created a index.html file in your project folder and added your CSS and any other assets. To understand the structure, read this guide.

You can host a multipage website in addition to a single-page website. To accomplish this, refer to this guide.

You can find the full implementation of my static website on Github

Deploying to IPFS

After you've successfully created your website project, the next step is to host it on IPFS. In this section, you'll learn how to use IPFS CLI to host your content on IPFS.

Installing IPFS

This section shows how to install IPFS using Javascript. To install IPFS, execute the command below:

npm install -g ipfs

To confirm its download, run the command below:

jsipfs —version

Click this link to see other ways to install IPFS.

Uploading your website to IPFS

After successfully installing IPFS, we need to initialize IPFS. To do this, run the command below:

jsipfs init

The next step is to connect and interact with the IPFS network, by starting the daemon. To do this, run the command below:

jsipfs daemon

Output
Your terminal logs an output, as displayed in the image below. Click on the link to navigate to the IPFS Web UI.

Now that we have IPFS up and running, let's upload our website to IPFS. To do this, open up a new terminal in your project folder and run the command below:

jsipfs add -r .

The -r flag adds recursively, and the “.” indicates we are running the command from the webpage directory.

Output

It returns the hash/CID of the folder uploaded on IPFS

Now you can visualize this content via a gateway. To interact with the IPFS node in your browser, make sure to install the IPFS Companion extension.

https://ipfs.io/ipfs/CID
https://ipfs.io/ipfs/QmSSGVRShvLiVcYVRJMwd56CQ1BnD3jTEcSrkWYyPTspr5

Alternatively, you can make use of IPFS Desktop to host your content. To understand more, you can check out this guide.

Pinning website on Pinata

To ensure that your website content is retained and persistent across the IPFS network, you must pin it. You used the jsipfs add -r. command in the previous step to recursively pin your website to your local node. However, it is best practice to pin important content like this to more than one IPFS node to ensure that the data is always accessible and not removed during garbage collection.

For the purposes of this tutorial, you will pin your dWebsite using Pinata. To begin, you must go to the Pinata website, sign up, and pin your website using the CID that was previously generated.

After successfully signing in, you can now pin your content using the Add File button, as seen in the dashboard below:

Note
The steps for uploading and pinning your website content must be repeated every time you make changes to your files, which is inconvenient. All of the processes listed above can be automated with tools like Fleek. An article about fleek and how to handle automated deployments will be written in the future. Keep an eye out for updates.

What happens now that you have successfully hosted your website content on IPFS and pinned it on Pinata? Take a wild guess.

You got it! You need to buy a blockchain domain.

Purchasing Domain on Unstoppable Domain

Blockchain domains are an important layer in the development of a decentralized website. They ensure that dWebsites are completely censorship-resistant, and that content hosted on dStorage is mapped to human-readable names. You will buy domains from Unstoppable Domains in this guide.

To begin, go to the UD website, sign up, and then purchase your desired domain.

In my case, I used the "Pay with Crypto" option to purchase oxpampam.blockchain. You may select any option that appears to be suitable to you.

After successfully purchasing your domain, you can verify your purchase on viewblock.io.

In the image above, you will see the URL, IPFS hash, owner profile, OpenSea NFT, and the blockchain (Polygon) it was minted on.

Connecting IPFS hash on UD

The next step is to map your IPFS hash to the newly purchased domain. In the following steps, you will connect your IPFS hash to UD.

Step 1: Navigate to your Domain Dashboard

Login to your UD account
Select the Account
Select My Domains

Step 2: Manage Domains

Select Manage
On successful page load, click website

Step 3: Manage the Website

To attach the IPFS hash to the domain, let us go through the following process:

Select Link Website under Custom website linking
Paste the IPFS hash in the input field provided
Select Launch Website
Sign the transactions to update the website hash

The image below represents what your dashboard will look like after uploading the IPFS hash.

Resolving dWebsites in a browser

To confirm that the blockchain domain navigates to your hosted content, you have to paste the blockchain domain into a web browser.

It’s important to note that, by default, the browser cannot resolve the content in the blockchain domain. Thus the need for a tool such as Unstoppable Extension, developed by Unstoppable Domain Team. This extension is used to access blockchain domains. You can download this extension on both Chrome and Firefox.

Having installed this extension, you can now access the website by adding http:// as a prefix to the domain name.

An example is http://oxpampam.blockchain

Brave browser (for desktop and Android) automatically resolves unstoppable domains, and as such, you don’t need to download any extensions.

Websites hosted using IPFS + UD(dWebsite)

The following are examples of websites hosted in a decentralized manner using IPFS and Unstoppable Domains.

MyEtherWallet: myetherwallet.crypto
Kyber Network: kyber.crypto
Ivan On Tech: ivanontech.crypto
Huddle01: Huddle01.crypto
Dtube: Dtube.crypto

Here is a list of some of the dWebsites on unstoppable domains

unstoppable.nft

@unstoppableweb

/5 Here's some inspiration for your Web3 site:

- Build a personal blog (TimDraper.crypto)
- Launch your NFT (DeadHeads.NFT)
- Inspire the future of gaming (bizesports.x)
- Build educational content (Hashoshi.crypto)

Visit changetheweb.x on Brave to get started!

16:02 PM - 07 Sep 2022

Conclusion

In this article, you learned how to host a simple static website in a decentralized manner using IPFS and Unstoppable domains. Additionally, we looked at the downsides of traditional web hosting as opposed to decentralized web hosting. By hosting your website in a decentralized manner, your website becomes more resilient, transparent, and censorship-resistant.

You can take this further by building a multi-page dwebsite. Do share your build.

For more additional guides on building dWebsites using Unstoppable Domains and IPFS, you can check out these guides:

Quickstart guide to Developer Relations

Oxpampam — Thu, 22 Dec 2022 11:19:54 +0000

Introduction

My first encounter with the term “Dev Rel” was on a social platform, Twitter. Talents on this platform share tips, blog posts, and other resources to empower other developers. My offline experience was kind of similar. This was at my first IRL conference, called Unstack Africa, where great speakers were passionate about educating and giving value to technical talents.

You will observe that both my offline and online experiences have the same thing in common, which is educating others. Does that mean that Dev-Rel is about educating others? You will find out in a moment.

DevRel is relatively new, and navigating the space is hard and a bit of a hurdle. As a result, the purpose of this guide is to educate you and provide insights from Dev Rel experts.

What is Developer Relations?

Developer Relations (also called Dev Rel) is a team within an organization that prioritizes building relationships with external developers. It focuses on enabling and empowering developers with the right tools to succeed at using a product or technology.

According to Caroline Lewko, it is the professional practice of engaging with developers as the primary user of a product, generally outside of one’s own company. At this level, DevRel practitioners act as a liaison between the company and the developer community.

This community is usually a group of individuals who have an interest in the same technology or product. Therefore, it is the work of DevRel to keep the flame of interest burning to the end of retaining them.

For example, take Paypal - a payment solution that helps people pay online in a simple and safe way,
sets up a developer relations team to enable developers get the most out of their product suite ranging from APIs and SDKs. You will want to ask what the team will be doing. Let's find out in a moment.

What does the Developer Relations team do?

Educate: As a devrel practitioner you will be investing a lot of time educating your developer community. By doing this, you'll provide all they need to get their job done. Educating your technical audience might take different forms ranging from writing blogpost, Speaking at an event, hosting an online workshop, creating a video content

Teaching is a meta-strength in Devrel. It is a multi-faceted role that requires variety of skills e,g writing, speaking, and creating video contents. One good thing is to realize where your strength lies and gain mastery!

Community Building and Engagement: This involves consistently keeping in touch with your developer community. This is how relationships are built. A devrel practitioner, to the community is a representative of the company and to the company, represents the community. As a result devrel must invest in the success of its community.
Code: Because it's a technical product you are building a community around, devrel practitioners must be able to speak and understand the language the developer community speak to be able to engage and educate them. This simply means they must know how to code because more often they would be involved in building demos, sandboxes, workshops, testing out new features et al.

For example, a dev-rel engineer on the Paypal dev-rel team will need to know how to code. Whether JS, Python, or whatever programming language the SDKs or APIs support.

Who makes up the Developer Relations team?

Developer Relations is an umbrella of things and as a result requires different talents to focus on certian aspects. The following are the roles likely to be reckoned with in Dev Rel

Developer Advocates: They’re often building sample apps, live coding, or giving demos, and engaging with the community on a technical level. They sort of have coding experience.

Technical Ambassadors: They need to be able to carry on conversations within and outside the community or ecosystem. As well as answer questions about the technical aspects of your product. This role may not require coding experience.

Developer Relations Manager: Manages the devrel team, set its strategy and goals. Also makes sure they are not engaging in task relating to other depts such as marketing, sales et all.

Technical Writers: document and write about the product in a clear and simple approach.

How to set yourself up for success

Some of these pointers here are from Tejas Kumar session in DXMentorship class.

Now that you have a glimpse of what devrel is, what they do and the roles involved. You might consider the following if you want to jumpstart your career as a devrel practitioner:

Join Communities: All this is saying is, engage with your local communities. Meaning start by attending events in your local vicinity, help a fellow community member, or even submit a CFP to share your knowledge about your wins and struggles building a feature or product. Examples of communities to join GDG, Web3Bridge(Web3 enthusiast)
Build high quality relationships: To navigate through DevRel as a profession, you need to understand building relationships. This relationship, should not be transactional i.e not because you need help from them but rather because you want to help them.
Offer value to your network: Be valuable to people in your network. This may range from helping talents solve their bugs, helping devs make their first open source contributions, sharing tips and resources that have helped while starting out. This way you are building authenticity and authority to reckon with.
Be open-minded and Data-driven: Treat every reactions and outcome as a data to make a better informed decision in your career.
Keep Upskilling: This is a neccessity in every career as its plays a major factor in one’s relevance in the industry. This is same for DevRel, as the field is relatively new and still growing, as a practitioner you need to upskill to stay abreast of new trends and strategies.

Other things to keep in mind

You cannot measure DevRel: Companies put pressure on the devrel team as to measuring success. The no-brainer here is, the best way to measure devrel is to not measure it. Because your job is to build relationships and this efforts can only be proven overtime.

Do DevRel internally: The members of your team are developers as a result you need to focus on doing devrel internally first. Listen to their needs, liaise with the product or engineering team to organize seminars explaining the technicalities of the product. This will be beneficial to both the community, junior developers or even new hires.

Optimize for what you are naturally gifted with: Because DevRel is a multi-faceted role, one thing to keep in mind whether you are just starting out, or at the first stage of an interview, or already working as a DevRel engineer is to always optimize for what you are naturally gifted with. For example, you might be naturally convenient and proficient with speaking, optimize this strength. The idea is to master this gift and learn others as you go on in your career.

It is DevRel and not DevSell: Dev Rel most of the time intersects with other departments such as marketing, Sales et al. It is important to understand that your responsibility as a devrel practitioner is to build relationships and not sell to developers. Selling is the work of the sales team as the name implies and DevRel is about building relationships as implied in its name.

Conclusion

You must have found out that DevRel is about educating and building high quality relationships with your developer audience. Just like every other field, it is ever growing. You need to keep learning and upskilling to ensure your developer community succeed.

To learn more about this profession here are some resources or communities to check out.
The list is long but this should give you a headstart.
Devrel-resources
DXMentorship
Developer Advocacy Book
Others

if you found this helpful or have any questions, you can drop your comment or reach out to me on Twitter.

Thanks for reading through.