Backpack Site Builder
Screencasts
E00 - Getting started with Backpack Site Builder

Getting Started with Backpack Site Builder

Today, we will discuss how to generate and use a GitHub Packages Token to access the @ef-global/backpack library. Let's get right into it.

Generating a GitHub Packages Token

To read packages from our organization using the @ef-global/backpack library, we must first generate a GitHub Packages Token. Here's how we do it:

  1. Navigate to your GitHub profile. Go all the way to the bottom and click on "Developer Settings."

  2. Within Developer Settings, click on "Personal Access Tokens," then "Tokens Classic."

  3. Click on "Generate New Token" which is for general use. Name the token as per your liking (try to name it something descriptive for easier identification later). For this guide, we'll call our token "GH_PACKAGES_TOKEN."

  4. Ensure the "read packages" checkbox is ticked. This will allow the token to read the backpack package on GitHub.

  5. Scroll down and click "Generate Token."

Now, we have our GitHub Packages Token!


_10
GH_PACKAGES_TOKEN: <Your GitHub Packages Token here>

Adding the GitHub Packages Token to Your Environment Variables

Once we have our token, we need to add it to our environment variables. This process varies slightly based on the shell you're using.

In this guide, we will focus on the ZSH shell. If you're using bash, the steps will be almost identical but with the .bashrc file instead of the .zshrc file.

  1. Navigate to the terminal. Open your .zshrc file. This is located in the root of your account and contains all the environment variables.

_10
open ~/.zshrc

  1. Add the following line to the file, replacing <Your GitHub Packages Token here> with the actual token you generated.

_10
export GH_PACKAGES_TOKEN="<Your GitHub Packages Token here>"

  1. Save the .zshrc file. I prefer using Visual Studio Code for editing, but feel free to use Vim, Emacs, or your preferred text editor.

  2. To apply the changes, run the source command on your .zshrc file. This will reload the environment variables in your terminal.


_10
source ~/.zshrc

Alternatively, you can restart your terminal to apply the changes.

And there you have it! Your GitHub Packages Token is now set in your environment, and you're ready to download all the great stuff that @ef-global/backpack has to offer.

Until next time, happy coding!

Getting OAuth token and Space ID

Creating and Managing Spaces in Storyblok with OAuth Token and sb-mig Tool

Today, we're going to walk through how to create a space in Storyblok, and manage it using the sb-mig tool and your OAuth token. Let's dive in!

Generating an OAuth Token in Storyblok

First off, we need to acquire an OAuth token. This token will be used by the sb-mig tool to synchronize and manage our Storyblok space.

Here are the steps to get your OAuth token:

  1. Log in to your Storyblok account.

  2. Navigate to "Account Settings" in your profile.

  3. Click on "Personal Access Token" at the bottom of the page.

  4. Click on the "Generate New Token" button. This action creates a developer token that we will need later.

Ensure you store this token in a safe location for later use.

Creating a Space in Storyblok

With the OAuth token in place, we can proceed to create a space in Storyblok:

  1. Click on "Create a Space" and give it a name. For the purpose of this guide, we'll name it "s2000".

  2. Click on "Create a Space" to finalize the creation of the new space.

Copying the Space ID

The last piece of the puzzle is acquiring the Space ID:

  1. Navigate to the "Settings" tab in your newly created space.

  2. Click to copy the Space ID. Make sure to remove the hashtag (#) from the beginning as we will copy the Space ID without the hashtag later.

Again, store the Space ID safely for future use.

And that's it! We've successfully acquired an OAuth token, created a new space in Storyblok, and copied the Space ID for future reference.

Now, you are ready to utilize the sb-mig tool to sync and manage your Storyblok space using the OAuth token and the Space ID you've just generated and copied.

In future blog posts, we'll delve deeper into how to leverage these tools and information to maximize the utility of Storyblok.

Deploy to Vercel