After 6+ yrs, I switched my personal website from Jekyll to JS

Updating Old Github Page (Ruby+Jekyll) on Mac (Dummies version)

• Step 1: Clone the git repo hosting your github page into your local system. You can do it via browser, GitHub desktop app or terminal (whatever works for you!)

• Step 2: Open terminal & cd into the directory of your local github-page repo. For example: cd Documents/Github/apedebugger.github.io

• Step 3: Now, open the local directory in your favourite editor (I use Sublime) & open the Gemfile. Now, update github-pages gem in the Gemfile with the version from https://pages.github.com/versions/. For example: gem “github-pages”, “~> 228”, group: :jekyll_plugins. Save the Gemfile.

• Step 4: On the terminal cd’ed into the directory of your local github-page repo, Install ruby as per the version from https://pages.github.com/versions/

  • Install homebrew following instructions from https://brew.sh/ (I did it using .pkg instead of terminal prompt; you can choose any option depending upon whether you are logged-in on your Mac using an administrator or other user-account)

    • When installated via .pkg (Homebrew — The Missing Package Manager for macOS (or Linux)). The package will install to:

      • /opt/homebrew on Apple Silicon & /usr/local/bin/brew and /usr/local/Homebrew on Intel

    • To add Homebrew to your PATH run brew shellenv in your shell profile (e.g. ~/.bash_profile or ~/.zprofile)

      • echo 'eval "$(/opt/homebrew/bin/brew shellenv)"' >> ~/.zprofile

      • eval "$(/opt/homebrew/bin/brew shellenv)”

  • Install chruby & ruby-install: brew install chruby ruby-install xz

  • Run chruby in terminal: chruby. Check the ruby versions installed.

  • If the version you need (as per the version from https://pages.github.com/versions/) is installed then skip to the next step else install ruby using ruby-install ruby 2.7.4 followed by below commands

    • echo "source $(brew --prefix)/opt/chruby/share/chruby/chruby.sh" >> ~/.zshrc

    • echo "source $(brew --prefix)/opt/chruby/share/chruby/auto.sh" >> ~/.zshrc

    • echo "chruby ruby-3.1.3" >> ~/.zshrc # run 'chruby' to see actual version

  • Now, check the ruby version using ruby -v

  • If it’s not the version you need (as per the version from https://pages.github.com/versions/) or there are multiple versions installed on your Mac then use an auto-switch solution

    • On the terminal cd’ed into the directory of your local github-page repo, create a file called .ruby-version with the required version of ruby (as per the version from https://pages.github.com/versions/) inside your local github-page repo: echo ‘2.7.4’ >> .ruby-version

    • To reset the ruby version for the directory of your local github-page repo, run following commands:

      • 1st: cd ~

      • 2nd: cd -

    • Now, check the ruby version using ruby -v & verify if it shows the required ruby version (as per the version from https://pages.github.com/versions/). If yes, proceed else repeat this step from the start.

• Step 5: If step 4 is successful, then on the terminal cd’ed into the directory of your local github-page repo, run commands:

  • bundle update --bundler

  • bundle install

  • If prompted by terminal, then run gem install bundler:1.16.5.

• Step 6: Test your updated jekyll site locally using bundle exec jekyll serve & go to the <server address> shown at the end of terminal or http://localhost:4000/.

  • Note: If you've installed Ruby 3.0 or later (which you may have if you installed the default version via Homebrew), you might get an error at this step. That's because these versions of Ruby no longer come with webrick installed. To fix the error, try running bundle add webrick, then re-running bundle exec jekyll serve.

• Additional steps for Vercel Compatibility (Vercel is linux)

  • Update Gemfile for linux compatibility with the local terminal command @ git repo

    • bundle lock --add-platform x86_64-linux

  • Ruby version mishap:

    • Fixed it by considering ruby versions >=2.7.0 & <=3.1.3 in .ruby-version or/and Gemfile

  • nokogiri gem installation on vercel is breaking up

    • Run bundle config --local build.nokogiri --use-system-libraries

Results:

Github page - https://apedebugger.github.io/

Vercel - https://oldshubhammittal.vercel.app/

Resources:

• https://docs.github.com/en/pages/setting-up-a-github-pages-site-with-jekyll/creating-a-github-pages-site-with-jekyll

• https://jekyllrb.com/docs/installation/macos/

• https://www.rubyonmac.dev/how-to-upgrade-the-ruby-version-in-your-project

• https://www.moncefbelyamani.com/how-to-install-xcode-homebrew-git-rvm-ruby-on-mac/#how-to-install-different-versions-of-ruby-and-switch-between-them

• https://docs.github.com/en/pages/setting-up-a-github-pages-site-with-jekyll/testing-your-github-pages-site-locally-with-jekyll#building-your-site-locally

• https://vercel.com/guides/deploying-jekyll-with-vercel

• https://talk.jekyllrb.com/t/error-your-site-could-not-be-built-no-repo-name-found/5688

Creating a TypeScript Vercel App on Mac (Dummies version)

Targeted Personal Website Design - Spotlight - Tailwind CSS Personal Website Template (tailwindui.com) via Bartosz Jarocki's Personal Website mixed with Jarocki's Online CV

• Step 1: Clone the git repo hosting the nextjs app into your local system. You can do it via browser, GitHub desktop app or terminal (whatever works for you!). I did it for https://github.com/BartoszJarocki/cv & https://github.com/BartoszJarocki/jarocki.me

• Step 2: Open terminal & cd into the directory of your local github-page repo. For example: cd Documents/Github/cv & cd Documents/Github/jarocki.me

  • Check if npm or yarn is installed by running npm -v or yarn -v. If successful, update npm using npm install -g [email protected] (check the latest version on https://docs.npmjs.com/cli/v10/commands/npm) else install npm or yarn using https://docs.npmjs.com/downloading-and-installing-node-js-and-npm or brew install yarn

  • Run npm install next@latest

  • Ensure following is added in package.json of the local repo (use any editor of your choice)

    • {"scripts": {"dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint"}}

• Run npm run build (or yarn)

• Run npm run start (or yarn dev) & go to http://localhost:3000 to check the rendered local build

• Step 3: Merge the 2 repository from Step 1 to avoid subdomain setup/redirection by migrating https://cv.jarocki.me/ as /cv directory inside jarocki.me. After a lot of tussling with following issues:

  • Integrating Notion API to run the app w/o ruining the blogging automation workflow from Notion to App

  • Running both /app & /pages app structures in one app by migrating cv’s /app structure into jarocki’s /pages app

  • Merging duplicate data & file hierarchy b/w /app & /pages

  • Due to merging, fixing the imports inside /app & /pages files

  • Fixing the different CSS dependency packages of 2 apps into 1 global css file /styles/index.css inside /pages app

Notion API Testing:

API Integration Token for Notes DB: <API Integration Token for Notes DB>

Notes DB ID: <Notes DB ID>

API Call:

curl -X POST 'https://api.notion.com/v1/databases/***<Notes DB ID>***/query' \

-H 'Authorization: Bearer '"<API Integration Token for Notes DB>"'' \

-H 'Notion-Version: 2022-06-28' \

-H "Content-Type: application/json" \

Results:

New Personal Website v0.1 on Vercel - https://shubhammittal.vercel.app/

Next thing to immediately work upon:

Content update with my data

• Data Update

  • CV

  • Homepage

  • About

• Image Updates

  • Favicon design using Canva

• Portfolio on Entrepreneurship, Analytics, Product Management & Software Development

Resources:

• https://developers.notion.com/docs/working-with-databases

• https://nextjs.org/docs/app/building-your-application/routing/pages-and-layouts

Few (actually a lot) things I have parked for now

• Integration of videoask iframe, calendly link & topmate link for letting users schedule calls with me

• Google Drive API Integration as a storage solution & resource categorisation using AI?

• Substack API Integration as a subscription management platform

• Google Calendar Integration with Notion

• Expense tracker in hindi for my family. Ref: glideapps.com

• Authentication for self to scale it towards an app with UI-based content-update functionality. Authentication using Google Firebase Get Started with Firebase Authentication on Websites (google.com)

• Developing an MVP of CauseNation - Project Idea - Google Docs inside the Vercel App for Self

  • Use v0 by Vercel for UI design

• Developing an MVP for smart-evaluation of health insurance programs

• Developing an MVP of Voice-enabled Chatbot for Self using visualflow

• Developing an MVP of Property Management Platform - Google Docs for Self

• Developing an MVP of School App in Player Mode - Startup Idea - Google Docs inside the Vercel App for people whom I want to mentor

• Converting the new vercel app into a mobile app