A Guide to Contributing to Our Blog
May 31, 2024

A Guide to Contributing to Our Blog

Want to share your insights and knowledge with our community? Learn how to contribute to our blog with this step-by-step guide!


A Guide to Contributing to Our Blog

Welcome, Aspiring Blog Contributors! 🙌

Are you eager to share your expertise and insights with our vibrant community? Contributing to our blog is a fantastic way to do just that! In this beginner-friendly guide, we’ll walk you through the process of creating your first blog post and making your mark on our platform. Let’s dive in! 🌟

Before you Begin

Before you begin, you’ll need to fork and clone the website’s repo located at: https://github.com/LibreChat-AI/librechat.ai

✏️
Detailed instructions

Please carefully follow the instructions below to ensure a smooth start:

  1. Fork the Repository:

    • Navigate to the LibreChat-AI GitHub repository.
    • Click on the “Fork” button in the top-right corner of the page to create your own copy of the repository under your GitHub account.
  2. Clone the Repository:

    • Once you have forked the repository, clone it to your local machine. Open your terminal and run the following command, replacing <your-username> with your GitHub username:
      git clone https://github.com/<your-username>/librechat.ai.git
    • This will create a local copy of the repository on your computer. Navigate into the project directory:
      cd librechat.ai
  3. Set Upstream Remote:

    • To keep your fork up-to-date with the original repository, you’ll need to set the original repository as the upstream remote. Run the following commands:
      git remote add upstream https://github.com/LibreChat-AI/librechat.ai.git
      git fetch upstream
  4. Create a New Branch:

    • It’s best practice to create a new branch for your blog post to keep your work organized and separate from the main branch. You can create and switch to a new branch with the following commands:
      git checkout -b your-branch-name
    • Replace your-branch-name with a descriptive name for your branch, such as add-new-post.
  5. Install Dependencies:

    • Install dependencies by running:
      pnpm install
    • Ensure that you have Node.js and pnpm (a fast, disk space efficient package manager) installed on your machine. You can install pnpm globally using npm if you haven’t already:
      npm install -g pnpm
🔥
Resources

For more general information about our documentation structure and supported syntax, please consult our Contributing to the Documentation guide.

Step 1: Set Up Your Author Profile 👤

Before you start crafting your blog post, you’ll need to create an author profile. This helps our readers get to know the brilliant mind behind the content. Here’s how:

  1. Create a new file in the pages/authors directory, following the format authorid.mdx.
  2. Add your profile picture to the public/images/people folder.
  3. Fill in the template with your details, including your name, bio, and social media links.
🪶
Prefer to Stay Anonymous?

No worries! If you’d rather not create a personal profile, you can use the “anon” profile by adding authorid: anon to your blog post metadata.

authorid.mdx
---
title: Your Name Profile
authorid: your-authorid
subtitle: Job Title or Short Description
name: Your Name
bio: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla litora ridiculus magna et etiam mi. Dolor etiam id elit morbi ipsum mauris. Non dapibus urna platea elementum fusce vulputate.
ogImage: '/images/people/your-image.png'
socials:
  GitHub: https://github.librechat.ai
  LinkedIn: https://linkedin.librechat.ai/
  X: https://x.com/LibreChatAI
  Discord: https://discord.librechat.ai
---
 
import AuthorProfile from '@/components/Author/AuthorProfile'
 
<AuthorProfile authorId="your-authorid" />

Step 2: Craft Your Blog Post ✍️

Now, it’s time to let your creativity flow! We use MDX for our blog posts, which allows you to seamlessly blend markdown and JSX. This means you can create interactive and engaging content by importing components like charts and alerts.

To create your blog post:

  1. Place your post in the pages/blog directory, using the naming scheme yyyy-mm-dd_short_title.mdx.
  2. Add a thumbnail image to the public/images/blog folder, using the same name as your blog post file.
  3. Include the necessary metadata and header in your document, as shown in the example.
  4. Let your thoughts and ideas pour onto the page! 🎉
metadata and header
---
 
title: Your Awesome Title
date: 2024/01/01
description: "Short description of the blog post"
tags: 
  - tag1 
  - tag2
authorid: your-authorid
ogImage: /images/blog/2024-01-01_your_awesome_title.png
 
---
 
import { BlogHeader } from '@/components/blog/BlogHeader'
 
<BlogHeader />
 
# Title 
Lorem ipsum...
🪶
Need Inspiration?

Check out our existing blog posts in pages/blog for examples of how to format your post.

Step 3: Test and Submit Your Post 🚀

Before submitting your blog post, it’s crucial to ensure everything looks perfect. Take a moment to review your author profile, the blog landing page, and your post itself.

To test your changes:

  1. Prepare the environment by running pnpm install.
  2. Start the development server with pnpm dev.
  3. Build the project using pnpm build and pnpm start.
✏️
Testing

Ensure that all links, images, and embedded components in your blog post are working correctly before submitting.

Once you’re confident everything is in order, submit a pull request, and our team will review your contribution. We can’t wait to see what you’ve created! 😊

Ready to Make Your Mark? 🎨

Contributing to our blog is an exciting opportunity to showcase your knowledge, engage with our community, and make a lasting impact. By following this guide, you’ll be well on your way to becoming a valued contributor.

So, what are you waiting for? Grab your keyboard, let your ideas flow, and join us in creating content that informs, inspires, and connects. We’re thrilled to have you on board! 🚀✨