Create a Website

Websites hosted on the Taubyte-based cloud computing network provide a scalable and performant solution for serving web content. In this section, we’ll guide you through the process of creating a website using the Taubyte Web Console and the Taubyte CLI ‘tau’. We’ll also explore how the creation of a website impacts the configuration and code repositories.

Web Console

Creating a Website using the Taubyte Web Console is a straightforward process:

• First, we’re going to create a Global Website that will be accessible to all applications within the project. To begin, click on ‘Websites’ in the left side menu.

Create a Website

Let’s start by creating our first function.

• Click on the ➕ button. This action will open a modal.
  • (1) Input a name
  • leave Repository set to --Generated--, this will create a new repository for you.
  • (2) Selected the generated domain. Might be named diffrently.
  • (3) Type in / then hit enter in Paths.
  • (4) Validate

• A second model will pop up. For now let’s go for the VueJs Template. (1) Select & (2) Click on generate.

• Both modals will close and you’ll you your new website in the list.

Push Your Changes

As explained in the previous section, since Git is the only interface with the Cloud, the Web Console clones the config and code repos in a browser virtual file system. You need to push your changes.

• Click on the push botton situated on the bottom right.

• Review the diff. Note:
  • domains set to generated
  • path set to /
  • source set to newly created repository

• (1) write a commit message & (2) click on Finish to push.

CI/CD

In the Taubyte Web Console, once you’ve created and configured your function and pushed the changes, the CI/CD process is triggered automatically. This process validates your changes in both the configuration and code repositories. It’s important to note that the CI/CD jobs are launched in parallel for both repositories.

• Navigate to Builds

• You will notice a config build that was triggred by your push.

Let’s look at the code

So far the network knows about a website but it does not have an asset to serve. Let’s make a commit on the website to trigger a build of the asset.

• Navigate back to Websites

• Click on the link icon. this will open a tab/window to the github repo.

• Navigate to src/App.vue

• Click on the pen icon to edit the file.

• Modify the value of the msg prop to your desire & click on commit changes.

• Click on Commit changes.

• Back to Taubyte Web Console, Navigate to Builds.

• You should find a new build with type Website. If it shows Open give it a minute then click on Refresh.

• Navigate to Config/Production

• Notice (1) the website confoguration as stored in TNS & (2) the website asset CID.

It’s Live

• Navigare to Website.

• Click on the thunker icon ⚡ to open the link to your website

• Here you go, you did it!

tau CLI

The tau CLI is a powerful tool to interact with your projects. If you have created a project using tau from previous section you’re all set. if not you’ll need to clone it, to do so you’ll need to:

Once both repositories are cloned, your directory structure should look something like this:

├── code
└── config
    └── config.yaml

In this structure, code is the directory that contains the inline code for your project, and config is the directory that contains the configuration files for your project, including the config.yaml file which outlines the overall configuration of your project.

Create a Website

Let’s kick things off by creating our first website. The interactive prompt will first ask you to input the name of the website, select the Git provider to be used for the repository, and choose whether to create the repository for you. If you choose to generate a repository, you’ll be given the option to select a template. For our purpose, we’ll choose the Vue.js template.

The tau command line will also clone the newly created website. This will give the following structure:

├── config
│   ├── config.yaml
│   ├── domains
│   │   └── generated.yaml
│   └── websites
│       └── test_doc_website.yaml
└── websites
    └── tb_website_test_doc_website
        ├── babel.config.js
        ├── jsconfig.json
        ├── package.json
        ├── public
        │   ├── favicon.ico
        │   └── index.html
        ├── README.md
        ├── src
        │   ├── App.vue
        │   ├── assets
        │   │   └── logo.png
        │   ├── components
        │   │   └── HelloWorld.vue
        │   └── main.js
        ├── taubyte
        │   ├── build.sh
        │   └── config.yaml
        ├── vue.config.js
        └── yarn.lock

The file structure represents the directory hierarchy of the project. Here’s a breakdown of the structure:

• The config directory contains the configuration files for the project.
  • The domains directory contains the configuration for the generated domain.
  • The websites directory contains the configuration for the website we just created.
• The websites directory contains all the clones website repositories.
  • tb_website_test_doc_website contain the code for our current website.

Modify the code

Now, we are going to make a small but sisible change to the template.

1. Open a terminal and navigate to the directory containing App.vue file:

   cd websites/tb_website_test_doc_website/src

2. Use the Vim text editor to open the ping_pong.go file:

   vim App.vue

3. Once you’re in Vim, locate the following line in the function code:

   <HelloWorld msg="Welcome to Your Vue.js App"/>

4. Replace the msg prop as follow:

   <HelloWorld msg="My first Website powered by Taubyte"/>

5. Save and close the file. In Vim, you can do this by pressing Esc to enter command mode, then typing :wq and pressing Enter.

You have now successfully modified your website.

Push Your Changes

So far, we’ve created a website, which led to the generation of a configuration file in the configuration repository and a repository for the website. Additionally, we’ve modified the code slightly. For these changes to be reflected on the network, it’s necessary to push the changes in both repositories. While it’s possible to accomplish this using standard Git commands or using Taubyte’s CLI, tau.

Refer to the asciinema recording below for a step-by-step visual demonstration of this process:

Keep in mind that pushing your changes will trigger the build jobs. You can view the progress of these build jobs via the web console. Check out the CI/CD section for more details.

It’s Live

After creating and deploying your function via the Tau CLI and pushing the changes to both repos, the website is live and can be accessed through the provided URL, in this case, https://ez8saazz0.gtau.link/.