After 6 years, I switched from Jekyll to JavaScript for my personal website

Guide to setup the infrastructure for my personal website using a github public template based on TypeScript, TailwindCSS, Notion Integration & Vercel for Deployment

#personal-website#technology

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)
        • 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:

Creating a TypeScript Vercel App on Mac (Dummies version)

The inspiration of personal website design came from Bartosz Jarocki's Personal Website mixed with his Jarocki's Online CV.

    • 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
      • 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)
    • 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>
    • CLI API Call:
curl -X POST 'https://api.notion.com/v1/databases/

Content update with my data

    • Resume
    • Homepage
    • Abou

Results

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

Resources

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

Click here to share this article with your friends on X if you liked it.