Forem: Felix Swinkels

Backup Your Dotfiles With Version Control

Felix Swinkels — Fri, 18 Dec 2020 22:01:46 +0000

I came across a dotfiles repository on GitHub the other day and it instantly made me realize I've been backing up mine wrong! Let’s set up our own GitHub repo and start doing it the right way, today.

Dotfiles are text-based configuration files for Unix tools. By backing them up to GitHub we make sure all our favorite configurations, hacks, and tweaks don’t get lost in case of a system crash.

Let’s go!

Create a folder called dotfiles and copy the files we want to back up.

Create the folder

mkdir dotfiles

Copy the files you want to backup

cp ~/.<filename> ~/dotfiles/.<filename>

For example, I’ve added my .zshrc and .vimrc files

cp ~/.zshrc ~/dotfiles/.zshrc
cp ~/.vimrc ~/dotfiles/.vimrc

First commit

Create a new repository called dotfiles on GitHub or use the GitHub CLI tool.

Initialize and add the files

cd dotfiles
git init
git add .

Commit and push

git commit -m “first commit”
git push origin master

Automate it!

Let’s create a simple bash script and add it to crontabs to run automatically.

create the script

echo -e "#!/bin/bash/" >> backup_dotfiles.sh

Open the file in your favorite editor and add the following

# create a timestamp alias for the commit message
timestamp() {
  date +"%d-%m-%Y @ %T"
}

# files to backup
cp ~/.zshrc ~/dotfiles/.zshrc
cp ~/.vimrc ~/dotfiles/.vimrc

# pull & push
if [[ `git status --porcelain` ]]; then
    git pull origin master
    git add .
    git commit -m "Update: $(timestamp)"
    git push origin master
fi

As you can see I’ve added the .zshrc and .vimrc files again. You can add any (config)files you want here!

To add the job to cron, type

crontab -e

You can use crontab.guru to generate how frequent you want the backup script to run. Let’s do every Monday at 10:00 by adding the following line to the cron file and save it

0 10 * * 1 bash backup_dotfiles.sh

That’s it!

We’ve created a GitHub repo to back up dotfiles to, and automated the process with a bash script that runs periodically with cron. As always, drop your feedback in the comments! ✌️

Build & Deploy a webpage with Gatsby and Surge

Felix Swinkels — Fri, 18 Dec 2020 21:36:38 +0000

Welcome to the first part in this mini-series called Build & Deploy where I combine tools for building websites and applications plus the tools to deploy them online. Follow my blog or find me on Twitter for updates!

Gatsby & Surge

Gatsby is a React-based open source framework for creating websites and apps. It’s amazingly fast and has a great workflow.

Surge is a CLI tool that deploys your static pages for free within seconds. In this article, I will show you how to use both to quickly build and deploy a static webpage.

Install

Open a terminal and use npm to install Gatsby and Surge

npm i -g gatsby-cli surge

surge login

Build

Create a new project with Gatsby

gatsby new <project-name>
# or
gatsby new <project-name> <starter-repo>

Gatsby offers a great bunch of free templates on their website to get started quickly!

Fire it up!

cd <project-name>
gatsby develop

The develop command starts a development server where you can interact with your webpage while you're building. You can access it locally at http://localhost:8000/. To learn more about the Gatsby file structure check out: Gatsby Project Structure.

When you are finished making your webpage awesome, run the build command to generate an optimized static HTML site in the public folder

gatsby build

shell
You can test the production by running the serve command

gatsby serve

Deploy

Surge offers many awesome futures but works as simple as typing surge in your public folder.

cd public
surge
# or
surge public/
# or
surge public/ <your-domain>

And BAM! Your webpage is live!

Create a CNAME document with the URL to skip the prompt on your next surge

echo <your-url>.surge.sh >> CNAME

Or use a custom domain name

echo your-website.com >> CNAME

To use a custom domain name, the DNS from the domain provider will need to be changed. More info: Adding a custom domain.

WTH just happened?

We’ve built a static webpage with Gatsby and deployed it to Surge with these commands

npm i -g gatsby-cli surge
surge login
gatsby new <project-name>
gatsby develop
gatsby build
gatsby serve
surge