My blog!

2024-11-14
blog

Last updated on 2024-11-21

For a long time, I am willing to setup a personal site to host my learning, reading and thoughts, but due to the operation overhead, I can’t do this properly, perviously I tried to host it on my vps, but because of misconfiguration, the site is hacked and I lost all the data. I just pause the proposal, and continuously to find a better way that will not cost me too much time and energy.

Several months ago, I know astro, but it feels like a little complex; but today I try it again, and with ease I setup my blog and also host it in github pages, this save me a lot of effort.

I also enabled latex support,, so I can write the various equations in my blog; also mermaid is also added, with it I can draw some charts.

lets move on !!!

add latex support

modify astro.config.mjs

import two packages

import remarkMath from "remark-math";
import rehypeKatex from "rehype-katex";

in function defineConfig, add the plugins

export default defineConfig({
  site: "https://blog.lmyby.icu",
  markdown: {
    // Applied to .md and .mdx files
    remarkPlugins: [remarkMath], // relevant
    rehypePlugins: [rehypeKatex], // relevant
  },
  integrations: [
    mdx({
      remarkPlugins: [remarkMath], // relevant
      rehypePlugins: [rehypeKatex], // relevant
    }),
    sitemap(),
    tailwind(),
  ],
});

modify src/layouts/BaseLayout.astro, in the <head>, add katex related css and js, so the <head> tag will look like this:

<head>
  <BaseHead title={title} description={description} image={image} , ogType={ogType} />
  {TRANSITION_API && <ViewTransitions />}
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/katex.min.css" integrity="sha384-nB0miv6/jRmo5UMMR1wu3Gz6NLsoTkbqJg  hGIsx//Rlm+ZU03BU6SQNC66uf4l5+" crossorigin="anonymous">
    <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/katex.min.js" integrity="sha384-7zkQWkzuo3B5mTepMUcHkMB5jZaolc2xDwL6VFqjFALcbeS9Ggm/Yr2r3Dy4lfFg" crossorigin="anonymous"></script>
    <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/contrib/auto-render.min.js" integrity="sha384-43gviWU0YVjaDtb/GhzOouOXtZMP/7XUzwPTstBeZFe/+rCMvRwr4yROQP43s0Xk" crossorigin="anonymous" onload="renderMathInElement(document.body);"></script>
</head>

install package
Terminal window
```
npm install  remark-math rehype-katex
```

add mermaid support

modify astro.config.mjs

import two packages

import expressiveCode from "astro-expressive-code";
import remarkMermaid from 'remark-mermaidjs'

in function defineConfig, add the plugins and integrations, make sure expressiveCode() is the first integrations

export default defineConfig({
  site: "https://blog.lmyby.icu",
  markdown: {
    // Applied to .md and .mdx files
    remarkPlugins: [remarkMath, remarkMermaid], // relevant
    rehypePlugins: [rehypeKatex], // relevant
  },
  integrations: [
    expressiveCode(),
    mdx({
      remarkPlugins: [remarkMath, remarkMermaid], // relevant
      rehypePlugins: [rehypeKatex], // relevant
    }),
    sitemap(),
    tailwind(),
  ],
});

install package

npm install astro-expressive-code playwright remark-mermaidjs
npm install --save-dev playwright