🐧👾💅 The First Bash Prompt Customization I NEED to Do - Linux

João Pedro Gonçalves Rocha Ribeiro — Thu, 11 Jul 2024 03:25:49 +0000

While I'm developing, the terminal prompt is one of the most frequently used tools in my workflow, so I like to make it look cool.

Virgin Ubuntu

I'm using Mac to "run" Ubuntu through Multipass. The following command creates a new Ubuntu instance named cool-prompt and starts an interactive shell. The initial appearance is:

PS1

We need to change the value of a variable called PS1 in the .bashrc file.

PS1 stands for "Prompt String 1". It specifically defines the primary prompt that appears before each command when the shell is ready to accept input.

.bashrc stands for "Bourne Again SHell Run Commands"; this file is a script that runs whenever the Bash shell is started.

Config for Default User

The default user is the one you get out of the box, which in the image is ubuntu as shown previously.

Open the .bashrc file and edit PS1. You can use vi since it comes with Ubuntu:

vi ~/.bashrc

Navigate to the end of the file (use the 'G' shortcut in vi) and paste the following:

parse_git_branch() {
    git branch 2> /dev/null | sed -e '/^[^*]/d' -e 's/* \(.*\)/ (\1)/'
}

PS1='\[\033[01;32m\]@\u\[\033[00m\] \[\033[01;34m\]\W\[\033[00m\]\[\033[01;36m\]$(parse_git_branch)\[\033[00m\]\n$ '

This code will execute later at the end of the file and overwrite the value of PS1. If you know what you're doing and prefer, you can delete any previous manipulations of PS1.

This shell script defines a function to retrieve the current Git branch of a directory if it's a Git repository. It then formats the prompt with different colors for the current user's name, the current folder, and the Git branch (if applicable). Finally, it inserts a newline and $ to indicate the start of commands.

After editing the .bashrc file, every new shell session will use the new configuration. To apply the changes to the current shell prompt, use:

source ~/.bashrc

After sourcing .bashrc, your prompt should look like this:

In a git repo:

Config for Root User

Youre all happy with your new prompt, but some task forces you to use the root user. To your surprise(especially if you're a noob like me), your prompt get uglier than ever.

Ok! Don't worry. Open .bashrc again, go to the end of the file, paste the same code from the previous section. This ensures that every time a new root session is initialized, your prompt configuration will be applied. Remember to source .bashrc in the current prompt if you want the changes to take effect immediately.

And we're done !🥳!

There is more

There are much more configs possible in the shell prompt. Just to give a general idea the following link show some of the special characters that can be used in prompt variables https://www.gnu.org/software/bash/manual/html_node/Controlling-the-Prompt.html

Thanks for reading

How to deploy React App to GitHub Pages - Caveman Style 🌋 🔥🦴

João Pedro Gonçalves Rocha Ribeiro — Mon, 01 Jul 2024 19:10:10 +0000

Like a good caveman you have to do everything by hand and with as little automation as possible.

Create the New Repo

Create the repo on your GitHub Account

Create a public repo named <user-name.github.io>

Configure the GitHub Pages to Deploy From Branch

Go to Settings tab:

On the left side menu choose Pages

In the building and deploy options choose Deploy from branch and select the branch you want to use.

Now your have configured everything by hand to make your GitHub Pages Site able to receive files for deploy.

Create a your React App Static Website

You my have it finished already and don't need to create. I used vite and pnpm and choose a typescript template. So it would look like:

pnpm create vite

Well, do your thing react and push it to GitHub.

It may involve:

git add .
git commit -m "react app first commit"
git remote add origin git@github.com:<user>/<repo>.git
git push -u origin main

Be the Caveman

In the configured branch you only need the files generated by React's build, and your App will be live at https://.github.io/. The root of your branch should look like this:

To generate the files use:

pnpm run build

or whatever is your package manager.

Then delete all files except the dist folder(be careful if you don't have a backup in another branch you can lose everything), copy dist folder's content to the root folder and delete dist folder. You can do it by hand or use a script since we're not going to remain caveman forever, and I want to start automating things in the next posts:

find . -mindepth 1 -maxdepth 1 ! -name 'dist' ! -name '.git' -exec rm -rf {} +
cp -r dist/* .
rm -r dist

Commit and push to the configured branch.

Not Caveman Forever

The process I just showed is error prone and cumbersome. In another post I will discuss how I automated it, for those impatient here is the code of the automation https://github.com/uxjp/uxjp.github.io/pull/5/files.

DEV Community: João Pedro Gonçalves Rocha Ribeiro