# docker部署搭建docsify个人技术博客

爱捣鼓的王先生
582 阅读4分钟

准备工作

  • docsify依赖node.js环境，必须先检查是否安装node.js

检查命令如下：

# 已安装，会显示node.js版本
node -v

如果未安装，使用 Ubuntu、 Debian（Node.js 23）安装命令如下：官网的安装方式有点一言难尽，可以使用NodeSource脚本安装

# 开始之前，请确保curl您的系统上已安装。如果curl没有安装，您可以使用以下命令进行安装：
sudo apt-get install -y curl

# 下载安装脚本：
curl -fsSL https://deb.nodesource.com/setup_23.x -o nodesource_setup.sh

# 使用 sudo 运行安装脚本：
sudo -E bash nodesource_setup.sh

# 安装 Node.js：
sudo apt-get install -y nodejs

# 验证安装：
node -v
  • 如果你跟我一样部署在群辉nas,那就很方便了，套件中心直接搜node.js, 安装最新版即可！

创建文件夹

*** 在群辉nas中任意位置创建一个"docsify"文件夹，用来存放docsify所有的文件数据.***

在docsify文件夹中，再次创建以下三个文件 index.html、 Dockerfile 、 README.md

注意：三个文件名称、后缀名、字母大小写均不可修改

  • 先创建一个txt文本文档，把以下内容复制进去，最后把txt文档名称跟后缀名重命名为“index.html”
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="description" content="Description">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
  <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify@4/lib/themes/vue.css">
</head>
<body>
  <div id="app"></div>
  <script>
    window.$docsify = {
      name: '',
      repo: ''
    }
  </script>
  <!-- Docsify v4 -->
  <script src="//cdn.jsdelivr.net/npm/docsify@4"></script>
</body>
</html>
  • 先创建一个txt文本文档，把以下内容复制进去，最后把txt文档名称跟后缀名重命名为“Dockerfile”
FROM node:latest
LABEL description="A demo Dockerfile for build Docsify."
WORKDIR /docs
RUN npm install -g docsify-cli@latest
EXPOSE 3000/tcp
ENTRYPOINT docsify serve .
  • "README.md"这是一个markdown文档，你写入的内容就是你博客的内容！

打开终端并连接群辉nas，运行一下代码，构建docker镜像

  • 构建 docker 镜像，docsify项目服务器在国外，构建过程中如果遇到网络问题，需要你自己解决一下

    打开终端后，cd到 "docsify"文件夹目录下，运行以下命令，其中镜像名：“docsify/demo”可自定义

docker build -f Dockerfile -t docsify/demo .

  • 运行 docker 镜像

    默认端口号是3000，可以修改成其他空闲端口，比如：1234端口，可以修改成1234:3000

docker run -itp 3000:3000 --name=docsify -v $(pwd):/docs docsify/demo

访问更新博客

  • docker容器启用成功后，浏览器输入IP:3000就可以访问博客了，展现的内容就是README.md文档中的内容

  • 更新博客，就更新README.md文档中的内容就OK

docsify博客的进阶设置

docsify的主题、导航侧边栏等设置，是靠读取各种markdown文档中的配置来达成的，还需要一点html前端的一些知识

所以，如果你想修改这些东西，我这边还是建议使用之前介绍过的halo博客，在后台中简单的点几下鼠标就能实现，并且主题很炫酷！

听到这里的，你还是想试一试的话，那么我提供一些常规的HTML代码设置供你们参考

  • 以下内容，直接复制粘贴到 index.html文件中，替换原有的html内容。需要你们修改的地方已经注释，按照自己情况的修改
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- 浏览器图标后面的网站名称 -->
    <title>王先生的技术博客</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="description" content="Description">
    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <!-- 设置浏览器图标，其中的1.png替换成你们自己的站点图标，也可以是.icon图标 -->
    <link rel="icon" href="/1.png" type="image/x-icon" />
    <link rel="shortcut icon" href="/1.png" type="image/x-icon" />
    <!-- 默认主题，官网一共四种主题，如果有需要，把下面的替换掉就行 -->
    <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify/lib/themes/vue.css" />
</head>

<body>
    <!-- 定义加载时候的动作 -->
    <div id="app">加载中...</div>
    <script>
        window.$docsify = {
            // 项目名称，它会显示在侧边栏最上边
            name: '💖王先生💖',
            // 仓库地址，点击右上角的Github章鱼猫头像会跳转到此地址，如果没有需要可以留空
            repo: '',
            // 侧边栏支持，默认加载的是项目根目录下的_sidebar.md文件
            loadSidebar: true,
            // 导航栏支持，默认加载的是项目根目录下的_navbar.md文件
            loadNavbar: true,
            // 封面支持，默认加载的是项目根目录下的_coverpage.md文件
            coverpage: true,
            // 最大支持渲染的标题层级
            maxLevel: 5,
            // 自定义侧边栏后默认不会再生成目录，设置生成目录的最大层级（建议配置为2-4）
            subMaxLevel: 4,
            // 小屏设备下合并导航栏到侧边栏
            mergeNavbar: true,
            /*搜索相关设置*/
            search: {
                maxAge: 86400000,// 过期时间，单位毫秒，默认一天
                paths: 'auto',// 注意：仅适用于 paths: 'auto' 模式
                placeholder: '搜索',              
                // 支持本地化
                placeholder: {
                    '/zh-cn/': '搜索',
                    '/': 'Type to search'
                },
                noData: '找不到结果',
                depth: 4,
                hideOtherSidebarContent: false,
                namespace: 'Docsify-Guide',
            }
        }
    </script>
    <!-- docsify的js依赖 -->
    <script src="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script>
    <!-- emoji表情支持 -->
    <script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/emoji.min.js"></script>
    <!-- 图片放大缩小支持 -->
    <script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/zoom-image.min.js"></script>
    <!-- 搜索功能支持 -->
    <script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/search.min.js"></script>
    <!--在所有的代码块上添加一个简单的Click to copy按钮来允许用户从你的文档中轻易地复制代码-->
    <script src="//cdn.jsdelivr.net/npm/docsify-copy-code/dist/docsify-copy-code.min.js"></script>
</body>

</html>
  • 上面HTML代码中加载的markdown文档列表如下，需要创建并上传到"docsify"文件夹！
基础配置项（入口文件）index.html
封面配置文件_coverpage.md
侧边栏配置文件_sidebar.md
导航栏配置文件_navbar.md
主页内容渲染文件README.md
浏览器图标favicon.ico、favicon.png
  • 封面文档：_coverpage.md文档示例
<!-- _coverpage.md -->

# 王先生的个人知识库

> 💪方便自己查阅，使用Typora+Docsify打造最强、最轻量级的个人知识库。

 简单、轻便 (压缩后 ~21kB)

- 无需生成 html 文件
- 众多主题

[开始使用 Let Go](/README.md)

Snipaste_2024-11-18_15-54-37.png

  • 自定义侧边栏后默认不会再自动生成目录，需要读取_sidebar.md文档中的内容，示例如下：
<!-- _sidebar.md -->

* 博客搭建
  * [halo博客搭建](/blog/halo安装.md)<!--注意这里是相对路径-->
  * [个人知识库搭建](/blog/docker部署搭建docsify个人技术博客.md)
* 网络环境部署
  * [办公网络环境部署](/blog/网络环境搭建.md)

Snipaste_2024-11-18_16-27-36.png

  • 封面中的导航栏个人链接设置，_navbar.md文档示例，下面的括号中填写自己的联系地址地址。
<!-- _navbar.md -->

* 联系方式
  * [我的博客](https:\\blog.zcyan.cn)
  * [Github地址]()
  * [知乎地址]()
  * [掘金地址]()
  * [Gitee地址]()


* 友情链接
  * [Docsify]()
  * [博客园]()

Snipaste_2024-11-18_15-57-38.png

介绍到这里就结束了，大家发挥你们自己的创造力吧！

avatar
文章
阅读
粉丝