Vortex is an open-source library that allows you to build themeable, modular and responsive blogs with just a few lines of code! Let's build a cool blog with Vortex! ### Step 1: Install & Import Vortex Inside your React project directory, install Vortex by running either of the following: ```bash npm i @hydralite/vortex # or yarn add @hydralite/vortex # or pnpm i @hydralite/vortex ``` Now that we've installed Vortex, let's import it. We can do so by importing the `Blog` component directly from the Vortex library and it's stylesheet. ```jsx import "@hydralite/vortex/dist/style.css"; import Blog from "@hydralite/vortex"; ``` ### Step 2: Initializing Our Blog Component ```jsx import "@hydralite/vortex/dist/style.css"; import Blog from "@hydralite/vortex"; function App() { return (

); } export default App; ``` From now onwards, we'll be focusing primarily on the `Blog` component for readability purposes. ### Step 3: Choose a layout The first step to building your blog is to choose a layout. There are 3 in-built layouts bundled-in with Vortex. To understand more about each layout, check out the [layout guide](/docs/layout/configuration). For now, we'll be choosing the [default](/docs/layout/default) layout. ```jsx ``` ### Step 4: Add some content It's time to add some content to our blog! Vortex supports markdown content, so let's give it some to display! ```jsx const content = ` Everything's supported - a [link](https://example.com), some \`inline\` content, **bold** text, underlined text, and even a codeblock with syntax highlighting: You can specify the language of the codeblock after the backticks (which need to be escaped). \`\`\`js console.log("Here's some JavaScript code!"); console.log("it works inside the codeblock!"); \`\`\` ### Images ![image](https://images.ctfassets.net/hrltx12pl8hq/7JnR6tVVwDyUM8Cbci3GtJ/bf74366cff2ba271471725d0b0ef418c/shutterstock_376532611-og.jpg) ### Tweet Embeds Below is a tweet embed: [tweet](https://twitter.com/elonmusk/status/1470157804304572420?s=20) ### GitHub Gist Embeds Here's a GitHub gist: [gist](https://gist.github.com/getify/2b53198906d320abe650) ### CodePen Embeds [codepen embed](https://codepen.io/alvaromontoro/pen/vYexLGV) `; ``` Now that we've written up some content - let's pass it into the blog! ```jsx ``` ### Step 5: Add headers It's time to spice up our blog with a banner, a title, a subtitle, and maybe even a category! ```jsx ``` ### Step 6: Insert metadata Let's insert some metadata into our article, like the `author`, and the `date` when it was published! ```jsx ``` ### Step 7: Add reactions For more details on this step, check out our [reactions guide](/customization/reactions). ```jsx {}, reactions: [ { name: 'Heart', emote: '❤', upvotes: 2 }, { name: 'Thumbs Up', emote: '👍', upvotes: 10 } ] }} /> ``` ### Step 8: Make it your own To finish up, let's customize your blog! Follow the [customization and themes documentation](/customization/themes) for more information. ## We need your help What do you think about Vortex? Do let me know, I'm curious and would love your feedback! If you'd like to support us, an upvote at our [Product Hunt](https://www.producthunt.com/posts/vortex-3) page and a star on our [GitHub repository](https://github.com/hydralite/vortex) would be incredible.

xtremedevx

Vortex - Blogs built faster than Lewis Hamilton Drives

Join Our Newsletter. No Spam, Only the good stuff.