Next.js 实现静态博客网站的技巧与方法

阅读时长 11 分钟读完

前言

随着更多人开始写博客、分享知识,静态博客网站相比动态博客网站变得越来越流行。如果你希望将你的博客网站制作成静态网站,Next.js 可能是一个不错的选择。

在这篇文章中,我们将探讨使用 Next.js 来制作静态博客网站,我们将讨论一些技巧和方法,这些技巧和方法可以帮助你更好地利用 Next.js 来构建你的静态博客网站。

Next.js 简介

Next.js 是一个基于 React 的服务器端渲染框架,它帮助我们在构建 React 应用程序时更加容易地处理各种用例,例如服务器端渲染、静态文件生成、路由等。

静态博客网站的制作

静态博客网站的制作非常简单,你只需要将你的 Markdown 文件转换为 HTML 文件,并将这些文件上传到你的静态文件托管服务提供商,例如 GitHub Pages、Netlify 等。

但是,如果你想要制作一个更加完整、功能齐全的静态博客网站,则需要使用一个静态站点生成器,它可以帮助你自动生成静态 HTML 文件以及其他必需的文件,例如 sitemap、RSS 等。

下面,我们将使用 Next.js 框架来制作一个 Markdown 静态博客网站。

目录结构

我们将使用如下的目录结构:

-- -------------------- ---- -------
--- -----
-   --- --------
-   --- ----
-   -   --- --------
-   -   --- ---------
-   --- ------
--- ----------
-   --- ---------
-   --- ---------
-   --- -------
--- ------
-   --- ------
-   -   --- ----------------
-   --- -----------
--- ------
-   --- ----------

其中 pages 目录包含我们的页面路由,components 目录包含我们的 React 组件,public 目录包含我们的静态资源文件,styles 目录包含我们的全局样式文件。

页面路由

我们首先需要为我们的博客网站定义页面路由。

pages 目录下,我们创建一个名为 index.js 的文件,作为网站的首页。

-- -------------------- ---- -------
------ ------ ---- -----------------------

----- -------- - -- -- -
  ------ -
    ------- -------------
      ----------- -- -- ---------
    ---------
  --
--

------ ------- ---------

pages 目录下,我们创建一个名为 blog 的子目录,其中 index.js 文件作为博客文章列表页面,[slug].js 文件作为每篇文章的页面。

pages/blog/index.js 文件中,我们可以使用 getStaticProps 函数从 Markdown 文件中获取所有博客文章的元数据。

-- -------------------- ---- -------
------ ------ ---- --------------------------
------ - ----------- - ---- ----------------

----- -------- - -- -------- -- -- -
  ------ -
    ------- -------------
      ------ ---- ----------
      ----
        -------------------- -- -
          ----
            ----- ----------------------------
              -------------------
            -------
          -----
        ---
      -----
    ---------
  --
--

------ ----- -------------- - ----- -- -- -
  ----- -------- - --------------
  ------ -
    ------ - -------- -
  --
--

------ ------- ---------

pages/blog/[slug].js 文件中,我们使用 getStaticPathsgetStaticProps 函数从 Markdown 文件中获取特定文章的内容。

-- -------------------- ---- -------
------ ------ ---- --------------------------
------ - ---------------- ------------- - ---- ----------------

----- -------- - -- ---- -- -- -
  ------ -
    ------- -------------------
      ---------------------
      ---- -------------------------- ------- ------------ -- --
    ---------
  --
--

------ ----- -------------- - ----- -- -- -
  ----- ----- - ---------------------------- -- --
    ------- - ---- -
  ----
  ------ -
    ------
    --------- -----
  --
--

------ ----- -------------- - ----- -- ------ -- -- -
  ----- ---- - ---------------------------
  ------ -
    ------ - ---- -
  --
--

------ ------- ---------

Markdown 转换

我们可以使用第三方依赖来将 Markdown 文件转换为 HTML 文件。其中比较流行的依赖有 remarkmarkdown-it 等。

在这里,我们将使用 remark 来将 Markdown 文件转换为 HTML 文件。

下面是将 Markdown 文件转换为 HTML 文件的实现过程:

-- -------------------- ---- -------
------ -- ---- -----
------ ---- ---- -------
------ ------ ---- --------------
------ ------ ---- ---------
------ ---- ---- --------------

----- -------------- - ------------------------ ---------

------ ----- --------------- - -- -- -
  ------ --------------------------------------------- -- ----------------------- -----
--

------ ----- ------------- - ------ -- -
  ----- ----------- - ----------------------------------------- -------------- --------
  ----- - ----- ------- - - --------------------
  ----- ---------------- - ---------------------------------------------------
  ------ -
    -----
    -------- -----------------
    -------
  --
--

------ ----- ----------- - -- -- -
  ----- ----- - ------------------
  ------ ---------------- -- ---------------------
--

在上面的代码中,我们首先读取 posts 目录下的所有 Markdown 文件名(不包括文件扩展名),然后遍历每个文件名,从文件系统中读取 Markdown 文件,并使用 gray-matter 库从文件元数据中解析 Markdown YAML 头部。

接下来,我们使用 remark 将 Markdown 文件转换为 HTML 文件,我们使用 html 插件并在其上调用 processSync 方法来完成转换。

React 组件

我们可以使用 React 组件来渲染我们的博客网站页面。

我们将 components 目录下的 Layout 组件作为我们的基础组件。它包含一个 Header 组件、一个 main 元素和一个 footer 元素。我们可以将相同的导航栏、页脚和页面元信息注入到每个页面上。

-- -------------------- ---- -------
------ ---- ---- ------------
------ ------ ---- -----------

----- ------ - -- ------ -------- -- -- -
  ----- --------- - --- ---- ------
  ----- --------- - ----- - --------- - ------------- - ----------
  ------ -
    --
      ------
        --------------------------
        ----- ---------- ------------------- --
      -------
      ------- --
      -----------------------
      -------------- ---- -- ---- -------------
    ---
  --
--

------ ------- -------

我们还将创建一个 Header 组件,它包含网站的标题和导航栏。

-- -------------------- ---- -------
------ ---- ---- ------------

----- ------ - -- -- -
  ------ -
    --------
      ---- -----------------------------
        ---- ------------------------
          ----- ---------
            ---
              ---- ------------------------------ ----------- ----- --
            ----
          -------
        ------
        ---- -----------------------
          ----
            ----
              ----- ---------
                -----------
              -------
            -----
            ----
              ----- -------------
                -----------
              -------
            -----
          -----
        ------
      ------
    ---------
  --
--

------ ------- -------

我们还需要创建一个 Post 组件,它用于呈现文章列表上的单个文章。

-- -------------------- ---- -------
------ ---- ---- ------------

----- ---- - -- ---- -- -- -
  ------ -
    ---------
      ---------------------
      ---- -------------------------- ------- ------------ -- --
      ----- ----------------------------
        ------- --------
      -------
    ----------
  --
--

------ ------- -----

样式表

最后,我们需要为我们的博客网站定义样式表。

我们将使用 CSS Modules 来定义组件级样式,从而避免全局 CSS 样式冲突的问题。

styles 目录下,我们创建一个名为 global.css 的文件,它包含我们的全局样式。

-- -------------------- ---- -------
---- -
  ------- --
  -------- --
  ------------ -------- -----------
-

- -
  ------ -----
-

---- -
  ------- - -----
  ---------- ------
  -------- ----
-

现在,我们已经准备好构建我们的博客网站了。

使用 npm run build 命令构建我们的博客网站,将生成一个 out 目录,其中包含静态 HTML 文件以及其他必需文件。

您可以使用任何静态文件托管服务提供商(例如 GitHub Pages、Netlify 等)将这些文件发布到公共 Internet 上。

总结

在本文中,我们探讨了使用 Next.js 制作静态博客网站的技巧和方法。我们讨论了如何使用 getStaticPropsgetStaticPaths 函数从 Markdown 文件中获取博客文章的元数据和内容。我们还讨论了如何使用 React 组件和 CSS Modules 定义组件级样式。

希望这篇文章对你有所帮助,祝你制作出漂亮的、功能齐全的静态博客网站。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/6484eba948841e98943ee17d

纠错
反馈