Skip to main content

Configuration file

docusaurus.config.ts​

docusaurus.config.ts This is the root of your website.

You can customize various aspects of your site, such as the logo, site name, author name, announcement bar at the top, navigation bar, and footer at the bottom.

docusaurus.config.tstypescript
const config: Config = {
  title: 'Cloud Journey',
  url: 'https://fernandogprieto.com',
  baseUrl: '/',
  favicon: 'img/favicon.ico',
  projectName: 'fgp-web',
  customFields: {
    bio: 'Cloud Engineer, IT Specialist',
    description:
      'A personal blog to share knowledge about cloud infrastructure and IT operations using Docusaurus。',
  },
  themeConfig: {
    image: 'img/logo.png',
    metadata: [
      {
        name: 'keywords',
        content: 'linux, docker, kubernetes, terraform, cloud, python, aws, azure, gcp, openstack',
      },
    ],
    // ...
  }

module.exports = config

For more information docusaurus.config.ts | Docusaurus

sidebar.js​

Designed for organizing various documentation resources, such as technical articles from the blog, and recommended tools. Each item displayed in the sidebar corresponds to a Markdown file, which can be easily managed as they are all stored in the doc directory.

For more information Sidebar | Docusaurus

About me​

To modify this section, go to the src/pages/about.mdx file.

Social media​

Feel free to customize this code to suit your own social media links in data/social.ts

social.tstypescript
export type Social = {
  linkedin?: string
  github?: string
  x?: string
  email?: string
  discord?: string
  spotify?: string
}

Others configs​

Google Analytics​

image

  • Click on Next and create your Property name.

image

  • Enter your Business information and select the appropriate category for your personal branding.

image

  • Accept the Google Analytics Terms of Service Agreement.

image

  • Choose a platform; in my case, I chose 'Web'.

image

  • Set up a data stream with your domain.

image

  • Copy your MEASUREMENT ID.

image

Google Analytics Plugin | Docusaurus

Plugin gtag​

  • Install this plugin in your project:
pnpm install --save @docusaurus/plugin-google-gtag
  • Configure the preset option and paste the MEASUREMENT ID.
docusaurus.config.tstypescript
module.exports = {
  presets: [
    [
      '@docusaurus/preset-classic',
      {
        gtag: {
          trackingID: 'G-G76N5FK6BH',
          anonymizeIP: true,
        },
      },
    ],
  ],
};

Homepage​

Since blog-only mode is active, the blog post list serves as your homepage by default. To avoid a Home path conflict, rename or delete the src/pages/index.tsx file. Alternatively, create a dedicated homepage that redirects to the blog list, similar to Docusaurus.

To enhance the blog's visual appeal, we added a Hero component for a strong first impression. The SVG background for the homepage is located at src/components/landing/Hero/img/hero_main.svg. This illustration is sourced from unDraw, but you can also opt for a custom design by an illustrator.

Other pages​

Tags, Archive, Friends, Resources, Projects, and About Me pages are all defined in the src/pages directory, with routes mapped according to the file names. For more details on creating pages, refer to Creating Pages | Docusaurus.

0%