Welcome

框架版本
更新时间

built with: Docusaurus 2.0.0-beta.13

写在前面

虽然我很想全部内容使用英文，让网站的整体保持一致，但很遗憾，以我现阶段的英语水平是没啥意义😂。

正如主页中所写的，本网站使用 Docusaurus v2 建立。

Docusaurus v2 作为一款开源的建站项目，确确实实做到了简单高效，并且能够满足前端与非前端程序员的的基本需求。

曾经写的是~~程序员与非程序员~~，我还是年轻了。

对于我个人而言，使用简便高效，界面美观，功能齐全，开发人员一直在维护完善（版本更新好快，而且加了好多新的功能，大赞），

以及，支持 markdown，支持 markdown，支持 markdown！

在 markdown 基础上的 mdx 还可以内嵌 jsx 代码，真是锦上添花！

学了 React 之后，我的心情只能用“爽”来形容了。 2021-03-10

下面我简单介绍如何使用 Docusaurus v2 建立一个类似本站的网站。

如果你需要更加详细的信息，请访问 Docusaurus v2 的官方文档。

请注意版本，本站不一定使用最新版本。不同版本的文件配置可能不同。

下载项目

如果你有 Node.js 的运行环境或 npm ，那就非常简单了。

作为 Node.js 的忠实支持者，我强烈建议你学习和使用它，这对于你使用 Docusaurus v2 也会有非常显著的帮助。

使用 shell 输入命令：

bash

npx @docusaurus/init@latest init [name] [template]

如：

bash

npx @docusaurus/init@latest init my-website classic

当然你直接复制项目文件也是可以的。

下载安装完成后，会得到如下的文件结构:

directory structure

my-website
├── blog
│   ├── xxx.md
│   └── ...
├── docs
│   ├── xxx.md
│   └── ...
├── src
│   ├── css
│   │   └── custom.css              // 网站部分样式，可以修改主体颜色
│   └── pages
│       ├── styles.module.css
│       └── index.js                // 网站默认主页
├── static
│   └── imgs
├── docusaurus.config.js            // 网站的配置文件，常用的设置在这里修改
├── package.json                    // 项目的依赖，如果要更新版本修改这里
├── README.md
├── sidebars.js                     // Docs界面的侧边栏配置
└── yarn.lock

致非前端程序员

如果你对于界面或其他功能没有需求的话，那么其实你已经不太需要太多的改动了。你只需要在 blog 与 docs 中添加你编写的 markdown 文件即可。

个性化 🎨

如果对界面功能等方面有其他需求，可以在 index.js 与 docusaurus.config.js 或其他文件中添加修改，这个过程需要 Node.js、React 和其他网页技术的基础，请根据自己的能力进行操作。

立个 flag，后续增加点介绍。

本地预览

这不是一个必须项。

单纯下载了项目是无法看到网页的。

首先你需要下载项目依赖，在项目的文件夹内部：

npm install

随后你可以运行项目，默认在本地 3000 端口进行预览。

npm start

无法热更新的情况

如果你是更新了 docusaurus.config.js 或其他一些文件，那么你很可能需要重新运行项目，并最好也刷新页面缓存。

运行发布

有服务器

与前面预览一致，将项目布置于服务器，作为一个 Web 服务端程序，项目运行后即可通过 url 进行访问。

其他操作，如域名等，具体过程与常规网站类似，不再赘述。

无服务器

Vercel

我个人推荐在 Vercel 中直接导入 Github 项目，导入后会作为项目的 depolyment 自动进行部署。

Vercel 真香！🥳

免费无需服务器无需本地运行环境支持自定义域名

支持 Github 项目导入适配多种网站模板随心控制网站版本

可直接访问，不需要技术手段

注册 Vercel 与 Github 账户；
在 Github 中新建项目，与本地的项目进行同步；
在 Vercel 中绑定 Github 账户，新建项目并选择导入；
设置项目的相关属性，如自定义域名；
在本地修改完成 Docusaurus 项目后，使用 git 同步到 Github；
等待一段时间（约1分钟），如果没有问题就可以直接访问了；
后续要更新时，直接修改项目后使用 git 同步到 Github 即可， Vercel 会自动进行部署更新。

经过个人验证，这是最简单高效的方式（其他类似的 Serverless 服务亦可），强烈推荐！
如果你对于 Node.js 与 React 足够熟悉，你完全可以在本地只保留项目源文件而无需运行环境；
在基础的配置完成后，你可以将精力集中于你的文字内容本身！

github.io

作为常用的个人博客地址，github.io 可以提供免费的域名服务。

Docusaurus v2 的官方文档中说明了如何在 github pages 进行发布，你可以查看进行参考。

我姑且还是试了一下，中间有一些小问题，简单提一下，仅供参考。

你需要 Node.js 的运行环境，并且要下载 Docusaurus v2 运行的各种依赖；
如果你的网络环境不好或者基础不够可能会浪费很多时间！

常规的配置修改可能如下：

docusaurus.config.js

module.exports = {
    // ...
    url: 'https://your_name.github.io', // Your website URL
    baseUrl: '/your_project_name/',
    projectName: 'your_project_name',
    organizationName: 'your_name',
    // ...
};

修改完成后使用命令进行 deploy；

如果你想要直接通过 https://your_name.github.io 访问你的网页，那么 baseUrl 使用 '/' 即可；
紧接上一条，直接通过 https://your_name.github.io 访问，那么你的 github.io 项目的源代码分支不能使用 master ，因为源代码 bulid 完成将会 deploy 在 master 分支上；
由于不可抗力，github.io 的发布较慢（传输+服务器部署），并且存在访问失败的可能性；
如果页面总是显示 README.md 的内容或者 404，可以考虑修改静态网页的内容到分支 gh-pages 。

我个人是把 github.io 的页面弄成自动跳转的说🤪~

Website update history

2021-09-12 feature: style big update 🎨

2021-02-06 new section: exprerience 📄

2021-01-06 new section: chaos 📄

2020-10~2021-01 bug fixs & style update 🎨

2020-09-18 welcome.md upload 📄

2020-08~2020-09 feature: website personalization ✨

2020-05-24 Welcome to IceyBlackTea's website! ✨

最后

随手写点介绍，就不贴图片了。

强迫症犯了给自己改麻了🤡!

大家感兴趣都可以试试哦!简单高效，强烈推荐！❤️

如果有其他问题，可以在我的 github.io 项目的 issue 留言，欢迎提问～

感谢观看！Thank you for watching！

写在前面​

下载项目​

致非前端程序员

个性化 🎨

本地预览​

更多命令

无法热更新的情况

运行发布​

有服务器​

无服务器​

Vercel​

Vercel 真香！🥳

github.io​

Website update history​

最后​

写在前面

下载项目

本地预览

运行发布

有服务器

无服务器

Vercel

github.io

Website update history

最后