Deploying your personal website using GitHub

Why should you create a personal website?

A personal website can be a great way to build a more personalized portfolio to showcase your experience, projects, and achievements to potential employers. They give you more flexibility to present your authentic self and personality, and help you establish a personal brand, as opposed to traditional resumes and CVs. As a student, you might want to build a personal website to not only display your achievements, but also to demonstrate your web development skills and gain some practical learning experience.

If you want to display the same content to every visitor of your site, and you’re looking for a cost-effective solution with lower hosting costs, you might want to opt for a static personal website. However, if you would like to add interactive features like allowing visitors to leave comments on your blog posts that require backend processing, or if you want to experiment with external APIs and databases, a dynamic personal website would be a better choice.

For your reference, here is an example of a static personal website. Here is an example of a dynamic personal website

Deploying Static Websites

Prerequisite: Create a GitHub account

Step 1: Develop your website

Locally develop your website on your computer. You can use static site generators like Hugo, Jekyll, Next.js, or build a simple website using HTML, CSS, and Javascript. Locally test your website and view it using a development server to visualize your website before deployment.

Step 2: Create a GitHub repository

Login to GitHub and create a new repository for your website. Push your files from your local machine to your new GitHub repository.

Step 3: Deploy to Netlify

• Login to Netlify with your GitHub account. Authorize Netlify to access your GitHub account.

• Click Add new site from the Netlify dashboard. Click Import an existing project and select Deploy with GitHub.

• Select the repository that you pushed your website code to. Click Deploy Site and Netlify will deploy your site for you.

After you’ve deployed, Netlify provides a URL, but you can buy a custom domain and use that instead. You may also benefit from setting up continuous deployment so every time you push changes to your GitHub repository, they will be automatically deployed.

Deploying Dynamic Websites

Prerequisites: Create a GitHub account

Step 1: Develop your website

Build your dynamic website using a backend framework (e.g. Flask, Node.js) and a frontend framework (e.g. React) and thoroughly test your website locally using a development server.

Step 2: Create a GitHub repository

Login to GitHub and create a new repository for your website. Push your files from your local machine to your new GitHub repository.

Step 3: Choose appropriate hosting services

For dynamic websites, there are hosting services that can deploy both frontend and backend components of your website. Some examples include Heroku, Amazon Web Services, Google Cloud Platform, and others. However, choosing a separate hosting service for the backend and frontend can offer flexibility and provide you with options for your specific tech stack.

For this tutorial, consider the following tech stack: Python to handle backend logic, Flask to serve JSON responses to be used by the frontend as well as to interact with MySQL, React for creating the frontend, and MySQL to store data.

Hosting the React frontend:

• Run npm run build or yarn build to compile your React app for production
• You can use services like Netlify or Vercel (and many others) to deploy the frontend, but for the purposes of this tutorial, we will use Vercel

1. Login to Vercel with your GitHub account.

1. Click Import Project on the Vercel dashboard and authorize Vercel to access your GitHub repositories. Choose the repository that you pushed your project to.

1. Vercel will automatically detect the build settings — all you have to do is click Deploy. Vercel will also automatically deploy your changes pushed to your GitHub repository. Note that Vercel provides a URL to access your website, but you can configure it with a custom domain if you have one.

Hosting the Python and Flask backend and MySQL server:

For hosting the backend, we will use Railway. Note that Railway provides a $5 credit to use their services but you may need to sign up for a usage-based subscription to host your Flask backend and MySQL server.

Python and Flask backend:

• Login with GitHub.
• In your dashboard, create a new project and choose the option to ‘Deploy from GitHub repo.’ Connect your GitHub repo that has your project.
• Specify the root directory to be the directory that has your Flask app (usually a backend folder).
• Specify the language to build the service as Python.

MySQL server:

• Go to the dashboard and create a new project. Choose the option to Provision MySQL.
• This automatically sets up a MySQL database for you.
• Railway will provide you with all the necessary credentials to use your server (e.g. Host, port, root username and password, etc). You can then configure your backend project settings to use the necessary environment variables that the Flask app will use to connect to the database (as it is generally not good practice to hardcode them in your backend).

Troubleshooting on Vercel and Railway A convenient benefit of using services like Vercel and Railway for deployment is that you can review the deployment logs in their respective dashboards to view error messages. In Railway, you can view both build logs and deployment logs for your backend to trace where your issue may be.