Setting up Content System

<h2>Setting up a content management system for my site&nbsp;</h2>
Problem Statement: I want to be able to setup Content on my site so I can upload content and change it without re-building the app.&nbsp;
Options
<ul>
<li>Hubspot</li>
<li>Wordpress-headless</li>
<li>Build my own&nbsp;</li>
</ul>
&nbsp;
Hubspot
<ul>
<li>Has a free option to get started&nbsp;</li>
<li>Has an integrated blog component with an API</li>
</ul>
&nbsp;
&nbsp;
&nbsp;

Image with a keyboard with floating text that says website

Creating my own website Part 1

Post Describing my experience of researching different front ends 

<h2>Picking a framework&nbsp;</h2>
Problem Statement: I want to be able to serve content that is static or dynamic. The site should be easy to maintain and add upon. I want to easily be able to do server side rendering or client side rendering. Pages should be viewable with no JavaScript on the client to enable seo and a wide range of devices.

Options I researched
<ul>
<li>React</li>
<li>Next.js</li>
<li>Vue</li>
<li>Angular&nbsp;</li>
</ul>
Pros and cons&nbsp;
<div data-hs-responsive-table="\&quot;true\&quot;">
<table style="border-collapse: collapse; border: 1px solid #000000;" border="1">
<tbody>
<tr>
<td style="border-width: 1px; border-color: #000000;">Framework</td>
<td style="border-width: 1px; border-color: #000000;">Pros&nbsp;</td>
<td style="border-width: 1px; border-color: #000000;">Cons</td>
</tr>
<tr>
<td style="border-width: 1px; border-color: #000000;">React </td>
<td style="border-width: 1px; border-color: #000000;">&nbsp;Large ecosystem &amp; community support &nbsp; &nbsp;Component-based architecture for reusability &nbsp;Fast virtual DOM rendering Strong third-party library integration </td>
<td style="border-width: 1px; border-color: #000000;">Requires external libraries for routing &amp; state management &nbsp;Frequent updates with breaking changes &nbsp;JSX syntax can be unintuitive for some </td>
</tr>
<tr>
<td style="border-width: 1px; border-color: #000000;">Angular&nbsp;</td>
<td style="border-width: 1px; border-color: #000000;">Full-featured framework with built-in tools Two-way data binding simplifies state management Strong TypeScript support &nbsp; Enterprise-level scalability </td>
<td style="border-width: 1px; border-color: #000000;">Steep learning curve, especially for new developers Verbose and complex syntax Larger bundle sizes compared to other frameworks </td>
</tr>
<tr>
<td style="border-width: 1px; border-color: #000000;">Next.js</td>
<td style="border-width: 1px; border-color: #000000;">&nbsp;Server-side rendering &amp; static generation for performance Built-in API routes &amp; excellent SEO optimization Supports React out of the box Simplifies deployment with Vercel integration </td>
<td style="border-width: 1px; border-color: #000000;">&nbsp;Dependent on React, limiting flexibility &nbsp;Can be overkill for simple projects Requires familiarity with backend concepts </td>
</tr>
<tr>
<td style="border-width: 1px; border-color: #000000;">Vue</td>
<td style="border-width: 1px; border-color: #000000;">Simple and intuitive API Reactive data binding Lightweight compared to Angular &nbsp;Great documentation &amp; ease of adoption </td>
<td style="border-width: 1px; border-color: #000000;">Smaller ecosystem compared to React &nbsp;Fewer enterprise-level integrations Can have inconsistencies between versions </td>
</tr>
</tbody>
</table>
</div>

Next.js ended up being my choice . Here's why:
<ul>
<li>Static &amp; Dynamic Content: Next.js supports both static generation (SSG) and server-side rendering (SSR) out of the box, letting you balance performance and flexibility.</li>
<li>Ease of Maintenance &amp; Expansion: With a file-based routing system and built-in API routes, Next.js simplifies project organization and makes scaling straightforward.</li>
<li>Server-side &amp; Client-side Rendering: You can choose SSG for fast-loading static pages, SSR for dynamic content, and even client-side rendering when necessary.</li>
<li>No JavaScript Required for Viewing: Since Next.js pre-renders pages as HTML when using SSG or SSR, content is accessible even without JavaScript, improving SEO and accessibility.</li>
</ul>
React alone wouldn&rsquo;t offer built-in SSR/SSG support, and Angular is more suited for large-scale enterprise applications but may introduce more complexity. Vue is lightweight, but Next.js gives me stronger built-in SEO capabilities and better scaling potential.
&nbsp;

My Blog

Setting up Content System

Creating my own website Part 1

Back to home