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
- First, start by getting an account on github
- Next an account on stackblitz
Step 1: Setup Github Pages workflow
- Now navigate to the haxtheweb/haxsite repo
- Click the
Create a new repositoryoption found under theUse this templatebutton (image below)
- Next, name your repository and select
Create repository
- 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
- On the left under
Code and automationclick thePagesbutton - Click the word that says "None" under
Branchand select themainbranch
- You should see main / (root); click "Save"
- Wait a minute or so and refresh the page and you should now see "Your site is live at"
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
- Select your repository after authorizing the connection between github and stackblitz and click "Open repository"
- 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!)
- Click the Plug icon on the left for "Ports in use" and then click the "Open in browser" icon
- A message will say "You're almost there!", click the "Connect to Project" button
Step 3: JACKPOT - HAX time
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!
- 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
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
- You can change the theme and site details under Site actions -> Edit settings
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
- 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
- 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;
- This site's CONTENT is stored with the site always under the
pages/directory so that it can all work as a stand alone package - The JavaScript / system assets powering the site are coming from our network of CDNs using the Magic Script. If you want to run those assets locally you can copy wc-registry.json and the build directory from our CDN into the top level of your site
- You are able to pull this site into other HAX tech like the Node-js, PHP, desktop, HAXiam and other implementations to work on it.
Top comments (0)