前言
随着更多人开始写博客、分享知识,静态博客网站相比动态博客网站变得越来越流行。如果你希望将你的博客网站制作成静态网站,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
文件中,我们使用 getStaticPaths
和 getStaticProps
函数从 Markdown 文件中获取特定文章的内容。
-- -------------------- ---- ------- ------ ------ ---- -------------------------- ------ - ---------------- ------------- - ---- ---------------- ----- -------- - -- ---- -- -- - ------ - ------- ------------------- --------------------- ---- -------------------------- ------- ------------ -- -- --------- -- -- ------ ----- -------------- - ----- -- -- - ----- ----- - ---------------------------- -- -- ------- - ---- - ---- ------ - ------ --------- ----- -- -- ------ ----- -------------- - ----- -- ------ -- -- - ----- ---- - --------------------------- ------ - ------ - ---- - -- -- ------ ------- ---------
Markdown 转换
我们可以使用第三方依赖来将 Markdown 文件转换为 HTML 文件。其中比较流行的依赖有 remark
、markdown-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 制作静态博客网站的技巧和方法。我们讨论了如何使用 getStaticProps
、getStaticPaths
函数从 Markdown 文件中获取博客文章的元数据和内容。我们还讨论了如何使用 React 组件和 CSS Modules 定义组件级样式。
希望这篇文章对你有所帮助,祝你制作出漂亮的、功能齐全的静态博客网站。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/6484eba948841e98943ee17d