答应大家的建站教程！

哈喽，大家好，我是厨子。

之前个人博客上线时说，大家如果需要，后面会给大家写一下建站教程，所以今天它来了。

我做到了！

先给大家看一下网站封面，个人是非常喜欢的，记得高中下课后的娱乐项目之一就是，趴在桌子下面，用手机偷偷看灌篮高手，这个是真的好看，喜欢打篮球的哥们应该都看过这个动漫。

网站封面

好啦，废话不多说，开整。

建站的前置条件（网址在图片下面）

1.个人服务器，个人博客的话，不用买配置太高的，我的是 2c4g ，当然你也可以用 Github page，不过我个人建议还是自己买一个，不咋贵。

https://cloud.tencent.com/

2.服务器运维面板，我用的宝塔，个人认为非常好用。

https://www.bt.cn/

3.博客模版，当然你也可以自己写代码，我用的是 docsify。一个简约又不简单的网站模版。

https://docsify.js.org/

4.域名，可以在阿里云或者腾讯云自行购买，个人建议服务器和域名买一家的，备案认证时省事一些。

https://dnspod.cloud.tencent.com/?from=qcloudHpProductDns/

5.简要了解 MarkDown 语法，常用的段落标题等。

好啦，具备上述前置条件，则可以搭建个人网站啦，具体教程如下。

安装 node.js

这一步 docsify 官方文档没有提到，但是node.js是必须安装的，安装方式可以去官网看或者 CSDN 搜一哈就行，这一块就不进行详细介绍啦。在这里贴一下 node.js 的官方网站。

https://nodejs.org/en/

安装完成之后，可以使用 npm -v 查看版本号并检查一下是否安装成功。

安装 docsify-cli 工具

命令非常简单

npm i docsify-cli -g

然后你就能看到刷刷刷正在安装的面板，安装完成之后，可以使用 docsify -v查看版本号并查看是否安装成功。

则需要对其初始化，工程目录可以自行设定。

docsify init chengxuchu

好啦，初始化完成之后，网站就建好了，是不是很简单？

得了吧，你可别吹牛啦，输几行代码就建好网站啦？你忽悠谁呢？

不信你看，首先启动 docsify

本地预览

网站

是不是就把网站的框架就搭好啦？下面只需要对内容进行填充和美化即可。

首先打开其目录。

其中 index.html 文件可以对网站进行一些设定，安装某些插件（后面会详细介绍），或者自己进行编码对网站进行优化，README 则能够对网站主页进行渲染。

下面来对 README 进行修改并查看具体效果。

保存后本地预览

这样就完成了修改。

下面继续来看一下 index.html 文件内有哪些内容

其中 #app 会显示 loading... 内容，也就是加载网站时的内容，这一块可以自己定制。

window.$docsify 则为配置函数，初始情况如下。

  <script>
    window.$docsify = {
      name: '',
      repo: '',
    }
  </script>

name 代表网站内部名称，设置完成之后显示在网站侧边栏的上部。repo 设置导向链接，可以将其连接到 github。

下面来对 window.$docsify 中的常用属性进行详细介绍，并进行演示。

导航栏

我们通过设置 window.$docsify 中的loadNavbar 属性来设置导航栏。

window.$docsify = {
     themeColor: '#333333',
     name: ' 🧨 2022',
     repo: 'https://github.com/chefyuan/algorithm-base',
     loadNavbar: true, 
     }

将 loadNavbar 属性设置为 true，并新建 _navbar.md 文件,注意文件名中的 _ 不可以省略。之前再对 _navbar.md文件填充，效果如下

导航栏 1

导航栏 2

导航栏 3

导航栏 4

好啦，到这里，导航栏就完成啦，你可以根据实际需要，设置不同的导航栏数目。

侧边栏

我们发现上述页面中的侧边栏，是根据 md 文件中的标题生成，如果我们不想让其根据标题生成，而是通过自定义生成，则可以在指定的 md 文件中添加 # {docsify-ignore-all} 并在 window.$docsify 中添加 loadSidebar: true。具体实现方式如下

侧边栏 1

侧边栏 2

侧边栏 3

此时发现侧边栏中标题导航已经消失，此时如果想要自定义侧边栏导航的话，则需要新建 _sidebar.md 并在该文件中定义侧边栏内容，具体实现方式如下。

侧边栏 4

侧边栏 5

侧边栏 6

此时我们发现，当我们点进好运来时，侧边栏并没有随着文件的改变而改变，所以搭建网站时，可以根据实际需求，选择根据标题等级自动生成侧边栏，还是自定义。

如果选择自动是生成侧边栏，则可以使用 subMaxLevel: 来设计标题显示等级。

封面

网站封面大家可以根据自身喜爱来设置，封面对应文件为 _coverpage.md并在 window.$docsify 中加入 coverpage: true ，具体实现过程如下 。

封面 1

封面 2

封面 3

这样整理框架就完成的差不多啦，下面就可以在你的网站中填充你的文章啦，还有很多玩法可以自行开发一下。

下面给大家，介绍几个常用的插件，进一步完善网站。

插件

搜索功能

这个功能还是比较重要的，这样你就可以在网站中搜索内容，快速定位。

搜索

实现方式也非常简单，只需两步。1.在 body 中添加 JS 文件

<script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/search.min.js"></script>

2.修改 window.$docsify

<script>
     window.$docsify = {
     themeColor: '#333333',
     name: ' 🧨 2022',
     repo: 'https://github.com/chefyuan/algorithm-base',
     loadNavbar: true,
     loadSidebar: true,
     coverpage: true, // 设置封面
     onlyCover: true,
     search: {
        placeholder: '搜一下看看', // 搜索提示框文字， 支持本地化，例子在下面
        noData: '糟糕，没有发现目标，我尽快写！',
        depth: 6,                       // 搜索标题的最大程级, 1 - 6
        maxAge: 86400000, // 过期时间，单位毫秒，默认一天
      },
     } 
  </script>

字数统计

字数统计用来统计当前页面字数，实现也非常简单。

字数统计

只需要插入下面 js 文件即可

<script src="//unpkg.com/docsify-count/dist/countable.js"></script>

返回顶部

该功能也是经常使用的，当我们在阅读时，想要返回顶部阅读，滑动滚动条，是比较麻烦的，此时则可以直接点击返回顶部按钮，重新进行阅读。

实现起来也非常简单。

 <!-- 回到顶部功能 -->
  <script src="https://cdn.jsdelivr.net/gh/wugenqiang/NoteBook@master/plugin/jquery.js"></script>
  <script src="https://cdn.jsdelivr.net/gh/wugenqiang/NoteBook@master/plugin/jquery.goup.js"></script>
  <script type="text/javascript">
    $(document).ready(function () {
      $.goup({
        trigger: 100,
        bottomOffset: 52,
        locationOffset: 25,
        title: '回到顶部',
        titleAsText: true
      });
    });
  </script>
  <!-- mouse click -->
  <script src="https://cdn.jsdelivr.net/gh/forthespada/forthespada.github.io@master/plugin/click_heart.js"></script>

页脚

网站上线之后，要进行备案，所以可以在页脚放备案号，或者网站的简短介绍，具体效果如下。

实现起来也比较简单

只需要导入以下 JS 文件即可

<script src="https://cdn.jsdelivr.net/gh/wugenqiang/NoteBook@master/plugin/docsify-footer-enh.min.js"></script>

然后再在 window.$docsify 中添加 foot 来对内容进行修改

这下网站主要功能就算在本地搭建完成啦。

接下来则需要进行购买服务器，购买域名，域名备案，配置 DNS。这些内容较简单，大家可以去网上搜一下，但是需要注意的是，因为 Docsify 默认是 3000 端口，大家可以使用 docsify serve --port XXXX 命令使用指定端口。网站的维护和运营则可以使用宝塔来完成，真的挺不错。

好啦，今天就说这么多吧，如果你在网站的搭建过程中，遇到任何问题，都可以问我，希望这篇文章能够对你有一丢丢帮助。

另外该文章的代码，你需要的话，也可以找我要（哈哈，也没写几行代码）。

好啦，今天就唠到这吧，拜了个拜，我是厨子，一位酷爱做饭的程序员。

如果这篇文章对你有帮助的话，欢迎点赞，在看，转发呀，非常感谢。

推荐阅读：

https://interviewguide.cn/#/README

https://www.bilibili.com/video/BV1kT4y1T7wY?from=search&seid=6673917909777479241&spm_id_from=333.337.0.0