Personal Blog and Portfolio template build using NextJS & TailwindCSS. 🚀
(https://chano.vercel.app/)
Start a Discussion
·
Report Bug
·
Request Feature
- Great page load speed
- Use ContentLayer to compile mdx
- Responsive for all devices
- Fast configuration, only edit the
blog.config.js
file - Math syntax support using rehypeKatex
- Code support using rehypePrism
- Dark/Light mode
- RSS feed
- Tag support
This is an example of how you may give instructions on setting up your project locally. To get a local copy up and running follow these simple example steps.
-
Clone the repo
git clone https://github.com/marpeand/chano.git
-
Install packages
yarn
-
Personalize the
blog.config.js
file with your own informationconst CONFIG = { // Site config title: 'My Website', siteDescription: 'This is my personal website', url: 'https://mywebsite.com', ... ... }
-
Write your own blog posts using Markdown in
content/posts
folder. -
Modify the
content/about.mdx
andcontent/projects.mdx
.
Every post is crafted using ContentLayer. To ensure compilation, it must adhere to specific required and optional fields, as exemplified below:
title (required)
summary (optional but recommended)
date (required)
draft (required)
tags (optional)
lastUpdated (optional)
An example:
---
title: "Fourier Analysis and Its Applications"
summary: A comprehensive overview of Fourier analysis, its significance, and applications in various fields.
date: 2023-08-28
draft: false
tags:
- Mathematics
- Signal Processing
lastUpdate: 2023-08-21
---
List your personal side projects in the content/projects.mdx
file, here it's an example of these.
projects:
Name of project group: (required)
- name (Project name)
href (Link to demo)
description (Description of the project)
imgSrc (The logo or any representative image, save it in /public/static folder)
---
projects:
List of Project 1:
- name: 'Project 1'
href: 'https://example.com'
description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
imgSrc: '/static/logo-project.png'
List of Project 2:
- name: 'Project 2'
href: 'https://example.com'
description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
imgSrc: '/static/logo-project.png'
List of Project 3:
- name: 'Project 3'
href: 'https://example.com'
description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
imgSrc: '/static/logo-project.png'
- name: 'Project 4'
href: 'https://example.com'
description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
imgSrc: '/static/logo-project.png'
---
When adding images to your blog post, it's recommended to store them in the public/static
directory. This ensures accessibility and proper linking. Follow these steps:
To reference an image in your project, use the path starting from the root of the public
directory.
Example: If your image is in public/static/my-blog-post/myimage.jpg
For a dynamic navbar that supports both dark and light themes, it's common to have two versions of the logo: one for the dark theme (logo.dark.svg
) and one for the light theme (logo.light.svg
).
For more context check Logo.tsx
Any contributions you make are greatly appreciated.
If you have a suggestion that would make this project better, please fork the repo and create a pull request.
Also you can open an issue with the label "enhancement" to propose a new feature.
By contributing to the project, you agree to license your contributions under the same license as the project itself. See the LICENSE file for more information.