How I set up this blog (new)

I used to make my blog using the Jekyll Theme Chirpy. However I decided I wanted to switch things up and try out a new theme. After looking for a while, I finally found a theme that I like, ensribe’s astro-erudite. I mainly chose this theme cuz it has really cool features and I like the UI more. To checkout some of the features, I recommend checking the astro-erudite blog

I had a “How I set up this blog” blog for my chirpy blog (you could still find that blog post here) so I thought I should make another one for this one. I won’t go into that much detail on how to install it as the github repo has already given that. Instead I’ll mainly focus on the changes I made to the template.

I made some changes, mainly to the color theme. I really enjoy the catpuccin themes so I wanted it to be the main theme for my blog. However I hate frontend dev so I vibecoded the changes. I simply took the color pallete from Catppuccin’s website and asked copilot to change the color theme. This astro theme allow both light and dark mode but since I never used light mode I didn’t bother too much into making the light mode look good, sorry light mode enjoyers.

The next thing I changed is the syntax higlighthing. astro-erudite uses Expressive code for code blocks and rehype-pretty-code for inline code highlighting. Both plugin has builtin catpuccin theme. Here is the config that I changed to apply the catpuccin theme

48
        rehypeExpressiveCode,
49
        {
50
          themes: ['github-light', 'github-dark'],
51
          themes: ['catppuccin-latte', 'catppuccin-mocha'],
52
          plugins: [pluginCollapsibleSections(), pluginLineNumbers()],
53
          useDarkModeMediaQuery: false,
54
          themeCssSelector: (theme: ExpressiveCodeTheme) =>
55
            `[data-theme="${theme.name.split('-')[1]}"]`,
56
            theme.name === 'catppuccin-mocha' ? '[data-theme="dark"]' : '[data-theme="light"]',
40 collapsed lines
57
          defaultProps: {
58
            wrap: true,
59
            collapseStyle: 'collapsible-auto',
60
            overridesByLang: {
61
              'ansi,bat,bash,batch,cmd,console,powershell,ps,ps1,psd1,psm1,sh,shell,shellscript,shellsession,text,zsh':
62
                {
63
                  showLineNumbers: false,
64
                },
65
            },
66
          },
67
          styleOverrides: {
68
            codeFontSize: '0.75rem',
69
            borderColor: 'var(--border)',
70
            codeFontFamily: 'var(--font-mono)',
71
            codeBackground:
72
              'color-mix(in oklab, var(--muted) 25%, transparent)',
73
            frames: {
74
              editorActiveTabForeground: 'var(--muted-foreground)',
75
              editorActiveTabBackground:
76
                'color-mix(in oklab, var(--muted) 25%, transparent)',
77
              editorActiveTabIndicatorBottomColor: 'transparent',
78
              editorActiveTabIndicatorTopColor: 'transparent',
79
              editorTabBorderRadius: '0',
80
              editorTabBarBackground: 'transparent',
81
              editorTabBarBorderBottomColor: 'transparent',
82
              frameBoxShadowCssValue: 'none',
83
              terminalBackground:
84
                'color-mix(in oklab, var(--muted) 25%, transparent)',
85
              terminalTitlebarBackground: 'transparent',
86
              terminalTitlebarBorderBottomColor: 'transparent',
87
              terminalTitlebarForeground: 'var(--muted-foreground)',
88
            },
89
            lineNumbers: {
90
              foreground: 'var(--muted-foreground)',
91
            },
92
            uiFontFamily: 'var(--font-sans)',
93
          },
94
        },
95
      ],
96
      [
97
        rehypeShiki,
98
        {
99
          themes: {
100
            light: 'github-light',
101
            light: 'catppuccin-latte',
102
            dark: 'github-dark',
103
            dark: 'catppuccin-mocha',
104
          },
105
          inline: 'tailing-curly-colon',
106
        },
107
      ],
108
    ],

Another thing I changed is to add two sections on my homepage. For this change I also vibecoded it cause I am wayy too lazy. I also added a discord icon that links to my discord profile utilizing simple-icons. For that it is as easy as adding simple-icons to the package.json file and adding the following line of code

44
export const ICON_MAP: IconMap = {
45
  Website: 'lucide:globe',
46
  GitHub: 'lucide:github',
47
  LinkedIn: 'lucide:linkedin',
48
  Twitter: 'lucide:twitter',
49
  Email: 'lucide:mail',
50
  RSS: 'lucide:rss',
51
  Discord: 'simple-icons:discord',
52
}

Last but not least, I need to add a github workflow to push my changes into my github pages. Luckily I could simply yoink it from astro’s website

Thats pretty much all the changes I could remember. Yes ik a lot is vibecoded but I couldn’t care enough to put in the time and effort to make those changes myself.