DEV Community

Cover image for Github + Stickblitz + HAX = free web publishing
Bryan Ollendyke
Bryan Ollendyke

Posted on • Updated on

Github + Stickblitz + HAX = free web publishing


Video of the process followed below.

In this tutorial I will show you how to Build and manage a web publishing workflow using free accounts and installing no tools by using Github, Stackblitz, and the haxtheweb/haxsite repo.

Getting started

Step 1: Setup Github Pages workflow

  • Now navigate to the haxtheweb/haxsite repo
  • Click the Create a new repository option found under the Use this template button (image below) Click the  raw `Create a new repository` endraw  option found under the  raw `Use this template` endraw  button
  • Next, name your repository and select Create repository name your repository and select  raw `Create repository` endraw
  • This will take a few seconds and then you have a copy of the repo!
  • Now it's time for enabling Github's "Pages" capability. Click settings Click settings button
  • On the left under Code and automation click the Pages button
  • Click the word that says "None" under Branch and select the main branch
  • You should see main / (root); click "Save" main / (root); click
  • Wait a minute or so and refresh the page and you should now see "Your site is live at" Your site is live

You can see the tutorial's live site at https://btopro.github.io/jubilant-spoon/ and now we've set things in motion so that when changes are made on github, it will automatically rebuid the site and our address will reflect the changes. Now it's time to use HAX to edit our files in the cloud!

Step 2: Use HAX to edit the site on Stackblitz

  • Go to https://stackblitz.com and click the "Open Github repository [beta]" button stackblitz github connector
  • Select your repository after authorizing the connection between github and stackblitz and click "Open repository" Connect repo
  • It will think for a bit, do some installation and then you will see a broken window to the right like below (don't panic this is normal!) Starting screen
  • Click the Plug icon on the left for "Ports in use" and then click the "Open in browser" icon Open in browser
  • A message will say "You're almost there!", click the "Connect to Project" button Connect to Project

Step 3: JACKPOT - HAX time

JACKPOT
Congratulations, you now can edit a website in the cloud using HAX!

  • Click "Edit" on the top bar to get started HAX'ing the web! Click to edit page
  • Add blocks, edit content, administer the site outline using the outline designer, go. to. town! You have a full working copy of HAX running on stackblitz HAX running on stackblitz

Step 4 - HAX quick tutorial

  • After clicking Edit, click on the page content to activate it. The right panel will show you configuration options
  • Markdown shorthand like # and > and - can be used to write rapidly
  • Merlin is the command discovery system. If you are trying to do something, start typing the word you are thinking of and merlin may be able to help jump you to that action. It's great for inserting Blocks in the page by writing and typing / to start a blank paragraph
  • Outline Designer allows you to rapidly administer the site hierarchy and can be found under Site actions -> Outline designer Outline Designer
  • You can change the theme and site details under Site actions -> Edit settings Image description

Step 5 - Publish changes to github

By now you've modified content, added blocks, maybe some pages, and it's time to get our content updated on github. Easy Pease!

  • Close the browser tab that has HAX running in the cloud and go back to the Stackblitz repo
  • Click "Source Control" on the left as shown Git Source Control
  • You will see a blue "Sync Changes" button with the number of changes. Thanks to HAX + Stackblitz, every operation you saved = a commit in the repo under the hood!
  • It will ask you about pull and push, hit "OK" as shown Image description
  • The first time you do this you will be asked to authorize Stackblitz to talk to Github. Accept the permissions for this connection
  • Go back to the github repo and you should see the build starting. In a minute or so, refresh the github pages link to see your changes

CONGRATULATIONS!

You now have a HAX publishing workflow that requires installing nothing and paying nothing in order to host your content online!

We'll get into the technical considerations of HAX in future posts but the tldr;

Learn more about HAX

Top comments (0)