{"id":50429,"date":"2023-02-23T12:47:25","date_gmt":"2023-02-23T12:47:25","guid":{"rendered":"https:\/\/kinsta.com\/se\/?p=50429&#038;preview=true&#038;preview_id=50429"},"modified":"2025-09-01T15:42:18","modified_gmt":"2025-09-01T15:42:18","slug":"docusaurus","status":"publish","type":"post","link":"https:\/\/kinsta.com\/se\/blog\/docusaurus\/","title":{"rendered":"Skapa och anpassa en Docusaurus-webbplats (med bloggfunktion)"},"content":{"rendered":"<p>F\u00f6r exempelvis l\u00e4ttviktiga webbplatser, applikationer och andra sm\u00e5 projekt s\u00e5 anv\u00e4nder allt fler utvecklare <a href=\"https:\/\/kinsta.com\/se\/blog\/wordpress-vs-statisk-html\/\">statiska webbplatsgeneratorer framf\u00f6r WordPress<\/a> eller <a href=\"https:\/\/kinsta.com\/se\/blog\/cms-programvarorna\/\">andra inneh\u00e5llshanteringssystem (CMS)<\/a>. Statiska webbplatser \u00e4r ett enkelt och effektivt s\u00e4tt att skapa webbplatser och applikationer som \u00e4r snabba, s\u00e4kra och l\u00e4tta att underh\u00e5lla.<\/p>\n<p>Docusaurus \u00e4r en s\u00e5dan statisk webbplatsgenerator &#8211; och den \u00f6kar snabbt i popularitet i varje utvecklings-community.<br \/>\n<\/p>\n<p>I det h\u00e4r inl\u00e4gget s\u00e5 g\u00f6r vi en djupdykning i f\u00f6rdelarna med att anv\u00e4nda Docusaurus som statisk webbplatsgenerator. Vi g\u00e5r dessutom igenom varf\u00f6r det \u00e4r en v\u00e4xande favorit bland utvecklare.<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc><\/p>\n<h2>Vad \u00e4r Docusaurus?<\/h2>\n<p>Docusaurus \u00e4r en popul\u00e4r <a href=\"https:\/\/kinsta.com\/blog\/static-site-generator\/\">statisk webbplatsgenerator<\/a> som anv\u00e4nder <a href=\"https:\/\/kinsta.com\/blog\/what-is-react-js\/\">React<\/a>\u00a0som sitt UI-bibliotek f\u00f6r skapande av sidor. Det \u00e4r ett av de <a href=\"https:\/\/kinsta.com\/se\/blog\/javascript-biblioteken\/\">fr\u00e4msta JavaScript-biblioteken<\/a>. Precis som andra s\u00e5dana generatorer s\u00e5 \u00e4r den l\u00e4tt att installera och l\u00e4tt att \u00e4ndra. Den ger dig dessutom allt som du beh\u00f6ver f\u00f6r att komma ig\u00e5ng med din statiska webbplats.<\/p>\n<p>Det som skiljer Docusaurus fr\u00e5n andra \u00e4r dock att den hj\u00e4lper dig att skapa och hantera en webbplats d\u00e4r <em><a href=\"https:\/\/kinsta.com\/se\/topics\/innehallsstrategi\/\">inneh\u00e5llet spelar en nyckelroll<\/a><\/em>. Som ett resultat s\u00e5 kan du snabbt och enkelt bygga en fullst\u00e4ndig webbplats &#8211; komplett med en bloggfunktion &#8211; som lyfter fram ditt inneh\u00e5ll redan fr\u00e5n b\u00f6rjan.<\/p>\n<p>Eftersom inneh\u00e5llet \u00e4r i fokus med Docusaurus s\u00e5 \u00e4r det exempelvis perfekt f\u00f6r att skapa dokumentations-sidor som <a href=\"https:\/\/kinsta.com\/blog\/wordpress-wiki\/\">wikis<\/a>. Den anv\u00e4nder dessutom <a href=\"https:\/\/kinsta.com\/se\/blog\/markdown-redigerarna\/\">markdown<\/a>, vilket \u00e4r idealiskt b\u00e5de f\u00f6r samarbete och lagring i ett git-arkiv. Ut\u00f6ver detta s\u00e5 har den massor av fantastiska funktioner som i18n, s\u00f6kning och anpassade teman, som vi kommer att diskutera mer ing\u00e5ende senare.<\/p>\n<p>H\u00e4r \u00e4r bara n\u00e5gra av de utm\u00e4rkande funktionerna som g\u00f6r Docusaurus till ett bra alternativ:<\/p>\n<ul>\n<li>Byggd med hj\u00e4lp av React<\/li>\n<li>St\u00f6d f\u00f6r MDX v1<\/li>\n<li>St\u00f6d f\u00f6r inb\u00e4ddning av React-komponenter via Markdown<\/li>\n<li>Versionering av dokument<\/li>\n<li>Kompatibilitet med Git, Crowdin och andra \u00f6vers\u00e4ttningshanterare f\u00f6r \u00f6vers\u00e4ttning av dokument och massdistribuering eller individuell distribuering<\/li>\n<\/ul>\n<h3>Vem anv\u00e4nder Docusaurus?<\/h3>\n<p>Docusaurus skapades av Facebook. Det \u00e4r d\u00e4rf\u00f6r ingen \u00f6verraskning att den f\u00f6r n\u00e4rvarande anv\u00e4nds av m\u00e5nga stora varum\u00e4rken och f\u00f6retag p\u00e5 hela webben.<\/p>\n<p>H\u00e4r \u00e4r bara n\u00e5gra av de st\u00f6rsta varum\u00e4rkena som anv\u00e4nder Docusaurus idag (och fler kommer att tillkomma n\u00e4r Docusaurus popularitet forts\u00e4tter att \u00f6ka):<\/p>\n<ul>\n<li><a href=\"https:\/\/docsearch.algolia.com\/\">Algolia DocSearch<\/a><\/li>\n<li><a href=\"https:\/\/jestjs.io\/\">Jest<\/a><\/li>\n<li><a href=\"https:\/\/reactnative.dev\/\">React Native<\/a><\/li>\n<li><a href=\"https:\/\/supabase.com\/docs\">Supabase<\/a><\/li>\n<\/ul>\n<p>Och fler ansluter sig till dem varje dag.<\/p>\n<h2>Hur man installerar Docusaurus<\/h2>\n<p>Docusaurus \u00e4r mycket enkelt att installera och tar bara n\u00e5gra minuter. I den h\u00e4r handledningen s\u00e5 kommer vi att bygga en dokumentations-webbplats med en blogg. Vi kommer d\u00e4refter att anpassa hur webbplatsen ser ut.<\/p>\n<p>Och h\u00e4r kommer den coolaste delen: Det kommer att ta oss mindre \u00e4n en timme att starta upp allt.<\/p>\n<p>L\u00e5t oss k\u00f6ra ig\u00e5ng!<\/p>\n<h3>Krav<\/h3>\n<p>Docusarus kr\u00e4ver <a href=\"https:\/\/kinsta.com\/se\/blog\/vad-node-js\/\">Node.js<\/a> 16.14 eller senare. Det \u00e4r en SSG med platta filer. Som ett resultat s\u00e5 beh\u00f6ver du inte n\u00e5gon <a href=\"https:\/\/sevalla.com\/database-hosting\/\">extra databas<\/a>.<\/p>\n<p>Om du inte redan har Node.js 16.14+ tillg\u00e4ngligt s\u00e5 m\u00e5ste du b\u00f6rja med att <a href=\"https:\/\/kinsta.com\/se\/blog\/hur-du-installerar-node-js\/\">installera Node.js<\/a> eller uppgradera din nuvarande version. D\u00e4refter s\u00e5 kan du g\u00e5 vidare till Docusaurus installationsprocess nedan.<\/p>\n<p>Vi kommer dessutom att anv\u00e4nda Docusaurus exempelwebbplats fr\u00e5n det h\u00e4r <a href=\"https:\/\/github.com\/kinsta\/hello-world-docusaurus\">GitHub-arkivet<\/a>. Du kan anv\u00e4nda den eller en ren installation av Docusaurus f\u00f6r den h\u00e4r handledningen.<\/p>\n<h3>Installationsprocess<\/h3>\n<p>F\u00f6r att p\u00e5b\u00f6rja installationen av Docusaurus s\u00e5 m\u00e5ste du f\u00f6rst k\u00f6ra f\u00f6ljande kommando:<\/p>\n<pre><code class=\"bash\">npx create-docusaurus@latest  classic<\/code><\/pre>\n<p>Detta kommer sedan att skapa en mapp f\u00f6r ditt projekt och st\u00e4lla in det <a href=\"https:\/\/docusaurus.io\/docs\/api\/themes\/@docusaurus\/theme-classic\">klassiska temat<\/a> i den. Det klassiska temat inkluderar redan n\u00e5gra f\u00f6rkonfigurerade funktioner som en blogg, anpassade sidor och ett CSS-ramverk.<\/p>\n<p>Efter installationen s\u00e5 m\u00e5ste du sedan k\u00f6ra f\u00f6ljande kommando f\u00f6r att starta den lokala servern:<\/p>\n<pre><code class=\"bash\">npm start<\/code><\/pre>\n<p>Om du vill bygga en optimerad version som \u00e4r redo att distribueras s\u00e5 b\u00f6r du k\u00f6ra detta ist\u00e4llet:<\/p>\n<pre><code class=\"bash\">npm run build<\/code><\/pre>\n<h3>Struktur<\/h3>\n<p>N\u00e4r du har installerat din Docusaurus-instans s\u00e5 kan du d\u00e4refter \u00f6ppna din projekt-katalog och titta n\u00e4rmare p\u00e5 &#8221;skelettet&#8221; f\u00f6r din nya webbplats.<\/p>\n<p>S\u00e5 h\u00e4r ser filstrukturen ut:<\/p>\n<pre><code class=\"bash\">my-website\n\u251c\u2500\u2500 blog\n\u2502 \u251c\u2500\u2500 2019-05-28-hola.md\n\u2502 \u2514\u2500\u2500 2020-05-30-welcome.md\n\u251c\u2500\u2500 docs\n\u2502 \u251c\u2500\u2500 doc1.md\n\u2502 \u2514\u2500\u2500 mdx.md\n\u251c\u2500\u2500 src\n\u2502 \u251c\u2500\u2500 css\n\u2502 \u2502 \u2514\u2500\u2500 custom.css\n\u2502 \u2514\u2500\u2500 pages\n\u2502 \u251c\u2500\u2500 styles.module.css\n\u2502 \u2514\u2500\u2500 index.js\n\u251c\u2500\u2500 static\n\u2502 \u2514\u2500\u2500 img\n\u251c\u2500\u2500 docusaurus.config.js\n\u251c\u2500\u2500 package.json\n\u251c\u2500\u2500 README.md\n\u251c\u2500\u2500 sidebars.js\n\u2514\u2500\u2500 yarn.lock<\/code><\/pre>\n<p>Det finns n\u00e5gra detaljer att notera n\u00e4r det g\u00e4ller n\u00e5gra av dessa filer och mappar:<\/p>\n<ul>\n<li><strong><code>\/blog<\/code>:<\/strong> Den inneh\u00e5ller alla filer som \u00e4r relaterade till din blogg.<\/li>\n<li><strong><code>\/docs<\/code>:<\/strong> I denna mapp s\u00e5 finns alla filer som r\u00f6r dina dokument. Du kan anpassa deras ordning i filen <strong>sidebar.js<\/strong>.<\/li>\n<li><strong><code>\/src<\/code>:<\/strong> Inneh\u00e5ller alla filer som inte \u00e4r dokumentationsfiler, exempelvis sidor eller anpassade komponenter.<\/li>\n<li><strong><code>\/src\/pages<\/code>:<\/strong> Alla JSX\/TSX\/MDX-filer som kommer att omvandlas till sidor.<\/li>\n<li><strong><code>\/static<\/code>:<\/strong> Statiska filer som kommer att kopieras till den slutliga byggmappen.<\/li>\n<li><strong><code>docusaurus.config.js<\/code>:<\/strong> Konfigurationsfil f\u00f6r Docusaurus.<\/li>\n<li><strong><code>packaged.json<\/code>:<\/strong> Varje Docusaurus-webbplats \u00e4r en React-app, s\u00e5 h\u00e4r hittar du alla beroenden och skript som den anv\u00e4nder f\u00f6r React.<\/li>\n<li><strong><code>sidebar.js<\/code>:<\/strong> H\u00e4r kan du ange ordningen p\u00e5 dokumenten i sidof\u00e4ltet.<\/li>\n<\/ul>\n<h2>Anpassa din Docusaurus-installation<\/h2>\n<p>Som du kan se av den enkla filstrukturen s\u00e5 \u00e4r Docusaurus l\u00e4tt att anv\u00e4nda och navigera i. Det \u00e4r dessutom enkelt att anpassa din Docusaurus-webbplats. Du kan exempelvis \u00f6ppna och redigera dessa filer med din <a href=\"https:\/\/kinsta.com\/se\/blog\/basta-textredigerarna\/\">favorit-textredigerare<\/a>\u00a0eller IDE.<\/p>\n<p>L\u00e5t oss g\u00e5 igenom n\u00e5gra av de anpassningsalternativ som du f\u00e5r direkt ur l\u00e5dan.<\/p>\n<h3>Hemsida<\/h3>\n<p>Det f\u00f6rsta som du f\u00f6rmodligen kommer att vilja g\u00f6ra \u00e4r att anpassa standard-hemsidan s\u00e5 att den visar ditt eget projekt. Processen f\u00f6r detta \u00e4r som tur \u00e4r v\u00e4ldigt okomplicerad, du kan enkelt g\u00f6ra de \u00e4ndringar som du vill p\u00e5 Docusaurus hemsida.<\/p>\n<p>F\u00f6r att \u00e4ndra hemsidan s\u00e5 \u00f6ppnar du filen <strong>src\/pages\/index.js<\/strong> och g\u00f6r justeringarna direkt d\u00e4r. Det \u00e4r en typisk React-sida. Som ett resultat s\u00e5 kan du \u00e4ndra eller bygga om den genom att \u00e4ndra inneh\u00e5llet eller skapa egna <a href=\"https:\/\/kinsta.com\/se\/blog\/react-komponent-bibliotek\/\">React-komponenter<\/a>.<\/p>\n<h3>Konfigurationsfil<\/h3>\n<p>D\u00e4refter s\u00e5 ska vi dyka ner i den viktiga filen <strong>docusaurus.config.js<\/strong> och \u00e4ndra n\u00e5gra viktiga detaljer f\u00f6r v\u00e5r instans.<\/p>\n<h4>Namn och beskrivning<\/h4>\n<p>I konfigurationsfilen s\u00e5 hittar du f\u00f6ljande:<\/p>\n<pre><code class=\"language-markdown\">const config = {\ntitle: 'My Site',\ntagline: 'Dinosaurs are cool',\nurl: 'https:\/\/your-docusaurus-site.com',\nbaseUrl: '\/',<\/code><\/pre>\n<p>\u00c4ndra bara dessa detaljer f\u00f6r att passa din webbplats behov och spara sedan filen.<\/p>\n<h4>Navigeringsf\u00e4ltet<\/h4>\n<p>Om du vill redigera navigationsf\u00e4ltet s\u00e5 hittar du <code>navbar<\/code>.<\/p>\n<p>I v\u00e5rt exempel h\u00e4r s\u00e5 vill vi l\u00e4gga till en l\u00e4nk till Kinsta, byta namn p\u00e5 objektet &#8221;Tutorial&#8221; till &#8221;Starter documentation&#8221; och l\u00e4gga till Kinsta-logotypen.<\/p>\n<p>S\u00e5 h\u00e4r skulle vi g\u00f6ra:<\/p>\n<pre><code class=\"language-markdown\">navbar: {\n  title: 'Kinsta starters',\n  logo: {  \n    alt: 'Kinsta Logo',\n    src: 'img\/kinsta-logo-alpha-purple.png',\n  },\n  items: [\n    {\n      label: 'Kinsta starters',\n      to: '\/docs\/intro',\n    },\n    {to: '\/blog', label: 'Blog', position: 'left'},\n    {\n      href: 'https:\/\/github.com\/kinsta',\n      label: 'GitHub',\n      position: 'right',\n    },\n  ],\n},<\/code><\/pre>\n<h4>Sidfot<\/h4>\n<p>Anpassning av sidfoten i Docusaurus best\u00e5r av tv\u00e5 delar: sj\u00e4lva inneh\u00e5llet i sidfoten och l\u00e4nkarna i sidfoten.<\/p>\n<h5>Inneh\u00e5llet i sidfoten<\/h5>\n<p>Huvuddelen av ditt inneh\u00e5ll i sidfoten (exklusive l\u00e4nklistan) kan placeras i din <strong>themeConfig.footer-fil<\/strong>. Detta \u00e4r den idealiska platsen f\u00f6r att l\u00e4gga till en logotyp och ett upphovsr\u00e4ttsmeddelande.<\/p>\n<p>S\u00e5 h\u00e4r har vi \u00e4ndrat v\u00e5r konfiguration f\u00f6r sidfoten:<\/p>\n<pre><code class=\"language-markdown\">module.exports = {\n  themeConfig: {\n    footer: {\n      logo: {\n        alt: 'Kinsta Logo',\n        src: 'img\/kinsta-logo.png',\n        href: 'https:\/\/kinsta.com',\n        width: 160,\n        height: 51,\n      },\n      copyright: `Copyright \u00a9 ${new Date().getFullYear()} Kinsta. Built with Docusaurus.`,\n    },\n  },\n};<\/code><\/pre>\n<h5>L\u00e4nkar i sidfoten<\/h5>\n<p>Att \u00e4ndra l\u00e4nkarna i sidfoten \u00e4r ungef\u00e4r som att \u00e4ndra navigeringsf\u00e4ltet i toppen: Hitta avsnittet <code>footer<\/code> i <strong>docusaurus.config.js<\/strong> och redigera sedan detta tills det passar dina behov.<\/p>\n<p>S\u00e5 h\u00e4r har vi \u00e4ndrat avsnittet <code>footer<\/code>:<\/p>\n<pre><code class=\"language-markdown\">footer: {\n  style: 'dark',\n  links: [\n    {\n      title: 'Docs',\n      items: [\n        {\n          label: 'Kinsta starters',\n          to: '\/docs\/intro',\n        },\n      ],\n    },\n    {\n      title: 'Talk with us',\n      items: [\n        {\n          label: 'Discord',\n          href: 'https:\/\/discord.gg\/vjRPMhFaBA',\n        },\n        {\n          label: 'Support',\n          href: 'https:\/\/kinsta.com\/kinsta-support\/',\n        },\n        {\n          label: 'Twitter',\n          href: 'https:\/\/twitter.com\/kinsta',\n        },\n      ],\n    },\n    {\n      title: 'More',\n      items: [\n        {\n          label: 'Application Hosting',\n          href: 'https:\/\/sevalla.com\/application-hosting\/',\n        },\n        {\n          label: 'Database Hosting',\n          href: 'https:\/\/sevalla.com\/database-hosting\/',\n        },\n        {\n          label: 'WordPress Hosting',\n          href: 'https:\/\/kinsta.com\/wordpress-hosting\/',\n        },\n        {\n          label: 'DevKinsta',\n          href: 'https:\/\/kinsta.com\/devkinsta\/',\n        },\n      ],\n    },\n  ],\n};<\/code><\/pre>\n<h4>F\u00e4rger och CSS<\/h4>\n<p>Den klassiska f\u00f6rinst\u00e4llningen f\u00f6r Docusaurus anv\u00e4nder Infima CSS-ramverket. Med detta i \u00e5tanke s\u00e5 har skaparna av Docusaurus gjort ett <a href=\"https:\/\/docusaurus.io\/docs\/styling-layout#styling-your-site-with-infima\">mycket anv\u00e4ndbart webbverktyg<\/a> som hj\u00e4lper dig att \u00e4ndra f\u00e4rger och andra CSS-element och deklarationer.<\/p>\n<p>N\u00e4r du har angett dina preferenser p\u00e5 sidan s\u00e5 genererar verktyget en <strong>custom.css-fil<\/strong> &#8211; komplett med en h\u00e4rlig svit av kompletterande toner &#8211; p\u00e5 n\u00e5gra sekunder. Du kan sedan kopiera denna nya CSS-fil till projektets <strong>\/src\/css-katalog<\/strong> som referens.<\/p>\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/02\/docusaurus-css-tool.jpg\" alt=\"En del av Docusaurus officiella dokumentation, som visar deras anpassade CSS-verktyg med f\u00e4lt f\u00f6r att ange hex-kodjusteringar f\u00f6r varje enskilt element i Docusaurus design.\" width=\"1600\" height=\"871\"><figcaption class=\"wp-caption-text\">En del av Docusaurus officiella dokumentation, som visar deras anpassade CSS-verktyg med f\u00e4lt f\u00f6r att ange hex-kodjusteringar f\u00f6r varje enskilt element i Docusaurus design.<\/figcaption><\/figure>\n<h4>Dokumentation<\/h4>\n<p>All dokumentation om din nya webbplats lagras i mappen <strong>\/docs<\/strong>. Du kan naturligtvis \u00e4ndra mappnamnet i <strong>docusaurus.config.js<\/strong>.<\/p>\n<p>Det \u00e4r bara att skapa markdown-filerna i din <a href=\"https:\/\/kinsta.com\/se\/blog\/gratis-html-redigerare\/\">text- eller HTML-redigerare<\/a> och sl\u00e4ppa dem i den mappen. Varje fil ska se ut s\u00e5 h\u00e4r:<\/p>\n<pre><code class=\"language-markdown\">---\nid: the-id\ntitle: Title\n---\n# Rest of the document<\/code><\/pre>\n<p>Docusaurus skapar webbadresserna f\u00f6r artiklarna i den undermappen utifr\u00e5n ID: t: <code>yourdomain.com\/docs\/{id}<\/code><\/p>\n<p>Vi kan dessutom skapa undermappar om vi vill dela upp v\u00e5r dokumentation i olika logiska avsnitt. Det kr\u00e4vs dock lite extra arbete f\u00f6r att dessa undermappar ska fungera p\u00e5 det s\u00e4tt som vi f\u00f6rv\u00e4ntar oss.<\/p>\n<p>S\u00e4g att vi skapar en ny dokumentmapp som heter &#8221;Starters&#8221; Om vi sedan uppdaterar hemsidan och klickar p\u00e5 den nya l\u00e4nken &#8221;Starters&#8221; som automatiskt l\u00e4ggs till i v\u00e5r sidof\u00e4lt, f\u00e5r vi ett fel. Det finns ju inte n\u00e5gon indexsida i v\u00e5r nya mapp \u00e4nnu.<\/p>\n<p>Det enklaste s\u00e4ttet f\u00f6r att \u00e5tg\u00e4rda detta \u00e4r att skapa en <strong>_category_.json-fil<\/strong> som genererar index f\u00f6r alla sidor som lagras i den h\u00e4r mappen. Du beh\u00f6ver bara l\u00e4gga till f\u00f6ljande kod:<\/p>\n<pre><code class=\"language-markdown\">{\n  \"label\": \"Starters\",\n  \"position\": 2,\n  \"link\": {\n    \"type\": \"generated-index\",\n    \"description\": \"All Kinsta Starters\"\n  },\n};<\/code><\/pre>\n<p>Som du kan se s\u00e5 f\u00f6rnyas sidof\u00e4ltet f\u00f6r att matcha strukturen i dina filer. Detta beror p\u00e5 att filen <strong>sidebar.js<\/strong> inneh\u00e5ller den h\u00e4r <code>tutorialSidebar<\/code>: <code>[{type: 'autogenerated', dirName: '.'}],<\/code><\/p>\n<p>Om du f\u00f6redrar att ta hand om detta p\u00e5 egen hand s\u00e5 kan du bara \u00e4ndra detta till n\u00e5got liknande:<\/p>\n<pre><code class=\"language-markdown\">tutorialSidebar: [\n  'intro',\n  'hello',\n  {\n    type: 'category',\n    label: 'Tutorial',\n    items: ['tutorial-basics\/create-a-document'],\n  },\n],<\/code><\/pre>\n<h4>Blog<\/h4>\n<p>Docusaurus inkluderar en smart bloggmodul. Att ha en blogg vid sidan av din huvudwebbplats kan exempelvis vara mycket anv\u00e4ndbart f\u00f6r att informera din anv\u00e4ndarbas om f\u00f6r\u00e4ndringar som sker i ditt projekt. Du kan dessutom f\u00f6ra l\u00f6pande projektanteckningar som en form av \u00e4ndringslogg.<\/p>\n<p>Varje inl\u00e4gg best\u00e5r av en del av en frontmatterdel, som h\u00e4r:<\/p>\n<pre><code class=\"language-markdown\">---\nslug: docusaurus-starter\ntitle: Docusaurus Starter\nauthors: palmiak\ntags: [starters, docusaurus]\n---<\/code><\/pre>\n<p>&#8230;och naturligtvis sj\u00e4lva inneh\u00e5llet. Det finns \u00e4ven en mycket anv\u00e4ndbar <code>&lt;!--truncate--&gt;<\/code>-tagg, som hj\u00e4lper till att begr\u00e4nsa den sammanfattning av inl\u00e4gget som visas p\u00e5 alla inl\u00e4ggslistor.<\/p>\n<p>Det \u00e4r dessutom en bra id\u00e9 att skapa en <strong>authors.yml-fil<\/strong> f\u00f6r krediter. Filen ser ut s\u00e5 h\u00e4r:<\/p>\n<pre><code class=\"language-markdown\">palmiak:\nname: Maciek Palmowski\ntitle: DevRel\nurl: https:\/\/github.com\/palmiak\nimage_url: https:\/\/github.com\/palmiak.png<\/code><\/pre>\n<p>Tack vare den h\u00e4r filen s\u00e5 har du alla f\u00f6rfattaruppgifter p\u00e5 ett st\u00e4lle f\u00f6r en enkel h\u00e4nvisning.<\/p>\n<h2>S\u00e5 h\u00e4r distribuerar du din Docusaurus-webbplats p\u00e5 Kinsta<\/h2>\n<p>Ut\u00f6ver <a href=\"https:\/\/kinsta.com\/se\/wordpress-hosting\/\">WordPress-webbplatser<\/a>, frist\u00e5ende <a href=\"https:\/\/sevalla.com\/application-hosting\/\">applikationer<\/a> och <a href=\"https:\/\/sevalla.com\/database-hosting\/\">databaser<\/a> s\u00e5 kan <a href=\"https:\/\/docs.sevalla.com\/static-sites\/overview\">Kinsta hosta statiska webbplatser<\/a>.<\/p>\n<p>Som ett resultat s\u00e5 blir detta perfekt f\u00f6r dina Docusaurs-webbplatser &#8211; och f\u00f6r att hantera alla dina webbprojekt &#8211; direkt fr\u00e5n din <a href=\"https:\/\/kinsta.com\/se\/mykinsta\/\">MyKinsta-instrumentpanel<\/a>.<\/p>\n<p><kinsta-video src=\"https:\/\/kinsta.wistia.com\/medias\/f57n9mlqfa\"><\/kinsta-video><\/p>\n<p>N\u00e4r din applikation har distribuerats s\u00e5 kan du granska <a href=\"https:\/\/docs.sevalla.com\/applications\/analytics\">applikationens l\u00f6pande analyser<\/a>, b\u00e5de live och historiskt, med m\u00e4tningar som exempelvis:<\/p>\n<ul>\n<li>Anv\u00e4ndning av bandbredd<\/li>\n<li>Byggtid<\/li>\n<li>K\u00f6rtid<\/li>\n<li>CPU-anv\u00e4ndning<\/li>\n<li>Anv\u00e4ndning av minne<\/li>\n<\/ul>\n<p>Fr\u00e5n b\u00f6rjan till slut s\u00e5 tar distribuerings-processen via MyKinsta endast n\u00e5gra minuter.<\/p>\n<p>L\u00e5t oss komma ig\u00e5ng!<\/p>\n<h3>F\u00f6ruts\u00e4ttningar: Konfigurera ditt Docusaurus-projekt<\/h3>\n<p>Om du vill hosta ditt Docusaurus-projekt p\u00e5 <a href=\"https:\/\/sevalla.com\/application-hosting\/\">Kinsta&#8217;s plattform f\u00f6r applikationshosting<\/a> s\u00e5 m\u00e5ste du g\u00f6ra f\u00f6ljande:<\/p>\n<ol>\n<li>Inkludera ett namnf\u00e4lt i din <strong>package.json-fil<\/strong>. (Detta kan vara vad som helst och kommer inte att p\u00e5verka din distribuering.)<\/li>\n<li>Inkludera ett byggskript i din <strong>package.json-fil<\/strong>. (Ditt Docusaurus-projekt b\u00f6r redan inneh\u00e5lla detta.)<\/li>\n<li>Installera <a href=\"https:\/\/www.npmjs.com\/package\/serve\">serve<\/a> npm-paketet och st\u00e4ll in startskriptet till serve build.<\/li>\n<\/ol>\n<p>N\u00e4r detta \u00e4r gjort s\u00e5 kan du g\u00e5 vidare till att faktiskt distribuera din webbplats.<\/p>\n<h3>Distribuera ditt Docusaurus-projekt<\/h3>\n<p>F\u00f6lj dessa enkla steg f\u00f6r att ansluta till ditt GitHub-konto och starta din Docusaurus-webbplats:<\/p>\n<ol>\n<li>Logga in p\u00e5 ditt <a href=\"https:\/\/my.kinsta.com\/?lang=sv\">MyKinsta-konto<\/a> och navigera till fliken <strong>Applikationer<\/strong> i v\u00e4nstermenyn.<\/li>\n<li>Klicka p\u00e5 den bl\u00e5 knappen <strong>L\u00e4gg till tj\u00e4nst<\/strong> och v\u00e4lj <b>Applikationer <\/b>fr\u00e5n rullgardinsmenyn.\n<p><figure style=\"width: 1340px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/02\/mykinsta-applications-add-service.jpg\" alt=\"Fliken Applikationer i MyKinsta-instrumentpanelen med musen \u00f6ver alternativet \"Applikation\" efter att ha klickat p\u00e5 den bl\u00e5 knappen \"L\u00e4gg till tj\u00e4nst\".\" width=\"1340\" height=\"646\"><figcaption class=\"wp-caption-text\">Fliken Applikationer i MyKinsta-instrumentpanelen med musen \u00f6ver alternativet &#8221;Applikation&#8221; efter att ha klickat p\u00e5 den bl\u00e5 knappen &#8221;L\u00e4gg till tj\u00e4nst&#8221;.<\/figcaption><\/figure><\/li>\n<li>Om du \u00e4nnu inte har anslutit till ditt GitHub-konto via MyKinsta s\u00e5 visas en modal som uppmanar dig att g\u00f6ra detta. Klicka sedan p\u00e5 knappen <strong>Forts\u00e4tt med GitHub<\/strong> f\u00f6r att forts\u00e4tta.\n<p><figure style=\"width: 1074px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/02\/mykinsta-github-integration-continue.jpg\" alt=\"En modal med texten \"GitHub-integrering: Anslut kinsta till ditt GitHub-namnomr\u00e5de h\u00e4r f\u00f6r att importera dina befintliga arkiv.\" L\u00e4ngst ner till h\u00f6ger finns en vit \"Avbryt\"-knapp och en bl\u00e5 \"Forts\u00e4tt med GitHub\"-knapp.\" width=\"1074\" height=\"252\"><figcaption class=\"wp-caption-text\">En modal med texten &#8221;GitHub-integrering: Anslut kinsta till ditt GitHub-namnomr\u00e5de h\u00e4r f\u00f6r att importera dina befintliga arkiv.&#8221; L\u00e4ngst ner till h\u00f6ger finns en vit &#8221;Avbryt&#8221;-knapp och en bl\u00e5 &#8221;Forts\u00e4tt med GitHub&#8221;-knapp.<\/figcaption><\/figure><\/li>\n<li>Ett nytt f\u00f6nster \u00f6ppnas och ber om ditt tillst\u00e5nd att <a href=\"https:\/\/docs.sevalla.com\/applications\/git\/github#authenticate-and-authorize\">auktorisera Kinsta att f\u00e5 tillg\u00e5ng till och hantera dina GitHub-resurser<\/a>. Kontrollera att du \u00e4r inloggad p\u00e5 r\u00e4tt GitHub-konto och klicka sedan p\u00e5 den gr\u00f6na knappen <strong>Auktorisera Kinsta<\/strong> l\u00e4ngst ner.\n<p><figure style=\"width: 1032px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/02\/github-authorize-kinsta.jpg\" alt=\"En auktoriseringsmodal fr\u00e5n GitHub med texten \"Kinsta av Kinsta vill ha tillst\u00e5nd att: Verifiera din GitHub-identitet (kinstauser), veta vilka resurser som du har tillg\u00e5ng till, agera f\u00f6r din r\u00e4kning\" med b\u00e5de en gr\u00e5 \"Avbryt\"-knapp och en gr\u00f6n \"Auktorisera Kinsta\"-knapp l\u00e4ngst ner.\" width=\"1032\" height=\"915\"><figcaption class=\"wp-caption-text\">En auktoriseringsmodal fr\u00e5n GitHub med texten &#8221;Kinsta av Kinsta vill ha tillst\u00e5nd att: Verifiera din GitHub-identitet (kinstauser), veta vilka resurser som du har tillg\u00e5ng till, agera f\u00f6r din r\u00e4kning&#8221; med b\u00e5de en gr\u00e5 &#8221;Avbryt&#8221;-knapp och en gr\u00f6n &#8221;Auktorisera Kinsta&#8221;-knapp l\u00e4ngst ner.<\/figcaption><\/figure><\/li>\n<li>Du har nu kommit till <a href=\"https:\/\/docs.sevalla.com\/applications\/git\/github#authenticate-and-authorize\">guiden f\u00f6r GitHub-integrering<\/a>. Detta \u00e4r det sista steget innan du kan distribuera din webbplats. T\u00e4nk noga p\u00e5 f\u00e4lten som presenteras och fyll sedan i dem enligt din GitHub-konfiguration och ditt projekts krav. Om du har en <a href=\"https:\/\/docs.sevalla.com\/applications\/build-options\/dockerfile\">Dockerfil i ditt arkiv<\/a> s\u00e5 kan du anv\u00e4nda den f\u00f6r att st\u00e4lla in container-avbildningen. Annars s\u00e5 st\u00e4ller Kinsta in en containeravbildning \u00e5t dig automatiskt. Observera att du kan beh\u00f6va <a href=\"https:\/\/docs.sevalla.com\/applications\/git\/github#authenticate-and-authorize#edit-github-permissions\">redigera dina GitHub-beh\u00f6righeter<\/a> innan du kan forts\u00e4tta, s\u00e4rskilt om detta \u00e4r din f\u00f6rsta distribuering via Kinsta.\n<figure style=\"width: 1065px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/02\/mykinsta-application-edit-github-permissions.jpg\" alt=\"Den nya applikations-guiden i MyKinsta visar hur mushanden sv\u00e4var \u00f6ver rullgardinsalternativet \"Redigera GitHub-beh\u00f6righeter\" f\u00f6r f\u00e4ltet \"GitHub-arkiv\".\" width=\"1065\" height=\"373\"><figcaption class=\"wp-caption-text\">Den nya applikations-guiden i MyKinsta visar hur mushanden sv\u00e4var \u00f6ver rullgardinsalternativet &#8221;Redigera GitHub-beh\u00f6righeter&#8221; f\u00f6r f\u00e4ltet &#8221;GitHub-arkiv&#8221;.<\/figcaption><\/figure>\n<p>Du kan v\u00e4lja om du vill ge Kinsta \u00e5tkomst till alla arkiv eller endast specifika arkiv. Dessa beh\u00f6righeter kan justeras n\u00e4r som helst fr\u00e5n <a href=\"https:\/\/github.com\/settings\/installations\/\">inst\u00e4llningarna f\u00f6r <strong>applikationer<\/strong><strong>\u00a0<\/strong>p\u00e5 ditt GitHub-konto<\/a>.<\/p>\n<p><figure style=\"width: 917px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/02\/github-kinsta-permissions.jpg\" alt=\"GitHub-avsnittet \"Beh\u00f6righeter\", som visar tv\u00e5 alternativ i avsnittet \"Arkiv-\u00e5tkomst\": \"Alla arkiv\" eller \"Endast vissa arkiv\".\" width=\"917\" height=\"821\"><figcaption class=\"wp-caption-text\">GitHub-avsnittet &#8221;Beh\u00f6righeter&#8221;, som visar tv\u00e5 alternativ i avsnittet &#8221;Arkiv-\u00e5tkomst&#8221;: &#8221;Alla arkiv&#8221; eller &#8221;Endast vissa arkiv&#8221;.<\/figcaption><\/figure><\/li>\n<li>N\u00e4r du har gjort dina val och bekr\u00e4ftat dem s\u00e5 visas sedan detaljerna f\u00f6r distribueringen och alternativ f\u00f6r att <strong>\u00e4ndra inst\u00e4llningar<\/strong> eller <strong>distribuera om<\/strong>.\n<figure style=\"width: 1418px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/02\/mykinsta-successful-application-deployment.jpg\" alt=\"Sidan \"Distribueringsdetaljer\" i MyKinsta visar information om den distribuerade appen, inklusive namnet p\u00e5 den distribuerade filialen, utf\u00f6rande-nummer, medf\u00f6ljande utf\u00f6rande-meddelande, distribuerings-tider och vald datacenterplats.\" width=\"1418\" height=\"532\"><figcaption class=\"wp-caption-text\">Sidan &#8221;Distribueringsdetaljer&#8221; i MyKinsta visar information om den distribuerade appen, inklusive namnet p\u00e5 den distribuerade filialen, utf\u00f6rande-nummer, medf\u00f6ljande utf\u00f6rande-meddelande, distribuerings-tider och vald datacenterplats.<\/figcaption><\/figure>\n<p>Det \u00e4r dessutom h\u00e4r som du ser eventuella fel som uppstod under distribueringen, tillsammans med information om vad som orsakade felet s\u00e5 att du enkelt kan \u00e5tg\u00e4rda det. Om du har sv\u00e5rt att \u00e5tg\u00e4rda problemet s\u00e5 kan du hitta <a href=\"https:\/\/docs.sevalla.com\/applications\/troubleshooting\/failed-deployment#failed-rollout\">ytterligare v\u00e4gledning om distribuerings-fel<\/a> i <a href=\"https:\/\/docs.sevalla.com\/applications\/overview\">Kinsta&#8217;s dokumentation<\/a>.<\/p>\n<p><figure style=\"width: 1299px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/02\/mykinsta-application-build-error.jpg\" alt=\"Ett fel med titeln \"Byggprocessen misslyckades\" tillsammans med \"Ok\u00e4nd typ av byggnadsfel\" ovanf\u00f6r en detaljruta som listar de enskilda felen som bidrog till felet.\" width=\"1299\" height=\"636\"><figcaption class=\"wp-caption-text\">Ett fel med titeln &#8221;Byggprocessen misslyckades&#8221; tillsammans med &#8221;Ok\u00e4nd typ av byggnadsfel&#8221; ovanf\u00f6r en detaljruta som listar de enskilda felen som bidrog till felet.<\/figcaption><\/figure><\/li>\n<\/ol>\n<p>Om du har kommit s\u00e5 h\u00e4r l\u00e5ngt utan fel, grattis &#8211; du har just lyckats <a href=\"https:\/\/docs.sevalla.com\/templates\/overview\">distribuera din Docusaurus-webbplats via Kinsta<\/a>! Din applikation (dvs. din statiska webbplats) \u00e4r tillg\u00e4nglig s\u00e5 snart som du har slutf\u00f6rt guiden. Du kan se den p\u00e5 din applikations webbadress, som vanligtvis \u00e4r <code>https:\/\/<em>your-docusaurus-site<\/em>.kinsta.app<\/code>.<\/p>\n<p>H\u00e4r \u00e4r en f\u00f6rsta titt p\u00e5 v\u00e5r exempelwebbplats p\u00e5 Kinsta:<\/p>\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/02\/deployed-docusaurus-site.png\" alt=\"Den utplacerade Docusaurus-hemsidan, med en gr\u00f6n banner h\u00f6gst upp med rubriken \"Min webbplats\" och taglinen \"Dinosaurier \u00e4r coola\" i vit text.\" width=\"1600\" height=\"777\"><figcaption class=\"wp-caption-text\">Den utplacerade Docusaurus-hemsidan, med en gr\u00f6n banner h\u00f6gst upp med rubriken &#8221;Min webbplats&#8221; och taglinen &#8221;Dinosaurier \u00e4r coola&#8221; i vit text.<\/figcaption><\/figure>\n<h2>Sammanfattning<\/h2>\n<p>Med sina \u00f6verraskande kraftfulla funktioner, sin <a href=\"https:\/\/kinsta.com\/blog\/web-design-principles\/\">v\u00e4nliga design<\/a>, intuitiva navigering och fokus p\u00e5 inneh\u00e5llet s\u00e5 \u00e4r det inte sv\u00e5rt att se varf\u00f6r Docusaurus anses vara ett utm\u00e4rkt verktyg f\u00f6r alla utvecklare. Det g\u00f6r det enkelt att distribuera och underh\u00e5lla en str\u00f6mlinjeformad, v\u00e4lorganiserad statisk dokumentationswebbplats och\/eller blogg.<br \/>\n<\/p>\n<p>Har du fyllt din webbplats med inneh\u00e5ll som dina bes\u00f6kare kommer att uppskatta? D\u00e5 kommer du sedan att b\u00f6rja notera ytterligare inbyggda funktioner som kommer till nytta. Docusaurus m\u00f6jligheter till s\u00f6kmotoroptimering \u00e4r exempelvis perfekta f\u00f6r att hj\u00e4lpa dig att f\u00e5 en f\u00f6rb\u00e4ttrad synlighet genom en bredare m\u00e5lgrupp medan du arbetar med <a href=\"https:\/\/kinsta.com\/se\/blog\/wordpress-seo\/\">andra tekniker f\u00f6r att avancera i SEO-placeringarna<\/a>.<\/p>\n<p>Har du byggt n\u00e5got med Docusaurus? Dela dina projekt och erfarenheter med oss i kommentarsf\u00e4ltet nedan.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>F\u00f6r exempelvis l\u00e4ttviktiga webbplatser, applikationer och andra sm\u00e5 projekt s\u00e5 anv\u00e4nder allt fler utvecklare statiska webbplatsgeneratorer framf\u00f6r WordPress eller andra inneh\u00e5llshanteringssystem (CMS). Statiska webbplatser \u00e4r ett &#8230;<\/p>\n","protected":false},"author":283,"featured_media":52059,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[784],"class_list":["post-50429","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-javascript-sjalvstudier"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Skapa och anpassa en Docusaurus-webbplats (med bloggfunktion)<\/title>\n<meta name=\"description\" content=\"Beh\u00f6ver du en inneh\u00e5llsfokuserad webbplats och blogg d\u00e4r du enkelt kan distribuera? L\u00e4r dig att skapa och distribuera en Docusaurus-webbplats p\u00e5 n\u00e5gra minuter genom att f\u00f6lja denna genomg\u00e5ng.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/se\/blog\/docusaurus\/\" \/>\n<meta property=\"og:locale\" content=\"sv_SE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Skapa och anpassa en Docusaurus-webbplats (med bloggfunktion)\" \/>\n<meta property=\"og:description\" content=\"Beh\u00f6ver du en inneh\u00e5llsfokuserad webbplats och blogg d\u00e4r du enkelt kan distribuera? L\u00e4r dig att skapa och distribuera en Docusaurus-webbplats p\u00e5 n\u00e5gra minuter genom att f\u00f6lja denna genomg\u00e5ng.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/se\/blog\/docusaurus\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinstasweden\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-02-23T12:47:25+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-09-01T15:42:18+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2023\/02\/docusaurus.jpeg\" \/>\n\t<meta property=\"og:image:width\" content=\"1536\" \/>\n\t<meta property=\"og:image:height\" content=\"768\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Maciek Palmowski\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Beh\u00f6ver du en inneh\u00e5llsfokuserad webbplats och blogg d\u00e4r du enkelt kan distribuera? L\u00e4r dig att skapa och distribuera en Docusaurus-webbplats p\u00e5 n\u00e5gra minuter genom att f\u00f6lja denna genomg\u00e5ng.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2023\/02\/docusaurus.jpeg\" \/>\n<meta name=\"twitter:creator\" content=\"@kinsta_se\" \/>\n<meta name=\"twitter:site\" content=\"@kinsta_se\" \/>\n<meta name=\"twitter:label1\" content=\"Skriven av\" \/>\n\t<meta name=\"twitter:data1\" content=\"Maciek Palmowski\" \/>\n\t<meta name=\"twitter:label2\" content=\"Ber\u00e4knad l\u00e4stid\" \/>\n\t<meta name=\"twitter:data2\" content=\"16 minuter\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/se\/blog\/docusaurus\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/se\/blog\/docusaurus\/\"},\"author\":{\"name\":\"Maciek Palmowski\",\"@id\":\"https:\/\/kinsta.com\/se\/#\/schema\/person\/0cf8d8dc768875c83e582e95abbdd072\"},\"headline\":\"Skapa och anpassa en Docusaurus-webbplats (med bloggfunktion)\",\"datePublished\":\"2023-02-23T12:47:25+00:00\",\"dateModified\":\"2025-09-01T15:42:18+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/se\/blog\/docusaurus\/\"},\"wordCount\":2847,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/se\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/se\/blog\/docusaurus\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2023\/02\/docusaurus.jpeg\",\"inLanguage\":\"sv-SE\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/se\/blog\/docusaurus\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/se\/blog\/docusaurus\/\",\"url\":\"https:\/\/kinsta.com\/se\/blog\/docusaurus\/\",\"name\":\"Skapa och anpassa en Docusaurus-webbplats (med bloggfunktion)\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/se\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/se\/blog\/docusaurus\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/se\/blog\/docusaurus\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2023\/02\/docusaurus.jpeg\",\"datePublished\":\"2023-02-23T12:47:25+00:00\",\"dateModified\":\"2025-09-01T15:42:18+00:00\",\"description\":\"Beh\u00f6ver du en inneh\u00e5llsfokuserad webbplats och blogg d\u00e4r du enkelt kan distribuera? L\u00e4r dig att skapa och distribuera en Docusaurus-webbplats p\u00e5 n\u00e5gra minuter genom att f\u00f6lja denna genomg\u00e5ng.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/se\/blog\/docusaurus\/#breadcrumb\"},\"inLanguage\":\"sv-SE\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/se\/blog\/docusaurus\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"sv-SE\",\"@id\":\"https:\/\/kinsta.com\/se\/blog\/docusaurus\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2023\/02\/docusaurus.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2023\/02\/docusaurus.jpeg\",\"width\":1536,\"height\":768,\"caption\":\"Skapa och anpassa en Docusaurus-webbplats (med bloggfunktion)\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/se\/blog\/docusaurus\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/se\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JavaScript-sj\u00e4lvstudier\",\"item\":\"https:\/\/kinsta.com\/se\/topics\/javascript-sjalvstudier\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Skapa och anpassa en Docusaurus-webbplats (med bloggfunktion)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/se\/#website\",\"url\":\"https:\/\/kinsta.com\/se\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Snabba, s\u00e4kra, premium hosting-l\u00f6sningar\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/se\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/se\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"sv-SE\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/se\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/se\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"sv-SE\",\"@id\":\"https:\/\/kinsta.com\/se\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/se\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinstasweden\/\",\"https:\/\/x.com\/kinsta_se\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/se\/#\/schema\/person\/0cf8d8dc768875c83e582e95abbdd072\",\"name\":\"Maciek Palmowski\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"sv-SE\",\"@id\":\"https:\/\/kinsta.com\/se\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/38664c477eb1e9b4ab2b97f4b0c81c8a?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/38664c477eb1e9b4ab2b97f4b0c81c8a?s=96&d=mm&r=g\",\"caption\":\"Maciek Palmowski\"},\"description\":\"Maciek is a web developer working at Kinsta as a Development Advocate Analyst. After hours, he spends most of his time coding, trying to find interesting news for his newsletters, or drinking coffee.\",\"url\":\"https:\/\/kinsta.com\/se\/blog\/author\/maciekpalmowski\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Skapa och anpassa en Docusaurus-webbplats (med bloggfunktion)","description":"Beh\u00f6ver du en inneh\u00e5llsfokuserad webbplats och blogg d\u00e4r du enkelt kan distribuera? L\u00e4r dig att skapa och distribuera en Docusaurus-webbplats p\u00e5 n\u00e5gra minuter genom att f\u00f6lja denna genomg\u00e5ng.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/se\/blog\/docusaurus\/","og_locale":"sv_SE","og_type":"article","og_title":"Skapa och anpassa en Docusaurus-webbplats (med bloggfunktion)","og_description":"Beh\u00f6ver du en inneh\u00e5llsfokuserad webbplats och blogg d\u00e4r du enkelt kan distribuera? L\u00e4r dig att skapa och distribuera en Docusaurus-webbplats p\u00e5 n\u00e5gra minuter genom att f\u00f6lja denna genomg\u00e5ng.","og_url":"https:\/\/kinsta.com\/se\/blog\/docusaurus\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstasweden\/","article_published_time":"2023-02-23T12:47:25+00:00","article_modified_time":"2025-09-01T15:42:18+00:00","og_image":[{"width":1536,"height":768,"url":"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2023\/02\/docusaurus.jpeg","type":"image\/jpeg"}],"author":"Maciek Palmowski","twitter_card":"summary_large_image","twitter_description":"Beh\u00f6ver du en inneh\u00e5llsfokuserad webbplats och blogg d\u00e4r du enkelt kan distribuera? L\u00e4r dig att skapa och distribuera en Docusaurus-webbplats p\u00e5 n\u00e5gra minuter genom att f\u00f6lja denna genomg\u00e5ng.","twitter_image":"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2023\/02\/docusaurus.jpeg","twitter_creator":"@kinsta_se","twitter_site":"@kinsta_se","twitter_misc":{"Skriven av":"Maciek Palmowski","Ber\u00e4knad l\u00e4stid":"16 minuter"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/se\/blog\/docusaurus\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/se\/blog\/docusaurus\/"},"author":{"name":"Maciek Palmowski","@id":"https:\/\/kinsta.com\/se\/#\/schema\/person\/0cf8d8dc768875c83e582e95abbdd072"},"headline":"Skapa och anpassa en Docusaurus-webbplats (med bloggfunktion)","datePublished":"2023-02-23T12:47:25+00:00","dateModified":"2025-09-01T15:42:18+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/se\/blog\/docusaurus\/"},"wordCount":2847,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/se\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/se\/blog\/docusaurus\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2023\/02\/docusaurus.jpeg","inLanguage":"sv-SE","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/se\/blog\/docusaurus\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/se\/blog\/docusaurus\/","url":"https:\/\/kinsta.com\/se\/blog\/docusaurus\/","name":"Skapa och anpassa en Docusaurus-webbplats (med bloggfunktion)","isPartOf":{"@id":"https:\/\/kinsta.com\/se\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/se\/blog\/docusaurus\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/se\/blog\/docusaurus\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2023\/02\/docusaurus.jpeg","datePublished":"2023-02-23T12:47:25+00:00","dateModified":"2025-09-01T15:42:18+00:00","description":"Beh\u00f6ver du en inneh\u00e5llsfokuserad webbplats och blogg d\u00e4r du enkelt kan distribuera? L\u00e4r dig att skapa och distribuera en Docusaurus-webbplats p\u00e5 n\u00e5gra minuter genom att f\u00f6lja denna genomg\u00e5ng.","breadcrumb":{"@id":"https:\/\/kinsta.com\/se\/blog\/docusaurus\/#breadcrumb"},"inLanguage":"sv-SE","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/se\/blog\/docusaurus\/"]}]},{"@type":"ImageObject","inLanguage":"sv-SE","@id":"https:\/\/kinsta.com\/se\/blog\/docusaurus\/#primaryimage","url":"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2023\/02\/docusaurus.jpeg","contentUrl":"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2023\/02\/docusaurus.jpeg","width":1536,"height":768,"caption":"Skapa och anpassa en Docusaurus-webbplats (med bloggfunktion)"},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/se\/blog\/docusaurus\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/se\/"},{"@type":"ListItem","position":2,"name":"JavaScript-sj\u00e4lvstudier","item":"https:\/\/kinsta.com\/se\/topics\/javascript-sjalvstudier\/"},{"@type":"ListItem","position":3,"name":"Skapa och anpassa en Docusaurus-webbplats (med bloggfunktion)"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/se\/#website","url":"https:\/\/kinsta.com\/se\/","name":"Kinsta\u00ae","description":"Snabba, s\u00e4kra, premium hosting-l\u00f6sningar","publisher":{"@id":"https:\/\/kinsta.com\/se\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/se\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"sv-SE"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/se\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/se\/","logo":{"@type":"ImageObject","inLanguage":"sv-SE","@id":"https:\/\/kinsta.com\/se\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/se\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinstasweden\/","https:\/\/x.com\/kinsta_se","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/se\/#\/schema\/person\/0cf8d8dc768875c83e582e95abbdd072","name":"Maciek Palmowski","image":{"@type":"ImageObject","inLanguage":"sv-SE","@id":"https:\/\/kinsta.com\/se\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/38664c477eb1e9b4ab2b97f4b0c81c8a?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/38664c477eb1e9b4ab2b97f4b0c81c8a?s=96&d=mm&r=g","caption":"Maciek Palmowski"},"description":"Maciek is a web developer working at Kinsta as a Development Advocate Analyst. After hours, he spends most of his time coding, trying to find interesting news for his newsletters, or drinking coffee.","url":"https:\/\/kinsta.com\/se\/blog\/author\/maciekpalmowski\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/se\/wp-json\/wp\/v2\/posts\/50429","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/se\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/se\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/se\/wp-json\/wp\/v2\/users\/283"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/se\/wp-json\/wp\/v2\/comments?post=50429"}],"version-history":[{"count":12,"href":"https:\/\/kinsta.com\/se\/wp-json\/wp\/v2\/posts\/50429\/revisions"}],"predecessor-version":[{"id":58234,"href":"https:\/\/kinsta.com\/se\/wp-json\/wp\/v2\/posts\/50429\/revisions\/58234"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/se\/wp-json\/kinsta\/v1\/posts\/50429\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/se\/wp-json\/kinsta\/v1\/posts\/50429\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/se\/wp-json\/kinsta\/v1\/posts\/50429\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/se\/wp-json\/kinsta\/v1\/posts\/50429\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/se\/wp-json\/kinsta\/v1\/posts\/50429\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/se\/wp-json\/kinsta\/v1\/posts\/50429\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/se\/wp-json\/kinsta\/v1\/posts\/50429\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/se\/wp-json\/kinsta\/v1\/posts\/50429\/translations\/es"},{"embeddable":true,"hreflang":"sv","title":"Swedish","href":"https:\/\/kinsta.com\/se\/wp-json\/kinsta\/v1\/posts\/50429\/translations\/se"},{"embeddable":true,"hreflang":"da","title":"Danish","href":"https:\/\/kinsta.com\/se\/wp-json\/kinsta\/v1\/posts\/50429\/translations\/dk"},{"href":"https:\/\/kinsta.com\/se\/wp-json\/kinsta\/v1\/posts\/50429\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/se\/wp-json\/wp\/v2\/media\/52059"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/se\/wp-json\/wp\/v2\/media?parent=50429"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/se\/wp-json\/wp\/v2\/tags?post=50429"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/se\/wp-json\/wp\/v2\/topic?post=50429"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}