How this site is built

Leave a Comment / 30/08/2022 /

Original link: https://lawrenceli.me/blog/how

:::
This article is for end-to-end testing of Markdown styles
:::

How to use

Directly store the Markdown file (.md) in the posts folder to render the current file and make it a static page ( SSG ).
The blog’s homepage index directory is also generated for synchronization without manual maintenance.

The About page is also generated based on readme.md file.

Blog-related information configuration, such as title, author, etc., can be configured in the lib/config.json file.

It is recommended to use pnpm as a dependency management tool for node.js.

 pnpm install pnpm run dev

You can access http://localhost:3000 locally.

Packaged by npm run build , and npm run start is used to start the production environment.

technical details

This site is constructed with the Next.js framework and TailWindCSS styles. The former is a React-based SSG/SSR open source project, and the latter is a popular atomized CSS tool, which allows me to quickly write flexible styles without writing CSS.

Next.js will actively call some functions we wrote ( getStaticProps() ) to let the component get data input, so that the React component will be rendered in advance during the construction phase . The remark library can compile the native markdown syntax into the DOM corresponding to html – in this project, we let it traverse the markdown files in the posts folder, compile them in turn, and use them as the props of the dynamic routing page of [id].js , which renders the blog post:

 // [id].js export const getStaticProps = async context => { const { id } = context. params ; const mdData = await getMdContentById (id); return { props : mdData, }; };

The benefits of doing this are many:

  • Suitable for caching by CDN
  • Excellent SEO performance
  • Save network bandwidth and traffic
  • TTFB with O(1) time complexity

In one word, hurry up! If you try to disable JavaScript in your current browser, the site will render and display correctly as well.

Not only that, Next.js also provides server-side rendering capabilities, which can also bring a better SEO experience.

The above technique is called JAMstack : J JavaScript, API & Markup .

An interesting way to say that JAMstack is a CDN-first application.

It’s now possible, instead, to push content directly to the network and design frameworks that optimize for this capability. As a result, with optimizations like static asset hoisting, websites are now becoming faster and more reliable than ever before.

Images

Easter eggs: Randomly display some black and white style pictures. It changes every refresh:

Random Image

I was crossed by a horizontal line.

Tables

JAMstack.

ROLE PROVIDED BY
J Client-side JS injected via React Hooks (state, event listeners, effects)
A API pages inside the pages/api directory.
M Pages with no data dependencies or pages with static data deps that trigger build-time static site generation.

Ref reference link

This article is reprinted from: https://lawrenceli.me/blog/how
This site is for inclusion only, and the copyright belongs to the original author.

Leave a Comment