3 posts tagged with "hosting"

Introduction​

Memecoins are starting to gain significant traction. Some of these tokens, such as Windowge98, Damonic Welleams, Wumbo, Spellkaster and $stik, have reached high prices and attracted many retail investors into the ecosystem. Now, you may be wondering how these meme tokens were launched. In this article, we will walk you through all the steps you need to follow in order to create your own memecoin project.

From creating the token smart contract (canister) to building a marketing website using Juno, and finally launching the token on ICPSwap, a major decentralized exchange (DEX) on ICP, we've got you covered.

We will also provide useful tips to ensure your memecoin project is successful. By the end of this article, you will have all the information needed to launch your token.

What is ICP​

The Internet Computer (ICP) is a blockchain-based platform that aims to create a new type of internet, one that is decentralized, secure, and scalable. Developed, among others, by the DFINITY Foundation, the Internet Computer is designed to serve as a global public compute infrastructure, allowing developers to build and deploy decentralized applications (dApps) and services directly on the blockchain. Learn more about ICP

What is Juno​

Juno is a blockchain-as-a-service (“blockchainless”) platform that empowers developers to build decentralized apps efficiently. Similar to Web2 cloud service platforms but with significant improvements, it offers a comprehensive toolkit to scaffold secure and efficient projects running on the blockchain.

In short, Juno is the Google Firebase alternative for Web3.

Creating the token smart contract canister​

To deploy a ledger for your token proceed as following:

• Make sure you have the dfx CLI installed on your machine. If not, follow this guide to complete the installation.

• Creating a canister requires cycles, which measure and pay for resources like memory, storage, and compute power. Follow this guide to load cycles on your machine for deploying your ledger.

The following steps assume that you have cycles on your machine

• On your computer, make an empty folder and name it myToken, and open it in your favorite editor

• Create a file inside the folder and name it dfx.jsonpaste the code below

{
  "canisters": {
    "myToken": {
      "type": "custom",
      "candid": "https://raw.githubusercontent.com/dfinity/ic/4472b0064d347a88649beb526214fde204f906fb/rs/rosetta-api/icrc1/ledger/ledger.did",
      "wasm": "https://download.dfinity.systems/ic/4472b0064d347a88649beb526214fde204f906fb/canisters/ic-icrc1-ledger.wasm.gz"
    }
  },
  "defaults": {
    "build": {
      "args": "",
      "packtool": ""
    }
  },
  "output_env_file": ".env",
  "version": 1
}

Next, we are going to define some parameters for our token and prepare the script for deployment.

Create a new file named deploy.sh and paste the following code:

#!/usr/bin/env bash

# Token settings
TOKEN_NAME="FROGIE"
TOKEN_SYMBOL="FRG"
TRANSFER_FEE=10000
PRE_MINTED_TOKENS=100_000_000_00_000_000
FEATURE_FLAGS=true
TRIGGER_THRESHOLD=2000
CYCLE_FOR_ARCHIVE_CREATION=10000000000000
NUM_OF_BLOCK_TO_ARCHIVE=1000

# Identities
dfx identity use default
DEFAULT=$(dfx identity get-principal)

dfx identity new archive_controller
dfx identity use archive_controller
ARCHIVE_CONTROLLER=$(dfx identity get-principal)

dfx identity new minter
dfx identity use minter
MINTER=$(dfx identity get-principal)

# Switch back to the identity that contains cycles
dfx identity use "<YOUR-IDENTITY>"

# Create and deploy the token canister
dfx canister create myToken --network ic
dfx deploy myToken --network ic  --argument "(variant {Init =
record {
  token_symbol = \"${TOKEN_SYMBOL}\";
  token_name = \"${TOKEN_NAME}\";
  minting_account = record { owner = principal \"${MINTER}\" };
  transfer_fee = ${TRANSFER_FEE};
  metadata = vec {};
  feature_flags = opt record{icrc2 = ${FEATURE_FLAGS}};
  initial_balances = vec { record { record { owner = principal \"${DEFAULT}\"; }; ${PRE_MINTED_TOKENS}; }; };
  archive_options = record {
    num_blocks_to_archive = ${NUM_OF_BLOCK_TO_ARCHIVE};
    trigger_threshold = ${TRIGGER_THRESHOLD};
    controller_id = principal \"${ARCHIVE_CONTROLLER}\";
    cycles_for_archive_creation = opt ${CYCLE_FOR_ARCHIVE_CREATION};
  };}
})"

In this script, we define our token's name, symbol, transfer fee, and initial supply. Adjust these settings to match your tokenomics and token information details. For our token, we are premining 100 million tokens.

The script also specifies default settings for the token and sets up identities for minting and archiving.

Once the file saved, run the command below in your terminal to deploy the token canister on the network:

./deploy.sh

If all the previous steps are successful, you should get a link in this format https://a4gq6-oaaaa-aaaab-qaa4q-cai.raw.icp0.io/?id=<TOKEN-CANISTER-ID> where TOKEN-CANISTER-ID is the id of your token ledger that was deployed.

All the premined tokens are now held by the principal address of the default identity. You can transfer these to an external wallet like plug to ease with the transfer process since using the command line to distribute the tokens is a little bit cumbersome. Learn more about creating token canisters

The next step is to set up a marketing website for your project.

Launching the marketing website​

In this section, we will guide you through setting up a marketing website for your token using Juno. Follow these steps to create your site.

• Ensure you have Node.js and npm installed on your computer. If not, follow the guide to install them.

• Open your computer's terminal and run the following command to initialize a template:

npm create juno@latest -- --template astro-starter

• Provide the name of the project folder myWebsite
• Select no to configure Github Actions
• Select no to configure the local development emurator
• Select yes to install the dependencies
• Select yes to install juno's CLI tool. Juno CLI will help us to deploy our project in the satellite.

Navigate to the project folder myWebsite and open it in your favorite code editor. If every previous step is successfull, running npm run dev in the terminal will open the project in the browser and you should have something similar to this.

Editing the code for the website​

We will create a simple website for our token.

In the pages folder, replace all the code in the index.astro with the code below

---
import BaseHead from "../components/BaseHead.astro";
import { SITE_TITLE, SITE_DESCRIPTION, SITE_SOCIAL_IMAGE } from "../consts";
---

<!doctype html>
<html lang="en">
  <head>
    <BaseHead
      title={SITE_TITLE}
      description={SITE_DESCRIPTION}
      image={SITE_SOCIAL_IMAGE}
    />
  </head>
  <body class="font-montserrat m-0 p-0 bg-[#1a1a2e] text-white">
    <div class="container max-w-[1200px] mx-auto px-5">
      <header class="flex justify-between items-center py-5">
        <div class="logo text-2xl font-bold text-green">Frogie</div>
        <nav>
          <ul class="list-none flex">
            <li class="ml-5"><a href="" class="text-white hover:text-[#ffd700]">About</a></li>
            <li class="ml-5"><a href="" class="text-white hover:text-[#ffd700]">Tokenomics</a></li>
            <li class="ml-5"><a href="" class="text-white hover:text-[#ffd700]">Roadmap</a></li>
            <li class="ml-5"><a href="" class="text-white hover:text-[#ffd700]">Community</a></li>
          </ul>
        </nav>
      </header>

      <main>
        <section class="flex flex-col items-center w-full justify-center py-[40px]">
          <div class="mb-5 flex items-center justify-center w-full ">

            <img height="200" class="rounded-full" width="200" src="https://github.com/sam-thetutor/images/blob/main/imgs/face.png?raw=true" alt="">
          </div>
          <span>Pepe's long lost cousin has arrived</span>
          <h2 class="text-2xl mt-6">Token Details</h2>
          <div class="flex w-1/2 mt-4 gap-2 p-4 justify-center">
            <div class="flex flex-col justify-center gap-1 items-center w-full md:w-1/2 lg:w-1/2">
              <h3 class="text-lg">Canister Address</h3>
              <p class="text-center text-sm">3a6gm-gyaaa-aaaam-acvqa-cai</p>
            </div>
            <div class="flex flex-col justify-center gap-1 items-center w-full md:w-1/2 lg:w-1/3">
              <h3 class="text-lg">Total Supply</h3>
              <p class="text-center">100M</p>
            </div>
            <div class="flex flex-col justify-center gap-1 items-center w-full md:w-1/2 lg:w-1/3">
              <h3 class="text-lg">Ticker Name</h3>
              <p class="text-center">$FRG</p>
            </div>
          </div>

          <button class="inline-block mt-8 bg-[#ffd700] text-[#1a1a2e] px-[30px] py-[15px] rounded-[5px] font-bold hover:bg-[#ffed4a]">
            Buy Frogie Now
          </button>
        </section>

        <section class="flex justify-center gap-8 items-center mb-16">
          <div class="flex flex-col justify-center gap-2 items-center">

            <img src="https://github.com/sam-thetutor/images/blob/main/imgs/forgie5.png?raw=true" class="h-[100px] w-[100px] flex rounded-full" alt="">
            <h2 class="text-2xl">Moon-bound Potential</h2>
            <p class="text-center flex ">Our advanced memetics ensure stratospheric growth! From the waters to the moon</p>
          </div>
          <div class="flex flex-col justify-center gap-2 items-center">
            <img src="https://github.com/sam-thetutor/images/blob/main/imgs/frogie6.png?raw=true" class="h-[100px] w-[100px] flex rounded-full" alt="">
            <h2 class="text-2xl">Vibrant Community</h2>
            <p class="text-center flex ">Join thousands of fellow memers and hodlers!</p>
          </div>
          <div class="flex flex-col justify-center gap-2 items-center">
            <img src="https://github.com/sam-thetutor/images/blob/main/imgs/frogie7.png?raw=true" alt="Meme icon" class="w-[100px] h-[100px] flex rounded-full" />
            <h2 class="text-2xl">Meme-powered</h2>
            <p class="text-center flex ">I am green when the market is up and red when the market is down</p>
          </div>
        </section>
      </main>
    </div>
    <div class=" py-[10px] overflow-hidden">
      <div class=" inline-block whitespace-nowrap pl-[10%]">
        <span class="inline-block px-[20px]">🚀 Frogie to the moon!</span>
        <span class=" inline-block px-[20px]">💎 HODL for life!</span>
        <span class="inline-block px-[20px]">🐸 Pepe's long lost cousin is here!</span>
        <span class=" inline-block px-[20px]">🎉 1 Frogie = 1 Frogie</span>
      </div>
    </div>
    <footer class="text-center py-[20px] bg-[#16213e]">
      <p>&copy; 2024 Frogie. All rights reserved. To the moon! 🚀</p>
    </footer>

</html>

In the above code, we created a simple website to display the logo of our token, as well as the name,symbol and total supply of the token. There is also a button that allows the user to but our token from an exchange where it is listed.

Edit the code above to display the information of your token including the name, symbol, total supply, and logo.

Creating a satellite​

We need to create a satellite that will host our website. Follow the steps below to create your own satellite from the Juno console.

• Navigate to the Juno's administration console website
• Login with your Internet Identity
• On the dashboard, select Launch new satellite
• Provide name myWebsite for the satellite.
• Click Create

Connect Project to the Satellite​

One last step before deployment, we have to link our local project with the satellite that lives on chain. Follow the steps below:

• Back to the project terminal on your computer, run the command juno init and follow the prompts.

• Select yes to login and authorize your terminal to access your satellite.

• Select myWebsite as the satellite to connect to.

• Select dist as the location of the compiled app files.

• Select TypeScript as the configuration file format.

If the above step is successful, a new file juno.config.ts will be added at the root of our project folder.

Compiling and deploying the Project​

Now that we connected our project to the satellite, we can compile and deploy the website.

npm run build

The above command compiles our website and outputs the compiled files in the dist folder

juno deploy

This will deploy our compiled files to the satellite that we connected linked our website to.

At this stage, if all the previous steps are successful, the command will output a link which is in this format https://<SATELLITE_ID>.icp0.io where SATELLITE_ID is the id of the satellite that we connected our project to.

Opening the link in the browser, you should have something like this below

Listing the token on ICPSwap​

In this section, we will look at how to list our newly created token on ICPSwap.

ICPSwap is a decentralized exchange that facilitates token trading and swapping by allowing tokens to be listed and liquidity pools to be created for different token pairs.

And because ICPSwap is a decentralized autonomous organization (DAO) controlled by the community members, you need to submit a proposal for your token to be added on the exchange. This proposal will be voted on by the community members. If the proposal passes, the token will be listed on this exchange.

We will create a proposal to add our token on ICPSwap in the following steps.

• Visit the ICPSwap community group on OpenChat
• Click on te three dots in the right corner and select make proposal

• Select MOTION as the proposal type
• Add a descriptive title, somthing like "ADD FROGIE TO THE TOKEN LIST"
• In the summary section,add all the details about your token forexample the token canister address, social media handles and any other information you feel will help the voter to understand more about your token
• Once your have filled all the fields, click submit and the proposal will be sumbitted.

NOTE: You will be charged a fee of 50 ICS for this service, therefore ensure you have enough ICS balance before you peform this step.

The voting duration for proposals on the ICPSwap platform is typically three days. If a proposal passes during this voting period, your token will be listed on the exchange and will be tradable. Once your token is available for trading, you can update the link on the Buy Frogie Now button to redirect the user to the exchange from where they can buy the token.

If you have reached this step without any errors, congratulations, you have created your first meme coin project. 🥳

Now you can start marketing to attract more users and holders. Good luck! 🤞

Tips for a successful memecoin project​

In this section, we will cover some tips you need to launch a successful memecoin project.

Develop a Unique and Relatable Concept​

The first step to creating a successful meme coin is finding a unique topic that resonates with people. Your concept should be relatable, funny or nostalgic. Capture the essence of internet culture with a catchy name and logo that embodies the humor and appeal of your chosen meme.

Build a Strong Community​

Think of your meme coin's community like a big group of friends who all love the same joke. To make that friend group huge and enthusiastic:

• Know your meme and what makes your coin funny
• Find the websites, apps, and chat rooms where your target audience hangs out and get involved
• Make hilarious memes using your coin's name or logo and encourage your community to create them too
• Give away some of your coin as prizes to active community members
• Work with other meme coins or popular meme accounts to reach even more people
• Make new people feel instantly part of the joke

Implement a Comprehensive Marketing Strategy​

Effective crypto marketing is critical for meme coin success. Implement a multi-faceted strategy across various channels:

• Utilize social media platforms like Twitter, Reddit, and Telegram to build a strong online presence
• Create engaging content like memes, videos, blog posts to generate buzz and attract attention
• Host events, AMAs, and giveaways to keep your audience interested and invested
• Form strategic partnerships with influencers, projects, and industry leaders to expand your reach
• Monitor performance using analytics tools and gather feedback to continuously improve

Leverage Influencer Marketing​

Most successful meme coin projects hire specialized crypto influencer marketing teams with extensive networks. Partner with online personalities who like memes or crypto and have them talk about your coin to their followers.

Conclusion​

In this article, we have covered everything you need to launch a successful memecoin project, from creating the token canister, to creating a marketing website using Juno and listing the token on ICPSwap. This article is for educational purposes only and is not financial advice of any form. Do Your Own Research (DYOR) if you want to invest in memecoins.

👋

Stay connected with Juno by following us on Twitter to keep up with our latest updates.

And if you made it this far, we’d love to have you join the Juno community on Discord. 😉

Introduction​

Beyond cryptocurrencies, Blockchain technology offers tools to build secure, transparent applications fully controlled by the user. Building a blog website on the blockchain allows the user to establish a censorship resistant space where they retain full ownership of their content and data.

In this article, we will look at how to create and host your blog website on the blockchain using Juno. Juno is an open-source Blockchain-as-a-service platform that offers a fully decentralized and secure infrastructure for your applications. This article will cover setting up a boilerplate project, configuring the hosting, developing the code for your blog and deploying the project on the blockchain using some of Juno's super powers.

By the end of this article, you will have an understanding of how Juno works, how to host your websites on the blockchain and how to automate the different tasks using Github Actions.

Prerequisites​

• Prior knowledge of working with HTML, CSS and JavaScript
• Prior knowledge of working with terminal or command line
• Prior knowledge of Github

To follow along this article, you dont need any knowledge about crypto and blockchain

What is Juno?​

Juno works just like traditional serverless platforms such as Google Firebase or AWS Amplify, but with one key difference: everything on Juno runs on the blockchain. This means that you get a fully decentralized and secure infrastructure for your applications, which is pretty cool if you ask me.

Behind the scenes, Juno uses the Internet Computer blockchain network and infrastructure to launch what we call a “Satellite” for each project you build. A Satellite is essentially a smart contract on steroids that contains your entire app. From its assets provided on the web (such as JavaScript, HTML, and image files) to its state saved in a super simple database, file storage, and authentication, each Satellite controlled solely by you contains everything it needs to run smoothly.

What is ICP?​

The Internet Computer (ICP) is a blockchain-based platform that aims to create a new type of internet, one that is decentralized, secure, and scalable. Developed, among others, by the DFINITY Foundation, the Internet Computer is designed to serve as a global public compute infrastructure, allowing developers to build and deploy decentralized applications (dApps) and services directly on the blockchain.

Unlike traditional blockchains, the Internet Computer uses a unique consensus mechanism called Threshold Relay, which allows it to achieve high transaction throughput and low latency. The platform is also designed to be highly scalable, with the ability to add more nodes and increase its computing power as demand grows. This makes the Internet Computer a promising platform for building a wide range of decentralized applications, from social media and e-commerce to finance and cloud computing. Learn more about ICP

About the Project​

This is a secure and decentralized blog website. The frontend is build with Astro, which is a modern, flexible web framework focused on building fast, content-rich websites with minimal JavaScript. Here is what you will build by the end of thi article:

Setting up the project​

In this section, we will look at how to create a boilerplate template for our project.

In your terminal, run the command below

npm create juno@latest -- --template astro-starter

In the prompts;

• Provide the name of the project folder myBlog
• Select yes to configure Github Actions
• Select no to configure the local development emurator
• Select yes to install the dependencies
• Select yes to install juno's CLI tool. Juno CLI will help us to deploy our project in the satellite.

Navigate to the project folder myBlog and open it in your favorite code editor. If every previous step is successfull, running npm run dev will open the project in your browser and you should have something similar to this.

File Structure​

Having followed the above steps, and opening the project in a code editor, your project should have a file structure similar to the one below.

Blog code​

In this section,we will adapt the boilerplate code to transform your project into a blogging website.

index.astro​

Replace all the code in the in the index.astro file with the code below

---
// Import necessary components and data
import blogPosts from '../components/blogPosts.json';
import Article from '../components/Article.astro';
import Background from "../components/Background.astro";
import BaseHead from "../components/BaseHead.astro";
import { SITE_TITLE, SITE_DESCRIPTION, SITE_SOCIAL_IMAGE } from "../consts";

---

<!doctype html>
<html lang="en">
  <head>
    <BaseHead
      title={SITE_TITLE}
      description={SITE_DESCRIPTION}
      image={SITE_SOCIAL_IMAGE}
    />
            <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.16/dist/tailwind.min.css" />

  </head>

  <body>
    <header class="bg-gray-800 text-white py-4">
      <nav class="container mx-auto flex justify-between items-center">
        <a href="/" class="text-xl font-bold">My Blog</a>
        <ul class="flex space-x-4">
          <li><a href="/" class="hover:text-gray-300">Home</a></li>
            <li><a href="*" class="hover:text-gray-300">Articles</a></li>
          <li><a href="*" class="hover:text-gray-300">About</a></li>
        </ul>
      </nav>
    </header>

    <main>
      <div class="container mx-auto my-8">
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          {blogPosts.map((post) => (
            <Article
              title={post.title}
              image={post.image}
              description={post.description}
              url={post.url}
            />
          ))}
        </div>
      </div>
    </main>
    <Background/>
  </body>
</html>

The above code displays a navbar that has three tabs Home,Articles, and About. It also displays information about the different articles from our sample article data.

Article.astro​

Replace the code in the Article.astro file with the code below

---
interface Props {
  title: string;
  image: string;
  description: string;
  url: string;
}

const { title, image, description, url } = Astro.props;
---

<div class="bg-white shadow-md rounded-lg overflow-hidden">
  <a href={url} target="_blank">
    <img src={image} alt={title} class="w-full h-48 object-cover" />
  </a>
  <div class="p-4">
    <h3 class="text-xl font-bold mb-2">{title}</h3>
    <p class="text-gray-600 mb-4">{description}</p>
    <a href={url} target="_blank" class="text-blue-500 hover:text-blue-700">Read more</a>
  </div>
</div>

We will diplsay the title, image, desciption of every article from our sample data, as well as a link to the full article.

blogPosts.json​

In the components folder, create a new file and name it blogPosts.json. Paste the code below

[
  {
    "title": "Introduction to Astro",
    "image": "https://juno.build/img/cloud.svg",
    "description": "Astro is a new static site generator that makes it easy to build fast, content-focused websites.",
    "url": "https://docs.astro.build/en/getting-started/"
  },
  {
    "title": "Tailwind CSS: A Utility-First CSS Framework",
    "image": "https://juno.build/img/launch.png",
    "description": "Tailwind CSS is a utility-first CSS framework that makes it easy to build responsive and customizable user interfaces.",
    "url": "https://tailwindcss.com/docs/installation"
  },
  {
    "title": "The Benefits of Static Site Generation",
    "image": "https://juno.build/img/moon.svg",
    "description": "Static site generation offers several benefits, including improved performance, better security, and easier deployment.",
    "url": "https://www.netlify.com/blog/2016/05/02/top-ten-reasons-the-static-website-is-back/"
  },
  {
    "title": "Introduction to Astro",
    "image": "https://juno.build/img/illustration.svg",
    "description": "Astro is a new static site generator that makes it easy to build fast, content-focused websites.",
    "url": "https://docs.astro.build/en/getting-started/"
  }
]

This file holds our sample article data that we are using for this project.

If all the above steps are successfull, your project should look like this in the browser

Deployment​

In this section, we will look at how to deploy our project live.

Creating a satellite​

We need to create a satellite that will host our project. Follow the steps below to create your own satellite.

• Navigate to the administration console website
• Login with your internet Identity
• On the dashboard, select Launch new satellite
• Provide name myBlogSatellite for the satellite.
• Click Create Satellite

Connect Project to the Satellite​

We need to link our project to the satellite. follow the steps below

In the project terminal, run the command juno init and follow the prompts

• Select yes to login and authorize the terminal to access your satellite in your browser

• Select myBlogSatellite as the satellite to connect the project to

• Select dist as the location of the compiled app files

• Select TypeScript as the configuration file format.

If the above step is successful, a new file juno.config.ts will be added at the root of our project folder. It contains the configuration necessary for our poject to connect to the satellite. You need this file if your project is to be deployed successfully to the satellite. Learn more about this configuration

Compiling and deploying the Project​

Now that we connected our project to the satellite, we have to compile and deploy project to the satellite

npm run build

The above command compiles our project and outputs the compiled files in the dist folder

juno deploy

This will deploy our compiled files to the satellite that we connected linked our project to.

At this stage, if all the previous steps are successful, juno deploy command will output a link whixh is in this format https://<SATELLITE_ID>.icp0.io where SATELLITE_ID is the id of the satellite that we connected our project to.

Opening the link in the browser, you should have something like this below

If you have reached this step, well done, you have successfully deployed your first blog website on the blockchain using Juno.

Setting up Github Actions​

If you noticed in the previous steps, every time we make changes to our project, we have to manually run the commands that compile and deploy our code to the satellite. But in this section, we will learn how to automate these tasks using Gihtub Actions so that whenever we make changes to our project, these changes are automatically deployed to oour satellite

In our project, we have a folder .github which contains the file deploy.yaml. This file has all the configurations required to setup Github Actions in our project. This folder must be present in your poject to successfully setup Github Actions. You can add it manually if you dont have it in your project. Below are the contents of the deploy.yaml file

name: Deploy to Juno

on:
  push:
    branches: [main]

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Check out the repo
        uses: actions/checkout@v4

      - uses: actions/setup-node@v3
        with:
          node-version: 22
          registry-url: "https://registry.npmjs.org"

      - name: Install Dependencies
        run: npm ci

      - name: Build
        run: npm run build

      - name: Deploy to Juno
        uses: junobuild/juno-action@main
        with:
          args: deploy
        env:
          JUNO_TOKEN: ${{ secrets.JUNO_TOKEN }}

Generating a secret token from the juno console​

To set up Github Actions, we need a secret token that uniquely identifies our satellite. Github needs this secret token to associate our repo to the satellite.

• Visit juno console, and select myBlogSatellite satellite.
• Under the controllers tab, click add controller
• Select 'Genetate new controller' and select 'Read-write' as the scope.
• Click submit. Once the new controller is generated, it will provide a secret token, copy and store the secret token.

Setting up Github Repo​

On your Github account, create a new repo and name it myfirstBlog.

• On the settings tab, navigate to Secrets and variables and click Actions.
• Click on the new repository secret, add JUNO_TOKEN as the name, paste the secret token you copied from the juno console in the Secret section.
• Click Add secret.

Pushing Code to Github​

To upload our code to our remote GitHub repository, we must establish a connection between our local project and the repository

Run the command below in your project terminal

git init
git remote add origin https://github.com/sam-thetutor/myfirstBlog.git
git add .
git commit -m "my first commit"
git push -u origin main

The above code established the required connection to our remote Github repo, and pushes all our project code to that repo.Now every time we make changes to our project, all we have to do is push these changes to our github repo and they will be deployed to our satellite automatically. Learn more about setting up Github Actions with Juno

Next Steps​

Now that we have successfully hosted our blog website on the blockchain, you can go ahead and add more articles to the blog to showcase your skills. You can also add more features on the website to make it more robust.

Conclusion​

In this article, we have looked at how to create a boilerplate template project using juno, how to create a satellite from the juno console, writing code for our project, how to connect the satellite to the our local project, deploying our project to the satellite and configuring Github Actions to automate compiling and deployment tasks for our project

👋

Stay connected with Juno by following us on Twitter to keep up with our latest updates.

And if you made it this far, we’d love to have you join the Juno community on Discord. 😉

Photo by Sebastian Svenson on Unsplash

Deploying a static site fully on Web3 is possible thanks to the Internet Computer and made effortless with the help of Juno. It’s just as easy as it is on the good old Web 2.0, but without the limitations of trust-based or centralized approaches that may not be as beloved.