HOW TO CREATE A PERSONAL BLOG FOR DATA SCIENTISTS

Introduction

In today’s digital age, having a personal website is more than just a tech-savvy trend—it’s a crucial tool for building a professional online presence. As a young professional in the field of data science, a personal website can serve as your virtual business card, showcasing your skills, achievements, and personality. It’s a space where you can control the narrative, presenting your portfolio, resume, and blog posts to potential employers, clients, and collaborators. Unlike social media profiles, a personal website offers complete customization, allowing you to stand out in a competitive job market and establish your unique brand. In this tutorial, we will use Jekyll to generate our site, Firebase Hosting to host it, CloudFlare for custom domain & DNS, and GitActions to manage CI/CD.

Why Jekyll

I think using Jekyll to build a website could be a good option. It’s a free tool that allows people without web development knowledge to create nice websites. Jekyll supports content creation in Markdown format, which is widely used and loved by the Data Science community. Once your website is created, you can export your Jupyter or R Notebook into markdown format and then paste the content into the Jekyll page (with some additional steps), and it will look great. Plus, this whole setup should cost around $15 AUD per annum, which is much less compared to using platforms like Wix or WordPress.

Prerequisites

You would need some prerequisite knowledge before getting started. Feel free to skip you already have those:

  1. Basics knowledge of bash scripting
  2. Basics knowledge of markdown
  3. Basic knowledge of Git, GitHub, and GitActions
  4. Any code editor

High-Level Overview: What We’ll Cover

Creating a personal website may sound intimidating, but we’ll break it down into simple, manageable steps. Here’s what we’ll cover:

  1. Creating the Website: We will use Jekyll to generate the initial version of our website. Jekyll is a static site generator that’s perfect for personal blogs and project sites.
  2. Hosting Your Website with Firebase: We will host the website using Firebase Hosting, a fast and secure hosting solution for your static content.
  3. Buying a Custom Domain and Configuring DNS: Your domain is your website’s address on the Internet. We’ll discuss purchasing a domain that reflects your personal brand. DNS settings connect your domain to your hosting service. I’ll explain how to configure these settings to make your website accessible online.
  4. Configuring CI/CD Pipeline: We will set up a Continuous Integration/Continuous Deployment (CI/CD) pipeline to automate the process of deploying updates to your website, ensuring it stays up-to-date with minimal effort.
  5. Future Use: We’ll discuss how to maintain and update your website, including adding new content and features as your needs evolve.

By the end of this guide, you’ll have a fully functional personal website ready to showcase your professional journey and ambitions. Let’s get started!

Part I: Creating the Website

Install Jekyll and all its dependencies.

To use Jekyll on your computer you will need to install it along with it dependences. For this article, I assume that you are using a Mac. First, we are going to install HomeBrew:

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

Then, we install chruby and ruby-install with HomeBrew:

brew install chruby ruby-install xz

Then we install Ruby on Mac:

ruby-install ruby 3.1.3

After a few minutes of installation, we can make sure that chruby will be automatically used by our shell:

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

If you encounter any difficulties with the installation steps, please read the official instructions here.

Now you need to quit and relaunch the terminal. After this is done, type the following command in the terminal to check your current version of Ruby:

ruby -v

It should output something like this: ruby 3.1.3p185 (2022-11-24 revision 1a6b16756e) [arm64-darwin22]. Your output might be different, but the key here is that the version should be 3.1.3p185 or higher.

Now, we are ready to install Jekyll and Bundler using gem:

gem install jekyll

Pick a theme to use and download the code

For picking a suitable theme, I recommend going to Jekyll Themes and picking one of the blog post themes there. Personally, I found themes on jekyllthemes.io elegant and visually pleasing. There are plenty of free themes there to use. Let’s say you pick a theme called “Beautiful Jekyll”. Your next step is to download the code of that theme to your local machine. To do so, click on “Get Beautiful on GitHub,” then on the GitHub page, click on <> Code and pick “Download Zip.” After you unzip it, put the code into some dedicated folder on your Desktop. It makes sense to create a GitHub repository for this project so that you won’t lose your work.

Build site for the first time

First, please go to the folder where you saved your files and open the one called Gemfile. There, you would need to check that the version of Jekyll is set to 3.9.4. i.e. gem 'jekyll', '3.9.4'. If you see something different, then please change it. Then, open Terminal in the folder where you saved your site files. I.e. right click on it and then select “Services” -> “New Terminal at Folder.” Then type the following to install everything that is required:

bundle add webrick

Then type and execute the following:

bundle install

Then, the following:

bundle update

The reasoning behind those operations is to ensure that you have all the dependencies to build your static website.

Then, for deploying your site locally, you can use the following:

bundle exec jekyll serve

Please note that you might encounter some errors like “It looks like you don’t have package-name installed on your computer.” If you see this, don’t worry. In that case, all you need to do is install that dependency by typing the command:

bundle add `package-name`

Then, you need to run bundle install followed by bundle update. Then you can run bundle exec jekyll serve again; hopefully, it will work.

To build the website, you need to run the following:

bundle exec jekyll build --destination public

Part II: Hosting Your Website with Firebase

In this section, we’ll walk through hosting your website using Firebase. Firebase offers a straightforward way to deploy websites and is particularly cost-effective for low-traffic sites. Here’s how to do it:

  1. Sign Up for Firebase: Go to the Firebase Console. Click “Get Started” and sign up using your Google account.

  2. Create a Firebase Project: After signing in, click “Create a Project”. Name your project and click “Create” to set it up.

  3. Install Firebase Tools: Open your terminal.

    Install Firebase tools by running:

      npm install -g firebase-tools

  4. Login to Firebase: In the terminal, type:

      firebase login

    A browser window will open. Grant the necessary permissions to allow Firebase CLI to access your projects.

    Once done, you should see “Firebase CLI Login Successful” in your terminal.

  5. Initialize Firebase Hosting: Navigate to the folder containing your website assets:

      cd {path-to-your-project}

    Initialize Firebase hosting by typing:

      firebase init hosting

    Choose “Use an existing project” and select your Firebase project from the list.

    Specify your “public” directory (the folder where your website assets are located).

      ? What do you want to use as your public directory? public

    Choose “No” for configuring as a single-page app:

      ? Configure as a single-page app (rewrite all urls to /index.html)? No

    To set up automatic builds and deploys with GitHub, choose “No.” We will set it up later.

      ? Set up automatic builds and deploys with GitHub? (y/N) N

  6. Local Deployment: Test your site locally to ensure everything works:

      firebase serve

    Open your browser’s provided URL (usually http://localhost:5000) to see your website.

  7. Deploy to Production: Once you’re satisfied with the local version, deploy your site to the web:

      firebase deploy

    After deploying, Firebase will provide a URL for your live site. Visit this URL to see your deployed website.

Important Notes:

Firebase Hosting automatically installs an SSL certificate, ensuring your site’s connection is secure and encrypted. Firebase Hosting is generally free for low-traffic websites, making it a cost-effective solution.

By following these steps, you can easily host your personal website on Firebase, ensuring it’s accessible and secure.

Quick note: You might encounter a redirect error when you have multiple pages in your Jekyll setup, which will result in an undefined page and nothing being served to your customers. To fix this, you can update the firebase.json file with the following content:

{
  "hosting": {
    "public": "public",
    "cleanUrls": true,
    "trailingSlash": false,
    "rewrites": [
      {
        "source": "/about",
        "destination": "/about/index.html"
      },
      {
        "source": "/contact",
        "destination": "/contact/index.html"
      }
    ]
  }
}

This code covers cases when you have an about and contact page. You can change it accordingly based on your setup.

Part III. Buying a Custom Domain and Configuring DNS

Buying a custom domain

This section will cover how to purchase a custom domain and configure the DNS settings to point to your Firebase-hosted site. This will ensure that your website is accessible via your chosen domain name. To buy a custom domain and configure DNS, I will use Cloudflare.

First, you need to create an account with Cloudflare. Remember to verify your email address, as you won’t be able to register a new domain without this step. After creating an account with Cloudflare, you can go to Domain Registration and select Register Domains. In the search bar, type the name of the website you want (for example, I typed datatechsimplified.dev), then click search. You will be presented with various options - simply choose one and click purchase. You will need to provide your details and credit card information, and that’s it!

Configuring DNS

You need to return to Firebase Console, and under your hosting for your relevant project, there will be an option to add a custom domain. There, you will need to provide the domain that you purchased. After that, you will be given A record and TXT records. You would need those records for the second step.

Then you need to go to your Cloudflare account, under “Domain Registration,” pick “Manage Domains,” and then press the “Manage” button next to the name of the domain you created. There, you should pick the option “Update DNS Configuration.” You will be presented with the Records part of DNS settings. There, to configure your DNS settings in Cloudflare for Firebase Hosting, follow these steps: Add an A Record by selecting “A” from the dropdown, enter “@” to signify the root domain (datatechsimplified.dev), and use the IPv4 address provided by Firebase {ip-provided-by-firebase}. Leave the Proxy Status as “Proxied” and set the TTL to “Auto.” Next, add a TXT Record by selecting “TXT” from the dropdown, enter “@” to signify the root domain (datatechsimplified.dev), and use the content {content-given-as-shown-in-firebase}. Set the TTL to “Auto.” After updating these DNS settings in Cloudflare, return to your Firebase Hosting setup page and click the “Verify” button to complete the domain verification process.

For extra security, you can enable DNSSEC by going to your DNS menu, clicking Settings, and picking “Enable DNSSEC.” It should take effect after 24 hours.

Note on security

Enabling DNSSEC (Domain Name System Security Extensions) ensures that the information your website sends to visitors is secure and hasn’t been tampered with, protecting against certain types of online attacks. Additionally, using Firebase Hosting provides a free SSL certificate, which encrypts the connection between your website and your visitors. This means that any data exchanged, such as passwords or personal information, is kept safe from hackers. Together, these features make your website more secure and trustworthy.

If you encounter a “Too Many Redirects” error in this setup, set SSL/TLS Encryption Mode to Full or Full (strict). Here’s how: Log in to Cloudflare ➔ Select your domain ➔ Go to the SSL/TLS tab ➔ Set the SSL/TLS encryption mode to Full or Full (strict).

Part IV. Configuring CI/CD Pipeline

By this moment, you probably noticed that there are plenty of steps that you need to do to make changes to the production website. I recommend using the following flow when you just working on your local machine:

  1. Make changes to the code
  2. Run bundle update to update the bundle
  3. Run bundle exec jekyll serve to serve site locally

After you are satisfied with the results, I recommend pushing changes to the respective GitHub Repository. In this part of the tutorial, we will talk about how to make it happen: every time we push changes to the main branch, the newly updated site will automatically serve your customers. Before proceeding to following steps please make sure that you have GitHub Account.

First, open Terminal in your Jekyll project folder and type the following:

firebase init hosting:github

This will pop up a window asking you to authorize Firebase CLI with your Git Account. Click on Authorize Firebase. It will give you the following output: Firebase CLI GitHub Login Successful.

Then, you need to provide in CLI data about your User Name and Repo name.

{user-name}/{repo}

On a question regarding setting up a workflow to run and build script, we need to type Y because we are using a static site generator. That being said, setting up the build process for Jekyll’s website is a bit involved, so instead of providing actual code, we just type something like this:

placeholder

Then, type Y on the question asking if you want to set up automatic deployment to your site’s live channel when a pull request (PR) is merged. Then, provide the name of the branch, e.g., Main.

Now, we need to make changes to the following files: firebase-hosting-merge.yml and firebase-hosting-pull-request.yml. Firstly, please copy the values of parameters firebaseServiceAccount and projectId that you find inside the firebase-hosting-merge.yml. Then, you need to change firebase-hosting-merge.yml file content in the following way:


name: Deploy to Firebase Hosting on merge
on:
  push:
    branches:
      - main
jobs:
  # Build job
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4
      - name: Setup Ruby
        uses: ruby/setup-ruby@v1
        with:
          ruby-version: '3.1'
          bundler-cache: true
          cache-version: 0
      - name: Install Dependencies
        run: bundle install
      - name: Build with Jekyll
        run: bundle exec jekyll build --destination public
        env:
          JEKYLL_ENV: production
      - name: Upload Artifact
        uses: actions/upload-artifact@v3
        with:
          name: site
          path: ./public

  deploy:
    needs: build
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4
      - name: Download Artifact
        uses: actions/download-artifact@v3
        with:
          name: site
          path: ./public
      - name: Deploy to Firebase
        uses: FirebaseExtended/action-hosting-deploy@v0
        with:
          repoToken: ${{ secrets.GITHUB_TOKEN }}
          firebaseServiceAccount: ${{ secrets.YOUR_FIREBASE_SERVICE_ACCOUNT }}
          projectId: YOUR_PROJECT_ID
          entryPoint: .

Make sure to replace YOUR_FIREBASE_SERVICE_ACCOUNT and YOUR_PROJECT_ID with the values you copied earlier.

The same goes for firebase-hosting-pull-request.yml, first fill it with this content and then make sure to replace placeholders with the values you copied earlier.


name: Deploy to Firebase Hosting on PR
on: pull_request
permissions:
  checks: write
  contents: read
  pull-requests: write
jobs:
  build_and_preview:
    if: ${{ github.event.pull_request.head.repo.full_name == github.repository }}
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4
      - name: Setup Ruby
        uses: ruby/setup-ruby@v1
        with:
          ruby-version: '3.1'
          bundler-cache: true
          cache-version: 0
      - name: Install Dependencies
        run: bundle install
      - name: Build with Jekyll
        run: bundle exec jekyll build --destination public
        env:
          JEKYLL_ENV: production
      - name: Deploy to Firebase
        uses: FirebaseExtended/action-hosting-deploy@v0
        with:
          repoToken: ${{ secrets.GITHUB_TOKEN }}
          firebaseServiceAccount: ${{ secrets.YOUR_FIREBASE_SERVICE_ACCOUNT }}
          projectId: YOUR_PROJECT_ID
          entryPoint: .

Now, all you need to do is to push changes to the GitHub repo, and (hopefully) it will automatically build and deploy it to the Firebase. And that’s it! Now you have your own little CI/CD pipeline!

Part V. Future Use

As you continue modifying your website by adding content and changing it appearance, I recommend following this pipeline:

  1. Make changes to the code
  2. If you made changes to gemfile then run bundle install followed by bundle update. If not, then proceed to the next step.
  3. Serve your site locally to make sure it works and looks as expected via bundle exec jekyll serve
  4. Next, push changes to the main branch of your repo. This should initiate the build of the production version of the website and deploy it to Firebase.

For further guidance, check out this tutorial on creating your first blog post and this one on working with and customizing your website.

Conclusion

I hope this article was helpful. While I still recommend that most people use WordPress to create their Blogs, I do believe that this approach is also viable. This is especially true if you have some technical skills and enjoy writing in markdown format. If you find this piece helpful, please make sure to share it so that it can help other people as well.

#jekyll #firebase #cloudflare #gitactions #blog #datascience #staticsitegenerator #hosting #domain #dns #cicd

If you found this article useful and would like to support my work, consider buying me a coffee! Just click on the button below and follow the instructions to make a donation. Your support helps me create more valuable content. Thank you!