Dev Blueprints

A growing collection of personalized guides on various topics, offering practical insights for developers such as these templates below.

vitegh-pages

React + Tailwind CSS

React + Tailwind CSS w/ Vite to deploy to GitHub Pages guide to start with.

vitegh-pages

Svelte + Tailwind CSS

Svelte + Tailwind CSS w/ Vite to deploy to GitHub Pages guide to start with.

vitegh-pages

Vue + Tailwind CSS

Vue + Tailwind CSS w/ Vite to deploy to GitHub Pages guide to start with.

gh-pages

Next + Tailwind CSS

Next + Tailwind CSS to deploy to GitHub Pages guide to start with.

vitegh-pages

SvelteKit + Tailwind CSS

SvelteKit + Tailwind CSS w/ Vite to deploy to GitHub Pages guide to start with.

gh-pages

Gatsby + Tailwind CSS

Gatsby + Tailwind CSS to deploy to GitHub Pages guide to start with.

Gatsby Quick-Start:

Personally, creating a Gatsby app using the cli is the ideal way of starting. There are other methods in the internet if you're curious.

1. Install gatsby-cli:

$ npm i -g gatsby-cli

2. Check version to see if it's installed:

$ gatsby -v

3. Install the starter site (follow instructions from official docs↗):

# gatsby new dir-name (starter site url)
$ gatsby new my-project https://github.com/gatsbyjs/gatsby-starter-default

4. Run the final command:

$ gatsby develop

Creating a NextJS App:

Start a Next app:

$ npx create-next-app@latest

And then follow the prompts! Make sure to use the App Router↗ and it is up to you for the other technologies.

Vite Frontend Tooling:

Start your first Vite project using this command:

$ npm create vite@latest

Or directly specify the configurations:

$ npm create vite@latest dir_name -- --template vue

Check the github docs↗ for more template information.

You can also use the "." for the directory name to scaffold in the current directory.

Here are some useful git commands that may help.

Git configuration:

To setup git username and email:

$ git config --global user.name 'your username'
$ git config --global user.email 'your@email.com'

To set the default branch name to main instead of master:

$ git config --global init.defaultBranch main

To check for git configuration:

$ git config -l

Git removal:

To remove git from directory:

$ rm -rf .git*

Git logs:

To get a list of commits:

$ git log

To get a list of commits in one line format:

$ git log --oneline

Git branches:

To check local branches:

$ git branch

To create new branch:

$ git branch branchName

To go to a branch:

$ git checkout branchName

To create and go to a new branch:

$ git checkout -b branchName

To delete a branch:

$ git branch -d branchName

Git remote:

To add a remote repository:

$ git remote add origin urlHere

To see remote connection:

$ git remote -v

To push a new branch and set upstream to the remote repo:

$ git push -u origin branchName

Git stash:

To stash changes and return to the previous state:

$ git stash

To see all stashed file changes:

$ git stash list

To get the file from the top of the stash stack:

$ git stash pop

To discard the changes from the top of the stash stack:

$ git stash pop

To apply changes from the selected stashed item:

$ git stash apply stash@{n}

User Authentication between local machine and GitHub:

Note:

You may encounter a prompt after establishing the connection for the first time. It will let you decide to whether or not you trust the key/fingerprint of GitHub. For more information, refer to this link below:

GitHub's SSH key fingerprints?↗

You can check these links for references:

1. Generate SSH key pair:

a. Use the command ssh-keygen to generate a new key pair.

# root directory
$ ssh-keygen

b. Save the key (usually in /home/user/.ssh/id_rsa_fileName). Follow the prompts.

$ ssh-keygen
$ Enter file in which to save the key (/home/user/.ssh/id_rsa):
$ Enter passphrase (empty for no passphrase):
$ Enter same passphrase again:
$ Your identification has been saved in /home/user/.ssh/id_rsa_fileName
$ Your public key has been saved in /home/user/.ssh/id_rsa_fileName.pub
$ ...

c. Check public key (/home/user/.ssh/id_rsa_fileName.pub).

# root directory
~$ cd .ssh/
~/.ssh$ cat id_rsa_fileName.pub

2. Copy and add public key to GitHub main settings (SSH and GPG Keys > New SSH Key):

3. Add a config file on ~/.ssh (this method use Nano, a terminal-based text editor):

a. Create a config file:

~/.ssh$ nano config
# or
~$ nano ~/.ssh/config

b. Add private key.

IdentityFile ~/.ssh/id_rsa_fileName

4. Run SSH Agent:

~$ eval $('ssh-agent')
~$ ssh-add ~/.ssh/id_rsa_fileName

Initializing Repository from local machine:

Start a new repository using your local machine and Git. Check this installation guide↗ if you don't have git.

1. Initialize git in your directory.

$ git init

2. Make changes to your directory. Add files, start making your project, etc.

3. Add remote origin url from GitHub repository.

$ git remote add origin urlFromGitHubHere

4. Change branch name to main if you haven't.

$ git branch -M main

5. Add all changes.

$ git add .

6. Commit changes.

$ git commit -m 'commit message'

7. Push changes to GitHub.

$ git push -u origin main

Cloning Repository from GitHub to local machine:

Assuming you already have a GitHub repository, you can clone it to your machine using git clone.

1. Clone the repository.

$ git clone urlFromGitHubHere

2. Make changes. Add changes. Commit changes.

3. Push to the GitHub Repo.

$ git push