Using Markdown in StartupBolt

Overview

The StartupBolt blog uses Markdown language to write blog posts. Markdown is a lightweight and user-friendly markup language that's easy to learn and widely adopted. Its simplicity allows you to focus on creating content rather than formatting.

Writing a Blog Post

To write a blog post, you can use any markdown editor, but we recommend using Hackmd (opens in a new tab). Hackmd provides an intuitive interface to write and preview your blog posts in real time.

Steps to Create a Blog Post

1. Write Your Content: Use Hackmd to draft your blog post.
2. Preview and Adjust: Review your content for accuracy and presentation.
3. Copy and Paste: Once finalized, copy the markdown content.
4. Insert into Database: Paste the markdown content into the articles table in the content column in your StartupBolt database.

Custom Components in StartupBolt

StartupBolt enhances the blogging experience with custom components that allow you to include rich media and tailor the presentation of your content. Below are the custom components available:

Video Component

The video component lets you embed videos from various platforms. You can embed any video from a variety of URLs, including file paths, YouTube, Facebook, Twitch, SoundCloud, Streamable, Vimeo, Wistia, Mixcloud, DailyMotion and Kaltura

Usage:

<Video url="https://www.youtube.com/watch?v=PP2Uvesx4ls" className="any-tailwind-classes" />

Props:

• url: The video URL.
• className: Optional Tailwind CSS classes for customization.

Custom Image Component

Use the custom image component to include images in your blog posts. It supports all the props of the Image component from Next.js and can be styled with Tailwind CSS classes.

Usage:

<CustomImage src="/images/blog/sad_developer.jpg" alt="Sad Developer" className="w-full sm:w-1/2 mx-auto" />

Props: It takes all the same props as the Image component from Next.js.

• src: Path to the image.
• alt: Alternate text for the image.
• className: Optional Tailwind CSS classes for styling.

ImageHalf Component

The ImageHalf component centers an image and adjusts its width to 50% of the container.

Usage:

<ImageHalf src="/images/blog/sad_developer.jpg" alt="Sad Developer" />

Props: It takes all the same props as the Image component from Next.js.

• src: Path to the image.
• alt: Alternate text for the image.

Styling Your Blog Posts

You can use Markdown's default syntax along with Tailwind CSS classes to create visually appealing blog posts. For example, use headings, lists, and blockquotes for structuring content, and combine them with custom components for added functionality.

Final Remarks

With StartupBolt, creating and managing a blog is straightforward and efficient. By leveraging Markdown and custom components, you can deliver high-quality content tailored to your audience. For any issues or further customization, feel free to reach out to us at startubolt@gmail.com.

Happy blogging!