Manage a Static Website on a Chromebook

Contents

Why Static Websites?

Commonly referred to as JAMstack (JavaScript, API's and Markup), a static website provides some major benefits over traditional server-based setups.

Speed: A JAMstack website serves static files by default. This means no server-side processing is required to generate a cache or build dynamic pages on the fly.
Security: A JAMstack website doesn't have a database! This greatly reduces vulnerabilities, meaning even if the website hasn't been updated in a while it will still be secure.
Free Hosting: Without the need for a server to generate dynamic files, a JAMstack website can be hosted on a simple content delivery network (CDN) with nothing behind the scenes to maintain. The market leader and our favourite for static website hosting is Netlify.

Our Website

The Tilious website (this very website) is a static website. We built this website using a static site generator called Jekyll. The files are hosted in a private repository on Bitbucket, served using Netlify and editable with the Forestry.io CMS. Sounds awesome, right?

Alright, so what this really means is:

Files, hosting and CMS functionality all exist in separate places, so you're not tied to any one cog in the machine.
The website exists in multiple places and you can easily make a clone on your local machine, meaning you have backups all over the place.
Everything runs via the Git version control system, which means each change you make is tracked. Made a mistake or deleted something by accident? No problem, you can rollback to any previous version in a few seconds.
You have direct access to the source code, which means anything is possible. No wrestling with plugins or themes.

There are, of course, some downsides. Static websites won't, by default, have any user functionality like forms or logins. The forms issue is easily overcome with Netlify Forms or a dedicated form builder like JotForm. For a website where users need to login, like an e-commerce website, a static website is probably not your best bet.

Manage a Static Website with Termux

Now you know what static websites are all about. We'll show you how we update our website on a Chromebook (our platform of choice) using Termux.

Setup

For content changes, everything goes via Forestry.io so we'll focus on how we make changes to the website source code.

Top tip: click and hold to paste in Termux.
Top tip: Use Ctrl Alt + and Ctrl Alt - to increase/decrease the font size in Termux.

Install Termux from the Google Play store on your Chromebook.
Run the following command to set up storage.
```
termux-setup-storage
```
Install Git with the following command.
```
pkg install git
```

Set your email and username using these commands.

git config --global user.email "your@email.com"
git config --global user.name "Your Name"

Change to the downloads directory, or wherever you want your files to live, with this command.
```
cd storage/downloads
```
You can list all the files in any directory using the following command.
```
ls -alh
```
Use the HTTPS option to clone the repository from Bitbucket.
Change to your newly created directory.
```
cd tilious
```

Maintain

At this point you've installed Termux and Git and cloned your Bitbucket repository. Use the following commands to keep everything in sync and push changes from your local machine to Bitbucket, which will automatically trigger a deploy on Netlify and update your website. 🏆🥇

git pull

Use git pull to download the latest version of your website to your local machine and keep everything in sync. This is useful, for example, when you edit files in another location e.g. directly on Bitbucket or via Forestry.io in our case.

git add .

Use git add to include files in your next commit. It tells Git these are changes you'd like to be included in your next update but crucially doesn't make anything live.

git commit -m "update"

Use git commit to capture the current version of any changes added, with git add, on your local machine. Use -m to add a message to the commit, detailing the changes you've made. This is essentially telling Git these changes are ready for your production website but, again, everything is still on your local machine at this stage.

git push

Use git push to upload your local commit to your Bitbucket repository. This is where your changes actually go live and will trigger a deploy to your live website via Netlify.

git status

Use git status at any stage to check the status of your working directory.

Troubleshooting

I ran into a few issues last time I did this and have detailed a few additional steps below that might help out if you run into similar issues.

Mirror is Down

This can happen when you're first installing a package or running updates. It basically means that the source (mirror) you're using is no longer accessible. As a result any commands to install or update return an error.

To fix this simply change the mirror using the following command.

termux-change-repo

Configure Remote Repo

If you run into an error when running git push for a remote repository it might be because the repository URL hasn't been set. Currently, I'm having to set this every time I want to push a commit using the following command.

git remote add <remote_name> <remote_repo_url>

You can check this using this command.

git remote -v

Then push with this command.

git push -u <remote_name> <local_branch_name>

The <remote_name> will be whatever you called it with the git remote add command above. The <local_branch_name> will normally be master but you can check with either of the following commands.

git branch

git rev-parse --abbrev-ref HEAD

Use Git and Bitbucket to Manage a Static Website