Part 1: Install curl, git and zsh
Linux
Step 1: Update and upgrade Package Information
Following command fetches the latest version of package list from Ubuntu's software repository
~>sudo apt update
sudo means Super User, apt is a tool for installing and managing applications on Linux
~>sudo apt upgrade
This command downloads and installs updates for each outdated package and dependencies
Step 2: Install curl, git and zsh
This command downloads 3 main packages and dependencies (curl:web utility; git: VCS; zsh: extension of Bash, only Linux and macOS 10.15 or before need it)
~>sudo apt install curl git zsh
$SHELL is a comment, check if root directory is using zsh or not
~>echo $SHELL
Possible output: /bin/bash
~>which zsh
Possible output: ~/usr/bin/zsh
~>chsh -s /usr/bin/zsh
This command change preferred SHELL as zsh instead as path /usr/bin/zsh above, OS will ask you enter your laptop login password
macOS
Step 1: Install Xcode from macOS AppStore,next download terminal emulator iTerm2:
https://iterm2.com/
Step 2: Change from bash to zsh (for macOS older than 10.15)
$SHELL is a comment, check if not zsh then
~>echo $SHELL
~>which zsh
~>chsh -s /usr/bin/zsh
Step 3: Install Homebrew that automatically download all necessary libraries (for Python, Django), and automatically keep them up-to-date, in a single command.
https://brew.sh/
Copy URL web page above from Homebrew website, paste it to iTerm2 command line and enter
!!! Always delete any "$" at the beginning of copied command line
~>/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
Step 4: Next, run 3 commands on iTerm2 command line.
Follow terminal message in Step 3 and run 3 command lines below to add Homebrew to your PATH:
~>echo >> /Users/peteryung/.zprofile
~>echo 'eval "$(/opt/homebrew/bin/brew shellenv)"' >> /Users/peteryung/.zprofile
~>eval "$(/opt/homebrew/bin/brew shellenv)"
Step 5: Verify installed packages both on Linux and MacOS.
~>curl --version
~>git --version
~>zsh –version
Part 2: Set up VS Code as code editor
Step1: Google, download and install VS Code
https://code.visualstudio.com/
Click download for your platforms (Linux / macOS), extract the zip file to Application folder
Step 2: After VScode installed
Go to user root directory
~>cd ~
Run VS Code
~>code .
VS Code will be opened, and folder windows will be shown on the left pane.
Step 3: Click Extensions icons on the left side bar
Install plug-ins of VS Code by following names, install most popular one if same names are found.
"Auto Close Tag", "Auto Rename Tag", "Better Comments", "Color Highlight", "Django",
"Django Template", "HTML Boilerplate", "HTML CSS Support", "Image preview",
"ident-rainbow", "Live Server", "Print", "vscode-icons",
"Python"(This Microsoft plug-in will install 2 more plug-ins: “Pylance” and “Python Debugger”),
#"Vim"(Only for Linux)
Step 4: Type "theme" on the top textbox and install the themes you like.
e.g."GitHub Theme", "Atom One Dark Theme"…etc.
Type Ctrl+K Ctrl+T to display the Color Theme picker.
Step 5: Config plug-in settings by clicking left bottom gearwheel logo.
Then, click right upper corner paper logo "Open Settings (JSON)"
Copy and paste the following JSON code:
{
"workbench.startupEditor": "none",
"workbench.colorTheme": "GitHub Dark",
"workbench.preferredDarkColorTheme":"GitHub Dark Default",
"workbench.preferredLightColorTheme": "GitHub Light Default",
"workbench.iconTheme": "vscode-icons",
"better-comments.multilineComments": true,
"better-comments.highlightPlainText": true,
"better-comments.tags": [
{
"tag": "!",
"color": "#FF2D00",
"strikethrough": false,
"underline": false,
"backgroundColor": "transparent",
"bold": false,
"italic": false
},
{
"tag": "?",
"color": "#3498DB",
"strikethrough": false,
"underline": false,
"backgroundColor": "transparent",
"bold": false,
"italic": false
},
{
"tag": "//",
"color": "#474747",
"strikethrough": true,
"underline": false,
"backgroundColor": "transparent",
"bold": false,
"italic": false
},
{
"tag": "todo",
"color": "#FF8C00",
"strikethrough": false,
"underline": false,
"backgroundColor": "transparent",
"bold": false,
"italic": false
},
{
"tag": "*",
"color": "#98C379",
"strikethrough": false,
"underline": false,
"backgroundColor": "transparent",
"bold": false,
"italic": false
}
],
"files.exclude": {
"**/.git": false,
"**/.svn": true,
"**/.hg": true,
"**/CVS": true,
"**/.DS_Store": true,
"**/Thumbs.db": true
},
"files.associations" : {
"**/*.html": "html",
"**/templates/**/*.html": "django-html",
"**/templates/**/*" : "django-txt",
"**/requirements{/**.*}.{txt,in}": "pip-requirements",
"*.html": "html",
"*.css": "tailwindcss"
},
"editor.minimap.enabled": false,
"files.autoSave": "onFocusChange",
"vsicons.dontShowNewVersionMessage": true
}
Refer to the plug-ins help and config the JSON file above, click "Ctrl/command + s" to save changes
Step 6: Install Oh My Zsh
https://ohmyz.sh/
On the webpage, click Install oh-my-zsh button, copy url under "Install oh-my-zsh via curl"
~>sh -c "$(curl -fsSL https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"
If you see terminal shows: Do you want to change your default shell to zsh? Input “Y” and enter.
Step 7: Google to install powerlevel9k or powerlevel10k
On GitHub, go to README Installation (e.g. powerlevel10k)
https://github.com/romkatv/powerlevel10k?tab=readme-ov-file#oh-my-zsh
Scroll down and find Install Powerlevel10k itself. Find Installation by Oh My Zsh.
1. Clone the repository by execute command line below on terminal:
~> git clone --depth=1 https://github.com/romkatv/powerlevel10k.git "${ZSH_CUSTOM:-$HOME/.oh-my-zsh/custom}/themes/powerlevel10k"
2. Open folder ~/.zshrc on the left of VS Code, find the line that sets ZSH_THEME, and change its value to "powerlevel10k/powerlevel10k".
ZSH_THEME="powerlevel10k/powerlevel10k"
Step 8: Download font from nerdfonts.com
https://www.nerdfonts.com/font-downloads
Personal preference: click Download button of "Cousine Nerd Font"
Install Font in Ubuntu
1. Copy downloaded font from download folder to hidden folder ~/.local/share/fonts, create the folder if not exists.
2. Rebuild font cache in terminal:
~> fc-cache -f -v
3. Confirm fonts are installed correctly:
~> fc-list | grep "<name-of-font>"
Install Font in macOS
Double-click the unzipped font file and Font Book will open a preview of the font.
Click “Install Font” at the bottom of the preview.
Part 3: Config Terminal themes for Zsh.
Step 1a: Config iTerm2 (macOS) only
1. Click left up corner iTerm2 logo, click settings...
2. Click Appearance Tab
3. In "Windows" sub-Tab, select top 4 boxes
4. In "Tab" sub-Tab, select top and bottom boxes
5. In "Panes" sub-Tab, unselect first box
6. Click Profile Tab
7. In "General" sub-Tab, under Icons: select "Build-in Icon for Current App"
8. In Under Initial directory: select "Reuse previous session's directory"
9. In "Colors" sub-Tab, under Color Preset: visit iTerm2 online gallery, pick up one you like.
(paste photo taken from iphone and follow tutor's "ANSI Colors" settings)
10.In "Text" sub-Tab, under Font: select downloaded fonts you have picked up from nerdfonts.com
11.In "Window" sub-Tab, under Transparency: set to 10; under Scaling mode: select "Scale to Fit"
12.Click Advanced Tab, you might google and find more informations to customize your settings. (e.g. AI settings)
Step 1b: Config Ubuntu Terminal
1. Click right hand side up corner three bar logo, click Preference
2. Under unnamed profile, select downloaded fonts you have picked up from nerdfonts.com
Step 2: Config .zshrc file in VS Code
1. Add ZSH_THEME="powerlevel10k/powerlevel10k" after export ZSH="$HOME/.oh-my-zsh"
2. Add following 3 lines before "plugins=" code:
HIST_STAMPS="mm/dd/yyyy"
HISTSIZE=50000
SAVEHIST=50000
3. M1 or later Mac only, add this line under "source $ZSH/oh-my-zsh.sh"
export ARCHFLAGS="-arch arm64"
4. Add following lines afterwards:
# Powerlevel10k configurations
typeset -g POWERLEVEL9K_MODE="nerdfont-complete"
5. Refer to photo on iphone type 10 more rows to config VS Code "flag"
6. Config Powerlevel10k by 9k config:
https://github.com/Powerlevel9k/powerlevel9k/wiki/Show-Off-Your-Config
(e.g. Follow giladgo's configuration with "history" on the right after the clock)
Part 4: Install Pyenv
https://github.com/pyenv/pyenv
pyenv lets you easily switch between multiple versions of Python.
1. Scroll down click Installation, go to A.Getting Pyenv section.
2a. For Linux, follow 2. Basic GitHub Checkout (Never use Homebrew!!!)
Paste following command on Terminal:
~>git clone https://github.com/pyenv/pyenv.git ~/.pyenv
2b. For macOS, follow 1. Update homebrew and install pyenv:
~>brew update
~>brew install pyenv
3. Follow B. Set up your shell environment for Pyenv, scroll down Zsh click ->Details
Input and run following 3 lines on Terminal.
~>echo 'export PYENV_ROOT="$HOME/.pyenv"' >> ~/.zshrc
~>echo '[[ -d $PYENV_ROOT/bin ]] && export PATH="$PYENV_ROOT/bin:$PATH"' >> ~/.zshrc
~>echo 'eval "$(pyenv init - zsh)"' >> ~/.zshrc
After that, restart your shell
~>exec "$SHELL"
4a. For Linux,
In Terminal type in following command lines:
~>sudo apt update; sudo apt install make build-essential libssl-dev zlib1g-dev \
~>libbz2-dev libreadline-dev libsqlite3-dev curl git \
~>libncursesw5-dev xz-utils tk-dev libxml2-dev libxmlsec1-dev libffi-dev liblzma-dev
4b. For macOS,
In iTerm2 type in following 4 command lines one by one and press enter:
~>brew install tcl-tk
~>brew install readline
~>brew install ncurses
~>brew install zlib
~>echo 'export PATH="/opt/homebrew/opt/ncurses/bin:$PATH"' >> ~/.zshrc
5. Add following codes in ~/.zshrc
a. Add pyenv inside plugins:
plugins=(git pyenv)
b. Add pyenv inside: POWERLEVEL9K_LEFT_PROMPT_ELEMENTS:
POWERLEVEL9K_LEFT_PROMPT_ELEMENTS=(... pyenv ...)
c. Add icons and background color:
typeset -g POWERLEVEL9K_PYTHON_ICON='UE73C'
typeset -g POWERLEVEL9K_PYENV_BACKGROUND='229'
d. Add following code at the end:
# Set up your shell environment for Pyenv
export PYENV_ROOT="$HOME/.pyenv"
[[ -d $PYENV_ROOT/bin ]] && export PATH="$PYENV_ROOT/bin:$PATH"
eval "$(pyenv init - zsh)"
# readline
export LDFLAGS="-L/opt/homebrew/opt/readline/lib"
export CPPFLAGS="-I/opt/homebrew/opt/readline/include"
# ncurses
export LDFLAGS="-L/opt/homebrew/opt/ncurses/lib"
export CPPFLAGS="-I/opt/homebrew/opt/ncurses/include"
# zlib
export LDFLAGS="-L/opt/homebrew/opt/zlib/lib"
export CPPFLAGS="-I/opt/homebrew/opt/zlib/include"
export PATH="/opt/homebrew/opt/ncurses/bin:$PATH"
Part 5: Config ~/.pyenv libaries
Step 1: Visit Django web page and decide which Python versions should pyenv install:
https://www.djangoproject.com/download/
Use Long Term Support(LTS) Django Version 5.2 up to 2028
https://docs.djangoproject.com/en/5.2/faq/install/#what-python-version-can-i-use-with-django
Django 5.2 support Python version 3.10, 3.11, 3.12, 3.13
Step 2: List out all available versions of Python
~>pyenv install --list
So, we should develop at least 4 latest debugged python versions libraries:
3.10.17, 3.11.12, 3.12.10 and 3.13.3
Step 3: On Terminal type in 4 commands to install 4 versions of python above:
~>pyenv install 3.10.17
~>pyenv install 3.11.12
~>pyenv install 3.12.10
~>pyenv install 3.13.3
Part 6: Install zsh autosuggestions and syntax-highlight
Step 1: Google github zsh autosuggestions
https://github.com/zsh-users/zsh-autosuggestions
Step 2: Under Installation, click in INSTALL.md
https://github.com/zsh-users/zsh-autosuggestions/blob/master/INSTALL.md
Step 3: Click Oh My Zsh and then copy and paste following command run in Terminal
git clone https://github.com/zsh-users/zsh-autosuggestions ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-autosuggestions
Step 4: Add the plugin to the list of plugins for Oh My Zsh to load (inside ~/.zshrc):
plugins=( [plugins...] zsh-autosuggestions)
Next, start a new terminal session.
Step 5: Google github zsh-syntax-highlight
https://github.com/zsh-users/zsh-syntax-highlighting?tab=readme-ov-file
Step 6: Under Oh My Zsh, copy and run following command in Terminal
git clone https://github.com/zsh-users/zsh-syntax-highlighting.git ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-syntax-highlighting
Step 7: Activate the plugin in ~/.zshrc:
plugins=( [plugins...] zsh-syntax-highlighting)
Next, start a new terminal session.
Part 7: Install virualenvwrapper
Step 1: Google git pyenv virtualenvwrapper
https://github.com/pyenv/pyenv-virtualenvwrapper
Step 2: Installing pyenv-virtualenvwrapper as a pyenv plugin
git clone https://github.com/pyenv/pyenv-virtualenvwrapper.git $(pyenv root)/plugins/pyenv-virtualenvwrapper
Step 3: To setup a virtualenvwrapper into your shell
~>pyenv virtualenvwrapper_lazy
Step 4: Set up your shell environment for Pyenv-virtualenvwrapper in ~>/.zshrc
export PYENV_VIRTUALENVWRAPPER_PREFER_PYENV='true'
export WORKON_HOME=$HOME/.virtualenvs
export VIRTUALENVWRAPPER_PYTHON=$(pyenv which python)
pyenv virtualenvwrapper_lazy
Part 8: Create project folder and corresponding virtual environments
Step 1: Create project folder
e.g. Create project folder on ~/Desktop/erb6
Step 2: Execute following command in Terminal
~>source ~/.zshrc
Step 3: Go to project folder and config pyenv version locally
~>cd Desktop/erb6
~>pyenv versions
~>pyenv local 3.10.17
Step 4: Create virtual environment e.g. named as "erb6ve310"
~>mkvirtualenv erb6ve310
Then, you should find new folder "erb6ve310" created under ".virtualenvs" folder
Step 5: Add following code in ~/.zshrc
typeset -g POWERLEVEL9K_VIRTUALENV_BACKGROUND='154'
#Powerlevel10k theme follow .p10k.zsh config file if following statement contain in ~/.zshrc:
#[[ ! -f ~/.p10k.zsh ]] || source ~/.p10k.zsh
#Inside .p10k.zsh, set this code if you want to keep flags on each lines in Terminal.
#typeset -g POWERLEVEL9K_TRANSIENT_PROMPT=off
Step 6: Kick off virtual environment
~>workon erb6ve310
Step 7: Stop virtual environment
~>deactivate
Step 8: Check versions of libraries installed in virtualenvs
~>pip freeze
Step 9: Check python version created in virtualenvs
~>pip list
Step 10: Install Django in virtualenvs
~>pip install django
It should install latest django LTS version 5.2.1 or you can define version after "django" above
Part 9: Kick off Django project in project folder and start local web server
Step 1: Kick off Django project in project folder, make sure terminal is in project folder and virtualenvs had kicked off!!!
~> django-admin startproject erb6 .
"erb6" is the project name, you can define it by yourself. Personally I would use same name as project folder name.
Step 2: macOS iTerm2, click cmd+shift+upper arrow to split windows up and down; Ubuntu open one more Terminal. Start local web server:
~> python manage.py runserver
Step 3: Test local web server in browser, Firefox/Google Chrome, use private browsing type in:
http://localhost:8000/
You should see a Rocket welcome page from Django shows webserver run successfully. To quit the webserver, type cmd+c
Part 10: Install gitignore
Step 1: Google "gitignore.io"
https://www.toptal.com/developers/gitignore/
Step 2: In textbox, type "django", click create.
Step 3: Go to VS Code, under project folder, erb6, create new file name gitignore
Step 4: Copy and paste all code from Step 2 generated to this file.
https://www.toptal.com/developers/gitignore/api/django
Step 5: Under ### Django ###, add 2 more lines of code below:
.vscode
.python-version
Step 6: Go back to terminal type:
~>git init
Step 7: In VS Code, click setting wheel on left bottom and then click "Open Settings JSON" on top right corner. Add following codes:
"files.exclude": {
"**/.git": false,
"**/.svn": true,
"**/.hg": true,
"**/CVS": true,
"**/.DS_Store": true,
"**/Thumbs.db": true
},
Part 11: In VS Code, start config settings.py
Lot's code need to be changed, so refer to the comments at erb6/settings.py
Part 12: Create new file under project root folder to store screte key and DB password...etc.
Step 1: Open new file named ".env" under project root folder
Step 2: Copy SECRET_KEY = 'django-insecure-)5l(%4@u+$39ykq^8_b)^!yzr#b8xwlw)kr=pf%sn*d9kqntej' from settings.py
Step 3: Change variable new as SITE_SECRET_KEY
Step 4: Go back to settings.py file and change the SECRET_KEY statement as below:
SECRET_KEY = os.getenv('SITE_SECRET_KEY')
Step 5: We would have error in browser. Go to Terminal install python-dotenv to solve this error.
~> pip install python-dotenv
Step 6: Add follow statements in settings.py
from dotenv import load_dotenv
import os
load_dotenv()
Part 13: Process git commit
Step 1: Go to another section of Terminal type:
~>git add .
Then, the flag in terminal of git will be changed from green to yellow
Step 2: Type following command:
~>git commit -m "Step 1 : Proj Init"
This means wrap up milestone of the project. It's a snapshot ready to push on git service.
The flag in terminal of git will change to green again.
