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)
  • 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
  • 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
  • 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
  • Ruby version mishap:
  • nokogiri gem installation on vercel is breaking up

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 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 npm@10.2.5 (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)
  • 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>
  • 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.