tiso.dev

This is the source code of my personal website, tiso.dev.

Requirements

Running

Clone this project using Git. In a terminal, navigate to the cloned project's root folder, and run the following command:

yarn && yarn dev

Once ready, open localhost:3000 in you browser.

Commands

yarn build: Creates a production build from this project
yarn check-repo: Runs type, spell, format and linter checking
yarn dev: Starts the project with hot reload at http://localhost:3000
yarn eslint: Runs the code linter
yarn generate-theme-typings: Generates TypeScript typings for the project's Chakra theme
yarn prettier: Runs the code formatter
yarn spellcheck: Checks for spelling typos in code
yarn typecheck: Check validity of all types in the project

Scaffolding your own blog

To use this repository as basis to your own personal blog, you need to do the following:

Fork this repository and git clone your fork
Update the LICENSE file to include your own name, without altering the rest of the license (instructions)
Update the following fields on package.json with your information: name, description and author
Update all fields on data/index.ts with your own info
Update the list of projects on data/projects.ts with your own projects
Update the introductory text in the pages/index.tsx page
Remove/replace this README.md file
Delete all files inside data/blog folder, and start writing your own posts!
(Optional) Update the overall styling/components of the blog so yours isn't an exact copy
(Optional) Deploy it using Vercel and a custom domain name

Writing posts

All posts in this blog are written as MDX files inside the data/blog folder. They all follow this format:

---
title: 'The post title'
publishedAt: 'YYYY-MM-DD'
---

Article content starts here.

The file name is important because it's used to create the post's unique URL. So a file data/blog/my-post.mdx will be available at http://localhost:3000/blog/my-post

Customizing post styling

You can pass down custom React components to render for each type of markdown element, by specifying them on providers/MarkdownProvider.tsx. More info at @mdx-js/react docs.

This project uses rehype-prism-plus to add syntax highlight to <code> blocks inside posts. You can change the highlight styling by replacing the prism theme CSS Stylesheet imported in pages/_document.tsx, adding more global CSS imports or updating the blog layout styling at layouts/BlogLayout.tsx.

tisoap/tiso.dev