chore: add hosting in app blog post (#5787)

* add blog post

* feat: update image

---------

Co-authored-by: Calum H. <calum@modrinth.com>
Co-authored-by: Calum H. (IMB11) <contact@cal.engineer>

apps/frontend/src/public/news/feed/articles.json

@@ -1,5 +1,12 @@
 {
 	"articles": [
+		{
+			"title": "Modrinth Hosting in the App",
+			"summary": "Buy, setup, and manage your server all in our app.",
+			"thumbnail": "https://modrinth.com/news/article/modrinth-hosting-in-app/thumbnail.webp",
+			"date": "2026-04-12T21:30:00.000Z",
+			"link": "https://modrinth.com/news/article/modrinth-hosting-in-app"
+		},
 		{
 			"title": "Content Management Overhaul",
 			"summary": "Overhauled content management for both Modrinth Hosting servers and Modrinth App instances.",

packages/blog/articles/modrinth-hosting-in-app.md

@@ -0,0 +1,70 @@
+---
+title: Modrinth Hosting in the App
+summary: Buy, setup, and manage your server all in our app.
+date: 2026-04-12T13:30:00-08:00
+authors: ['AJfd8YH6', 'bOHH0P9Z', '6EjnV9Uf', 'LnK8MbX7']
+---
+
+This update brings [Modrinth Hosting](/hosting) into [Modrinth App](/app) and is a big step towards our vision for both products. You can now purchase a server, set it up, play without bouncing between the website and the app!
+
+This release also includes a redesigned server console which has been brought over to the logs page in instances.
+
+### Tl;dr
+
+- Modrinth Hosting in the app
+- New Modrinth Hosting page and server card states
+- New server purchase flow
+- New server resubscribe flow
+- Overhauled server settings
+- New server console and instance logs page
+
+## Modrinth Hosting Page
+
+The Modrinth Hosting page has gotten a fresh coat of paint, with new server card states like server provisioning and upcoming cancellation.
+
+![A screenshot of the Modrinth Hosting tab in the app, showing the user's servers](./server-list.webp)
+
+## Server Purchase Flow
+
+Along with managing your server in the app, we also wanted purchasing to happen here. You can select a plan, enter your payment details, and purchase a server without going to the website.
+
+This includes a new plan selection screen at the start with sign-in checks, which will also be used when upgrading your server.
+
+<div class="video-wrapper mb-8">
+	<video autoplay loop muted playsinline>
+		<source src="./purchase-demo.mp4" type="video/mp4" />
+	</video>
+</div>
+
+## Server Console + Instance Logs
+
+The server console also got full overhaul because it honestly sucked. We’ve reimplemented it and brought the same experience over to the logs page in instances. Some of these features existed in one place or the other, but now they’re consistent across both.
+
+- Filtering
+- Text wrapping
+- Per-character text copying
+- Better warning and error highlighting
+- Crash detection
+- Controls in the expanded view
+
+![A screenshot of an instance's logs page, showing a few detected errors from the selected log file](./instance-logs.webp)
+
+## Server Settings
+
+Lastly, we overhauled the server settings pages. In the app we have to be careful with navigation depth, so settings now live in a modal similar to instance settings. This makes it easier to edit things in context, like settings for a linked modpack.
+
+<div class="video-wrapper mb-8">
+	<video autoplay loop muted playsinline>
+		<source src="./settings-demo.mp4" type="video/mp4" />
+	</video>
+</div>
+
+Along with this, most pages got a visual refresh and some settings have been reorganized. We wanted to simplify things for the average user, so advanced options now live on their own page.
+
+The properties page also got a big overhaul. We’ve split out many of the more complex `server.properties` options and kept this page focused on what most users actually use. You can still edit everything directly in the file!
+
+![A screenshot of the new server settings pop-up](./server-settings.webp)
+
+—
+
+That’s everything from us! Have a good weekend!

packages/blog/compiled/index.ts

@@ -19,6 +19,7 @@ import { article as modpack_changes } from "./modpack_changes";
 import { article as modpacks_alpha } from "./modpacks_alpha";
 import { article as modrinth_app_beta } from "./modrinth_app_beta";
 import { article as modrinth_beta } from "./modrinth_beta";
+import { article as modrinth_hosting_in_app } from "./modrinth_hosting_in_app";
 import { article as modrinth_servers_asia } from "./modrinth_servers_asia";
 import { article as modrinth_servers_beta } from "./modrinth_servers_beta";
 import { article as new_environments } from "./new_environments";
@@ -57,6 +58,7 @@ export const articles = [
   modpacks_alpha,
   modrinth_app_beta,
   modrinth_beta,
+  modrinth_hosting_in_app,
   modrinth_servers_asia,
   modrinth_servers_beta,
   new_environments,

packages/blog/compiled/modrinth_hosting_in_app.content.ts

@@ -0,0 +1,2 @@
+// AUTO-GENERATED FILE - DO NOT EDIT
+export const html = `<p>This update brings <a href="/hosting" rel="noopener nofollow ugc">Modrinth Hosting</a> into <a href="/app" rel="noopener nofollow ugc">Modrinth App</a> and is a big step towards our vision for both products. You can now purchase a server, set it up, play without bouncing between the website and the app!</p><p>This release also includes a redesigned server console which has been brought over to the logs page in instances.</p><h3>Tl;dr</h3><ul><li>Modrinth Hosting in the app</li><li>New Modrinth Hosting page and server card states</li><li>New server purchase flow</li><li>New server resubscribe flow</li><li>Overhauled server settings</li><li>New server console and instance logs page</li></ul><h2>Modrinth Hosting Page</h2><p>The Modrinth Hosting page has gotten a fresh coat of paint, with new server card states like server provisioning and upcoming cancellation.</p><p><img src="/news/article/modrinth-hosting-in-app/server-list.webp" alt="A screenshot of the Modrinth Hosting tab in the app, showing the user's servers"></p><h2>Server Purchase Flow</h2><p>Along with managing your server in the app, we also wanted purchasing to happen here. You can select a plan, enter your payment details, and purchase a server without going to the website.</p><p>This includes a new plan selection screen at the start with sign-in checks, which will also be used when upgrading your server.</p><div class="video-wrapper mb-8"><video autoplay loop muted playsinline><source src="./purchase-demo.mp4" type="video/mp4"></video></div><h2>Server Console + Instance Logs</h2><p>The server console also got full overhaul because it honestly sucked. We’ve reimplemented it and brought the same experience over to the logs page in instances. Some of these features existed in one place or the other, but now they’re consistent across both.</p><ul><li>Filtering</li><li>Text wrapping</li><li>Per-character text copying</li><li>Better warning and error highlighting</li><li>Crash detection</li><li>Controls in the expanded view</li></ul><p><img src="/news/article/modrinth-hosting-in-app/instance-logs.webp" alt="A screenshot of an instance's logs page, showing a few detected errors from the selected log file"></p><h2>Server Settings</h2><p>Lastly, we overhauled the server settings pages. In the app we have to be careful with navigation depth, so settings now live in a modal similar to instance settings. This makes it easier to edit things in context, like settings for a linked modpack.</p><div class="video-wrapper mb-8"><video autoplay loop muted playsinline><source src="./settings-demo.mp4" type="video/mp4"></video></div><p>Along with this, most pages got a visual refresh and some settings have been reorganized. We wanted to simplify things for the average user, so advanced options now live on their own page.</p><p>The properties page also got a big overhaul. We’ve split out many of the more complex <code>server.properties</code> options and kept this page focused on what most users actually use. You can still edit everything directly in the file!</p><p><img src="/news/article/modrinth-hosting-in-app/server-settings.webp" alt="A screenshot of the new server settings pop-up"></p><p>—</p><p>That’s everything from us! Have a good weekend!</p>`;

packages/blog/compiled/modrinth_hosting_in_app.ts

@@ -0,0 +1,12 @@
+// AUTO-GENERATED FILE - DO NOT EDIT
+export const article = {
+  html: () => import(`./modrinth_hosting_in_app.content`).then(m => m.html),
+  title: "Modrinth Hosting in the App",
+  summary: "Buy, setup, and manage your server all in our app.",
+  date: "2026-04-12T21:30:00.000Z",
+  slug: "modrinth-hosting-in-app",
+  authors: ["AJfd8YH6","bOHH0P9Z","6EjnV9Uf","LnK8MbX7"],
+  unlisted: false,
+  thumbnail: true,
+  
+};