How to Build and Deploy a Professional Website Entirely in Your Browser

How to Build and Deploy a Professional Website Entirely in Your Browser

Ever wanted to build a professional, portfolio-ready website without installing a single thing on your computer? No local servers, no complex dependencies, no “it works on my machine” headaches. All you need is a web browser.

In this guide, I’ll walk you through the exact process of building a beautiful, fast, and fully-automated static website using a powerful combination of cloud-based tools:

• Jekyll: A simple, blog-aware static site generator loved for its use of Markdown.
• GitHub Codespaces: Your complete development environment, running in the cloud.
• Firebase Hosting: A fast, secure, and generous free tier for hosting our site.
• Cloudflare: For managing our custom domain and providing DNS services.
• GitHub Actions: To create a CI/CD pipeline that automatically deploys our site whenever we push a change.

By the end, you will not only have a live website but also a professional, automated workflow that you can manage from any computer with a browser.

Part I: Building the Foundation in GitHub Codespaces

First, we’ll set up our project and get a Jekyll theme running inside a GitHub Codespace.

1. Launch Your Codespace

Start by creating a new, blank repository on GitHub. On the repository’s main page, click the green <> Code button, navigate to the Codespaces tab, and click “Create codespace on main”.

In a few moments, you’ll have a complete VS Code environment running in your browser.

2. Install Jekyll

The standard Codespace container comes with Ruby pre-installed. All we need to do is install the Jekyll and Bundler gems. In the Codespace terminal, run:

gem install jekyll bundler

3. Choose and Add a Jekyll Theme

Find a theme you like from a site like Jekyll Themes or jekyllthemes.io. Once you have its GitHub repository URL, clone it into a temporary folder in your Codespace.

# Example using the "Jekyll Serif" theme
git clone https://github.com/zerostaticthemes/jekyll-serif-theme.git temp_theme

Now, we’ll move the theme files into our project root. Instead of using mv, which can cause conflicts with the existing .git folder, we’ll use rsync. This command safely copies all files, including hidden ones, while excluding the theme’s own Git history.

# Safely copy all theme files and folders to the current directory
rsync -av --exclude='.git' temp_theme/ .

# Clean up the temporary folder
rm -rf temp_theme

4. Build and Run Your Site

Install the theme’s specific dependencies using Bundler:

bundle install
bundle update

Now, serve the site. The --host=0.0.0.0 flag is essential for making it accessible from outside the Codespace container.

bundle exec jekyll serve --host=0.0.0.0

GitHub Codespaces will automatically detect the running server and show a notification in the bottom-right corner. Click “Open in Browser” to see your new website live!

Part II: Hosting Your Site with Firebase

With our site running in the Codespace, it’s time to prepare it for public hosting on Firebase.

1. Firebase Project Setup

Go to the Firebase Console, sign in, and create a new project.

2. Install and Log In to Firebase Tools

Back in your Codespace terminal, install the Firebase CLI.

npm install -g firebase-tools

Now for our first Codespace-specific challenge: logging in. The standard firebase login command will fail because it tries to open a localhost URL that your browser can’t reach. The solution is to use the --no-localhost flag.

firebase login --no-localhost

The terminal will print a long URL. Copy it, paste it into your local browser, authorize the login, and then copy the resulting authorization code back into the waiting terminal prompt.

3. Initialize and Deploy

First, build the production version of your site. This crucial step gathers all your static files into the public directory, which is what Firebase will deploy.

bundle exec jekyll build --destination public

Next, initialize Firebase Hosting in your project.

firebase init hosting

Follow the prompts:

• Please select an option: Use an existing project
• What do you want to use as your public directory? public
• Configure as a single-page app? No
• Set up automatic builds and deploys with GitHub? No (This will fail in Codespaces; we will do it manually.)

Finally, deploy your site to the world!

firebase deploy

Firebase will give you a live URL (like your-project-id.web.app). Your site is now on the internet!

Part III: Adding a Custom Domain with Cloudflare

A custom domain makes your site professional. We’ll use Cloudflare for this.

1. Buy a Domain: Register your domain through Cloudflare or any other registrar.
2. Point to Firebase: In the Firebase Hosting console, click “Add custom domain”. It will provide you with DNS records to add (usually two A records and two AAAA records).
3. Add Records in Cloudflare: Go to your Cloudflare dashboard, select your domain, and go to the DNS settings. Add the four records exactly as provided by Firebase.
4. Verify: Return to Firebase and click “Verify”. DNS changes can take time, so be patient.

Troubleshooting Tip: If Firebase has trouble verifying, it might be because Cloudflare’s proxy is hiding the true IP. Temporarily switch the Proxy status for the records in Cloudflare from “Proxied” to “DNS only”. Once verification is complete, you can switch them back to “Proxied”.

Part IV: The Automated CI/CD Pipeline (The Manual Way)

Here’s where we tackle the biggest Codespaces challenge. The automatic firebase init hosting:github command fails because it doesn’t support the --no-localhost flag. We have to set up the connection manually.

Step 1: Create the Workflow Files

In your Codespace, create the folder structure .github/workflows/. Inside this workflows folder, create two files:

firebase-hosting-merge.yml (Deploys on push to main)

name: Deploy to Firebase Hosting on merge
on:
  push:
    branches:
      - main
jobs:
  build_and_deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - name: Setup Ruby
        uses: ruby/setup-ruby@v1
        with:
          ruby-version: '3.2' # Important: Match your project's Ruby version
          bundler-cache: true
      - name: Build with Jekyll
        run: bundle exec jekyll build --destination public
        env:
          JEKYLL_ENV: production
      - name: Deploy to Firebase
        uses: FirebaseExtended/action-hosting-deploy@v0
        with:
          repoToken: $
          firebaseServiceAccount: $
          channelId: live
          projectId: your-project-id # <-- Replace with your Firebase Project ID

firebase-hosting-pull-request.yml (Creates a preview on PRs)

name: Deploy to Firebase Hosting on PR
on: pull_request
permissions:
  checks: write
  contents: read
  pull-requests: write
jobs:
  build_and_preview:
    if: $
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - name: Setup Ruby
        uses: ruby/setup-ruby@v1
        with:
          ruby-version: '3.2' # Important: Match your project's Ruby version
          bundler-cache: true
      - name: Build with Jekyll
        run: bundle exec jekyll build --destination public
        env:
          JEKYLL_ENV: production
      - name: Deploy to Firebase
        uses: FirebaseExtended/action-hosting-deploy@v0
        with:
          repoToken: $
          firebaseServiceAccount: $
          projectId: your-project-id # <-- Replace with your Firebase Project ID

Important: Replace your-project-id with your actual Firebase Project ID in both files.

Step 2: Create the GitHub Secret

The workflow needs a secret key to authenticate with Firebase.

1. Get the Key: Go to the Google Cloud Console for your project. Navigate to IAM & Admin > Service Accounts. Find the firebase-adminsdk account, click the three-dots menu, select Manage keys > Add Key > Create new key, and download the JSON file.
2. Add to GitHub: In your GitHub repo, go to Settings > Secrets and variables > Actions. Click New repository secret.
   • Name: FIREBASE_SERVICE_ACCOUNT_YOUR_PROJECT_ID (This MUST match the name in your .yml files).
   • Secret: Open the downloaded JSON file, copy its entire contents, and paste it here.

Step 3: Push and Watch the Magic

Commit and push your new .github folder.

git add .
git commit -m "feat: Add manual CI/CD workflow for Firebase"
git push

Go to the “Actions” tab in your GitHub repository. You will see your workflow running. From now on, every time you push a change to your main branch, your website will automatically rebuild and deploy!

Conclusion

Congratulations! You have successfully built a professional website and a robust, automated deployment pipeline using nothing more than a web browser. This setup empowers you to manage and grow your online presence from anywhere, without worrying about local machine configurations. Happy coding