Host a static website in Github pages

How to setup static website and host it in Gitub. This guide is hosted with this mehtod.

This guide is heavily plagiarized from Techno Tim: Meet Jekyll - The Static Site Generator
I used this guide to learn mysel but as I ran into quite a few issues that was not mentioned in the guide, I desided to create my own.

There’s quite a few Statis Website engienes that can be used nowdays but for this guide we’ll use Jekyll, another is Hugo

There’s a couple of things that will be needed

• WLS (Only for windows)
• Zsh
• VSCode
• domain
• Ruby
• Python
• Java

Setup on Widnows

Install Terminal

Install window terminal from https://learn.microsoft.com/en-us/windows/terminal/install
Launch Terminal (screenshot of terminal here)

install WSL (The Windows Subsystem for Linux)

Open a Powershell tab in terminal and run below command to install WSL

wsl --install

install ZSH (Oh My Zsh!)

Open a new tab with ubuntu in Terminal

sh -c "$(curl -fsSL https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"

Install Dependencies

Update system and and install Ruby

sudo apt update
sudo apt install ruby-full build-essential zlib1g-dev git

To avoid installing RubyGems packages as the root user:

echo '# Install Ruby Gems to ~/gems' >> ~/.zshrc
echo 'export GEM_HOME="$HOME/gems"' >> ~/.zshrc
echo 'export PATH="$HOME/gems/bin:$PATH"' >> ~/.zshrc
source ~/.zshrc

Install Jekyll bundler

gem install jekyll bundler

Creating a site based on Chirpy Starter

Visit https://github.com/cotes2020/jekyll-theme-chirpy#quick-start

After creating a site based on the template, clone your repo

git clone git@<YOUR-USER-NAME>/<YOUR-REPO-NAME>.git

then install your dependencies

cd <YOUR-REPO-NAME>
bundle

Configure Git

Set an email address in Git. You can use your GitHub-provided noreply email address or any email address.

Configure Git You’ll want to follow this guide for configuring git.Be sure to follow the LINUX version https://docs.github.com/en/github/using-git/getting-started-with-git-and-github

Set usename i Git

git config --global user.name "Lincken"

Use the command again without your name to check that it’s correct

git config --global user.name

Output should be your username like it does below

git config --global user.name
Lincken

Set email in Git

git config --global user.email "[email protected]"

Use the same command without your email to check that git is configured to use your email

git config --global user.email

Create SSH key

Now we can generate a ssh key that we can use to access Github

ssh-keygen -t rsa -b 4096 -C "[email protected]"

eval $(ssh-agent -s)

git config --global user.email "YOUR_EMAIL"

Confirm that you have set the email address correctly in Git:

git config --global user.email

The output should be your email

After making changes to your site, commit and push then up to git

git add .
git commit -m "made some changes"
git push

To open your code in VSCode use below command inside of the pulled github folder

code .

Jekyll Commands

serving your site

bundle exec jekyll s

cat ~/.ssh/id_rsa.pub.

mac setup

Install rbenv and ruby-build:

zsh Copy code brew install rbenv Initialize rbenv: Add the following to your ~/.zshrc to initialize rbenv automatically:

zsh Copy code eval “$(rbenv init -)” Reload your shell to apply these changes:

zsh Copy code source ~/.zshrc Install a New Version of Ruby: Now, install a new version of Ruby (e.g., 3.1.2) through rbenv:

zsh Copy code rbenv install 3.1.2 rbenv global 3.1.2 This will use your user directory, avoiding system-protected files.

Reinstall Bundler and Jekyll: With the new Ruby version set up, reinstall Bundler and Jekyll without sudo:

zsh Copy code gem install bundler jekyll Run bundle install in Your Project: Finally, in your project directory:

zsh Copy code bundle install

TEST TEST TEST _tabs/about.md and it will show up on this page.

GoodToKnow
Write names of posts like this, YYYY-MM-DD-Name of post.
If the date is in the future, the post won’t show up until then. To add local Images, place them in root assets folder, recomendation under a new folder called images. Not in the Site>Assets folder! That folder is just for when it has built the website, if placing anything directly there is will disaperare when it builds the website.

Java and Python is nessesary.