My personal website

Hello world! I'm Ronilson Alves, a software developer from Brazil. This is the source code of my personal website/portfolio, which is available at ronilsonalves.com – English home page or ronilson.dev.br – página inicial em Português.

Features
Development
- Main Used Libraries
Running Locally
Deploying
- Vercel
- Building a Docker Image !!coming soon!!
License

Features

Some of the features of this website are:

Development

This website was built using TypeScript, React, Next.js, Tailwind CSS, shadcn/ui and deployed to Vercel and as personal challenge to learn more about these technologies.

Main Used Libraries

Running Locally

Prerequisites

Node.js (v14.15.4 or higher)
npm (v1.22.10 or higher)
Sanity CLI (v3.26.1 or higher)
A Sanity account to manage the blog posts (you can create one for free)
An Algolia account to index the blog posts
A Resend account to receive the contact form submissions (required only if you want to receive the contact form submissions)
A Vercel account to deploy the website (required only if you want to deploy the website)

Installation

Clone this repository and install the dependencies:

git clone https://github.com/ronilsonalves/portfolio.git
cd portfolio
npm install

Create a .env.local file in the root directory of the project and add the environment variables to it. You can find the necessary variables in the .env.example file.

Running

First of all, you need to create a Sanity project. Create a new project using the Sanity CLI and select the Clean project with no predefined schemas template. Then update the Sanity environment variables at .env.local. You can find the necessary variables in the .env.example file.

# Assuming you are in the root directory of the project, create a temporary directory to run the Sanity CLI, since we need only the Sanity project id and dataset name generated by the cli.
# The cli will ask you to login to your Sanity account if you are not already logged in.
npm create sanity@latest
# Now you can delete the temporary directory.

After, you can run the npm dev script to start the development server as normally you would do with a Next.js project.

# Run Next.js and Embebbed Sanity Studio development server
npm run dev

Now you can access the Sanity Studio at http://localhost:3000/studio (you can customize the path) and the website at http://localhost:3000.

At this point, you can start to create your own schemas and documents in the Sanity Studio. You can find more information about Sanity in the official documentation.

To index the blog posts in Algolia, you need to create an Algolia index and set the environment variables in the .env.local file. You can find more information about Algolia in the official documentation. This project already has a webhook to trigger the indexing when you publish a new document in the Sanity Studio and a script to index all the documents in the Sanity Studio. You can find more information about this in the official documentation and the docs of the official Sanity Algolia plugin.

To allow the comments in the blog posts, you need to configure the giscusapp. You can find more information about Giscus in the official documentation.

Deploying

Vercel

If you are familiar with Vercel, you can deploy the website using it. You can find more information about Vercel in the official documentation. Also, you can build the website using the npm build script and deploy it to any other hosting service that supports Next.js. Or you can build a docker image and deploy it to a container service.

To use Algolia indexing, you need to create a Sanity Webhook and set 'https://your-website.vercel.app/algolia/webhook' to trigger the indexing when you publish a new document. You can find more information about this in the official documentation and the docs of the official Sanity Algolia plugin.

A warning: Currently, every time that you publish a new document in the Sanity Studio, you need to redeploy the website to Next.js generate the new static pages. This is because the Sanity Studio is embebbed in the Next.js development server and the Next.js development server doesn't support incremental static regeneration. You can find more information about this in the official documentation. There's a plugin to redeploy the website automatically when you publish a new document, but I didn't test it, also I'm working on my own solution to this problem.

Building a Docker Image

You can build a docker image and deploy it to a container service. You can find more information about Docker in the official documentation. You can use the Dockerfile in the root directory of the project to build the image.

More information coming soon...

License

This project is open source and available under the MIT License.

ronilsonalves/portfolio