In this tutorial, we'll go through the process of building a blog website using webweb2.

<aside> ⚠️ In some configurations of GitHub Pages, the links on the site might not work. You can change them if necessary.

</aside>

<aside> ⚠️ The screenshots show an older version of webweb2, where the index page was called Index.

</aside>

Getting familiar with webweb2

When you first launch webweb2, you'll see a screen asking you to create an account. Fill out the form, and you'll be sent to the startup screen:

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/944e9ab5-be68-4728-8164-fe4e882903ea/Untitled.png

This screen has several options, but the two most important ones are New and Open. All of these options are also available in the IDE.

We'll start by making the index page. This is automatically added to your site when you first load webweb2, so click the big Open button, select index, and click Open. Once it loads, you'll see the main IDE interface.

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/ef64959c-5b49-4ee4-bdf3-9cdea684fd6d/Untitled.png

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/16a56ba1-803c-4eb2-af3a-d48ea33c09a9/Untitled.png

On the top, there's a row of tabs. Each item that you have open has its own tab. To the left of the tabs is a hamburger menu icon, and the menu that it opens has all of the options from the startup screen plus some more.

Below the tabs and menu button, there is the editor. At the top, there are three subtabs (to learn about those, see "How webweb2 works"). Below that, there's the main editor. It might look familiar - it's the same editor that powers VS Code.

How webweb2 works

To start the page, delete all of the content in the template, except for where it sets the layout. The first thing we'll need to do is not in the page itself, it is in the layout. Click the menu button, and click Open. You'll see the same dialog as before; this time, open "_Layout". You'll see a similar editor interface to before, but this time there is only one subtab.

Throughout this tutorial, I'll be using Fomantic UI. Go to the "getting started" page on the Fomantic website, and copy and paste the code for using a CDN into the head tag in the layout. Press Ctrl-S (or Command-S on Mac) or select Menu → Save to save your work.

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/0c4960f4-0683-4af5-9326-a1b3322722dc/Untitled.png

To make sure that adding Fomantic-UI worked, go back to your index tab and add this code (a simple button):

<div class="ui button">Fomantic-UI works!</div>

Before you preview your site you need to compile it. First, save your work, and then go to Menu → Compile. You'll see a "toast" notification saying that compilation has started, and soon after you'll hopefully see a message that it succeeded. Now, go to Menu → Open preview, and in the dropdown select index. You should see the button:

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/0b7e69a0-e542-48e2-9e43-4387d99d3f68/Untitled.png