Hosting a static website from a repository using SourceCraft Sites

SourceCraft Sites is a tool for free static website hosting without the need to configure server infrastructure. Files for a published website are hosted in a public repository of a public SourceCraft organization.

A static website is built with such client-side technologies as HTML, CSS, and JavaScript. It may not contain any scripts that run on the web server side. You can use any static website generators, e.g., Jekyll, Hugo, Gatsby, etc.

Access to websites hosted in SourceCraft Sites is arranged over the secure HTTPS protocol. You do not need to upload your own TLS certificate.

In this tutorial, you will configure hosting for a static website from a repository using SourceCraft Sites.

Learn more about SourceCraft.

To configure hosting:

  1. Get ready.
  2. Create a repository from a template.
  3. Edit the original files.
  4. Build the project.
  5. Commit the changes.
  6. Test the website.

Unpublish the website if you no longer need it.

Get ready

  1. Authenticate in SourceCraft on the service home page or sign up.

    If you are working in a private organization, create a new public organization.

  2. Create a personal access token, as you will need it later.

Create a repository from a template

  1. Open the service home page.

  2. In the left-hand panel, click Create repository.

  3. In the window that opens, select Blank repository.

  4. Under Your new repository details:

    • In the Owner field, select the organization to create the repository in.

    • In the Name field, specify a name for the repository.

      The name must be unique within the organization. The name may contain the following ASCII characters: lowercase and uppercase Latin letters, numbers, commas, hyphens, and underscores.

      The address to access the repository at is displayed below the name.

    • Optionally, in the Description field, enter a description for the repository.

  5. Under Repository template, click Browse templates and select the sites-landing template.

    Based on the repository, a SourceCraft Sites landing page is deployed for that template.

    To view the template contents, click Preview.

    The template contains a pre-installed SourceCraft Sites configuration and standard project files.

  6. Click Use template.

  7. In the Visibility field, select the Public access type for the repository to allow view access to all internet users without authentication. Only invited users will be able to modify the repository.

  8. Click Create repository.

Edit the original files

  1. View the contents of the repository you created.

    The repository contains the following elements for a static website:

    • SourceCraft Sites configuration file, .sourcecraft/sites.yaml.
    • Final website files.
    • Soure files for website generation.

    For more information about the repository structure and technology in use, see README.md.

    The SourceCraft Sites configuration in the repository already such a configuration that makes the template website available at https://<organization_slug>.sourcecraft.site/<repository_name> within a few minutes after creating the repository.

  2. Clone the repository you created:

    1. Install Git.

    2. In the top-right corner of the repository page, click Clone.

    3. Copy the link for cloning the repository from the HTTPS field.

    4. In the terminal, run this command:

      git clone <link_for_cloning_repository>
      
    5. Enter a username.

    6. Specify the personal token as the password.

    7. Go to your cloned repository:

      cd <repository_name>
      
  3. Edit the .sourcecraft/sites.yaml file or keep the default settings.

    The SourceCraft Sites configuration is set up for a particular repository and stored in a file named .sourcecraft/sites.yaml. A configuration stored in the main branch, e.g., master or main, applies to the entire repository.

    The general configuration format for SourceCraft Sites in .sourcecraft/sites.yaml is as follows:

    site:
      root: "<path_to_directory_with_website_files>"
      ref: "<branch_or_tag>"
    

    Where:

    • root: Absolute path from the repository root to the directory with website files. This is an optional parameter. By default, it is set to the repository root.

      Tip

      We recommend using index.html for your website homepage.

    • ref: Name of the branch or tag whose files will be used to publish the static website. This is an optional parameter. By default, it is set to the repository’s main branch. Once you commit changes to the branch, the website will update automatically in a few minutes.

  4. If you edited .sourcecraft/sites.yaml, add the modified file to the git index, then commit and push the changes to the repository’s main branch:

    git add .sourcecraft/sites.yaml
    git commit -m "Updated site configuration"
    git push -u origin main
    
  5. If you specified a website publishing branch other than the main one in the .sourcecraft/sites.yaml configuration, create that branch and switch to it:

    git checkout -b <website_publishing_branch_name>
    git push -u origin <website_publishing_branch_name>
    
  6. Change the contents of the src directory, e.g.:

    • Replace the configuration of the website home page, src/pages/index.yaml, with the one you need. By default, it contains a configuration for a SourceCraft Sites landing page. Do not rename the index.yaml file.
    • Add your CSS files or React components. You can see a sample configuration in the page-builder.config.yml file.

Build the project

  1. Install Node.js version 18 or higher.

    We recommend using Node Version Manager for installation.

  2. Build the project:

    npm ci
    npm run build
    

    By default, the site/ directory will be cleared and overwritten with new static website files when building. If you changed the website directory in the .sourcecraft/sites.yaml settings, specify that directory in the package.json file.

Commit the changes

Add the new and modified files to the git index, then commit and push the changes to the repository branch specified in .sourcecraft/sites.yaml:

git add .
git commit -m "Updated site files"
git push -u origin <website_publishing_branch_name>

Test the website

Once you commit the changes to the branch specified in .sourcecraft/sites.yaml, the website will update automatically in a few minutes.

In your browser, go to https://<organization_slug>.sourcecraft.site/<repository_name> and test the website.

Unpublish the website

If you no longer need the website, delete the .sourcecraft/sites.yaml file in the your repository’s main branch:

git checkout -b main origin/main
git rm .sourcecraft/sites.yaml
git commit -m "Deleted site configuration"
git push -u origin main