Today I came accross codesandbox which is an online editor catered for web applications. It is an opensource effort with all bugs being tracked and handled by the community. The feature I liked the most about codesandbox was its embed feature, that lets you embed code alongside it’s rendered version.
But for some reason the local changes made for my static html embed’s did not show up in the rendered half of the screen. try editing the code below and you’ll see what I mean.
This is the template given by codesandbox for static HTML pages. Even if you press the reload button after you make the changes to the code, the page does not reflect the changes.
To fix this issue
Create a new sandbox
Select vanilla parcel
Delete unecessary files.
The embed code should work now.
Alternatively you can just use the template I have created for starting new codesandbx projects.
Do you want free hosting for your demo website? Do you want to deploy your webapp for free? Then look no further. You can do that and more with Heroku. Read more to deploy your first static website on Heroku.
Heroku is a platform as a service (PaaS) that enables developers to build, run, and operate applications entirely in the cloud. Heroku has a genorous free plan allowing students/hobbyist to deploy their apps on the cloud for free.
In this post you are going to learn the following –
Basics of git
Adding files necessary to host static HTML on Heroku
Pushing code to your git repo
Creating a new app on Heroku and connecting it with your GitHub account
Git is a version control tool. Think of it like a backup of your code, but instead of backing up all your code, it just backs up the changes. Watch the following video to learn more about git and github.
For the purpose of this blog post, I am going to use a sample website from microsoft sample html project. Considering you are already registered on GitHub, go to the page and click on fork. This will copy all the code to your account so that you can make changes to it.
Once that is done, you need to download and install git on your machine. After installing git, head over to your cmd prompt and copy/paste the following
Make sure you replace the < username > with your own github username, and that you have already forked the project.
Once you run the above command, the project will be copied to your local directory. Go ahead and check it out.
Click on the image to learn basic git commands
2. Adding files necessary to host static HTML on Heroku
Add a file called composer.json in the directory. If you want to learn more about why we are adding a composer.json file to the directory – click here.
Inside the composer.json file add the following line –
{ }
Add another file called index.php. If you want to know more about index files – click here.
Inside index.php add the following line –
<?php include_once("index.html"); ?>
You can replace index.html with the name of the html file you want to server as your home page.
Your folder structure should now look like this
Let us now push these local changes to our github repo. To do that change directory into the folder using – cd directory and perform the following commands.
3. Pushing code to your git repo
If everything goes well you should have the same output as I have in the above screen shot. Let’s go over the commands one by one
Click on the "+" icon in the top-right corner and select "New repository."
Follow the instructions to create a new repository on GitHub.
Link the local repository to GitHub:
In VSCode, open the terminal by pressing Ctrl + ` (backtick) or navigating to View > Terminal in the top menu.
Use the following commands to link your local repository to the GitHub repository you created:
git remote add origin <repository_url>
Replace <repository_url> with the URL of your GitHub repository.
Add and commit HTML files:
In VSCode, navigate to the Source Control view by clicking on the source control icon in the left sidebar (or press Ctrl + Shift + G).
You'll see a list of changed files. Stage the HTML files you want to commit by clicking the + button next to the file names.
Enter a commit message in the text box at the top of the Source Control view to describe the changes you made.
Click the checkmark icon to commit the changes.
Push changes to GitHub:
After committing the changes, click on the ellipsis (...) icon in the Source Control view and select "Push."
This action will push your committed changes to the GitHub repository.
Remember, these instructions assume you've set up a GitHub repository and have the necessary permissions to push changes to it. If you encounter any authentication issues during the push, make sure your GitHub credentials are correctly configured in Git or that you've set up SSH keys for GitHub authentication.
Create a GitHub repository: Go to GitHub and log in to your account. Create a new repository by clicking the "+" icon in the top-right corner and selecting "New repository."
Step 2: Create an index.html file
Open Visual Studio Code.
Click on File in the top-left corner, select Open Folder..., and choose or create a new folder for your project.
Step 3: Create and code the index.html file
In VSCode, right-click on the folder you created and select New File. Name the file index.html.
Add HTML code to the index.html file. For example:
<!DOCTYPE html><html><head><title>My First Web Page</title></head><body><h1>Hello, World!</h1><p>This is a simple HTML page.</p></body></html>
Step 4: Initialize Git repository and commit changes
Open the integrated terminal in VSCode by going to Terminal > New Terminal.
Initialize Git in your project folder by typing the following command in the terminal:
git init
Add the index.html file to the staging area by typing:
git add index.html
Commit the changes with a descriptive message:
git commit -m"Add index.html file with basic HTML structure"
Step 5: Link local repository to GitHub
Go to your GitHub repository and copy the repository URL (ending in .git).
In the terminal, link your local repository to the GitHub repository by running the following command:
git remote add origin <repository_url>
Replace <repository_url> with the URL you copied from GitHub.
Step 6: Push changes to GitHub
Finally, push your committed changes to GitHub:
git push -u origin main
This command pushes your changes from the local main branch to the main branch on GitHub.
After completing these steps, your index.html file will be committed and pushed to your GitHub repository. You can verify the changes by visiting your GitHub repository in a web browser
Login
