Gatsby Hello Friend

Hello Friend is a Gatsby starter template for creating minimal blogs and personal websites, featuring a built-in dark/light mode toggle and PrismJS-powered code highlighting.

What is Hello Friend?

Hello Friend is a minimalist starter for Gatsby that generates static blogs and personal sites from markdown content. It was created by Radosław Kozieł (@panr) and released under the MIT License. The starter takes markdown files for posts (requiring title, date, and path fields) and pages, then builds a fast, static HTML site with Gatsby. It includes a responsive layout, multiple theming options, and syntax highlighting.

Key Features

• Dark/light mode — dark theme is the default, but you can switch to light theme by changing the defaultTheme option in gatsby-config.js.
• Inter UI font — uses the Inter UI typeface by Rasmus Andersson for improved readability across devices.
• PrismJS code highlighting — supports over 60 languages including bash, javascript, python, typescript, JSX, go, rust, and yaml, activated by wrapping code in fenced blocks with the language specified.
• Responsive embedded videos — via gatsby-remark-embed-video, YouTube and Vimeo embeds in markdown become responsive players.
• Responsive design — the entire site adapts to mobile and desktop viewport widths.
• Markdown posts and pages — content is authored in markdown; posts need title, date, and path frontmatter, while pages can also be written as React components wrapped in the Layout component.
• Configurable menu — main menu items, pagination (postsPerPage), and a submenu trigger (menuMoreText) are all set in gatsby-config.js.
• Custom logo options — use a logo image path or a text logo (logoText) in the site header.

Who is it for?

• Bloggers who want a fast, clean, markdown-based blog without building a site from scratch. They can start writing immediately after installing dependencies.
• Developers who prefer a minimal Gatsby starter to extend. They can add custom React pages, modify the layout, and adjust all site settings in a single gatsby-config.js file.
• Personal site owners who want a no-frills online presence with dark/light mode and code-friendly typography.

What can you do with Hello Friend?

• Launch a personal blog: Write posts as markdown files in the posts directory with title, date, and path, and the starter generates a paginated blog.
• Customize site branding: Replace the default "Hello Friend" text or add a logo image through the logo and logoText options in gatsby-config.js.
• Embed media in posts: Include YouTube or Vimeo videos in markdown and they will render as responsive embeds thanks to gatsby-remark-embed-video.
• Create static pages: Write additional pages in markdown or React and add them to the main menu for built-in navigation.

How does Hello Friend work?

Clone the repository and run yarn to install dependencies. Use yarn dev (which runs gatsby clean && gatsby develop) to start the development server, or yarn build to produce a production build. Content lives in posts and pages directories, and site-wide settings like title, description, default theme, and menu items are configured in gatsby-config.js.

FAQ

Is Hello Friend free to use?

Yes, the starter is open source and released under the MIT License. You can use it for personal or commercial projects without restrictions.

How do I enable light mode?

By default the theme is dark. Set defaultTheme: "light" in the gatsby-config.js file to make light mode the default. Users can also manually switch modes if your implementation exposes the toggle.

How do I add a new post?

Create a markdown file in the posts directory with required frontmatter: title, date, and path. The file will be turned into a blog post automatically.

Can I use a custom logo?

Yes, configure the logo object in gatsby-config.js with a src (default directory is /static/) and an alt text. Alternatively, set logoText to replace the default "Hello Friend" text logo.

What languages does PrismJS support?

The theme supports a wide range of languages including bash/shell, CSS, JavaScript, TypeScript, Python, Go, Rust, JSX, TSX, GraphQL, Markdown, YAML, JSON and more. Wrap code with the language name after the triple backticks.