Docsify的网站搭建和自动部署

977 阅读2分钟

「这是我参与2022首次更文挑战的第26天,活动详情查看:2022首次更文挑战」。

网站的搭建

搭建步骤:

  1. 本地搭建
  2. GitHub部署
  3. 网站加速
  4. 自动提交部署

首先进入官网:点击

首先需要安装的环境:

安装完成后查看:

image-20220209214545756

全局安装docsify-cli工具:可以方便地创建及在本地预览生成的文档。

npm i docsify-cli -g

image-20220209215609493

创建文件夹进行初始化:

image-20220209214755169

初始化成功后,可以看到 DocsifyBlog目录下创建的几个文件

  • index.html 入口文件
  • README.md 会做为主页内容渲染
  • .nojekyll 用于阻止 GitHub Pages 忽略掉下划线开头的文件

直接编辑 DocsifyBlog/README.md 就能更新文档内容,当然也可以添加更多页面

本地进行预览:

docsify serve

image-20220209215724155

需要认识的文件以及其功能:

文件作用文件
基础配置项(入口文件)index.html
封面配置文件_coverpage.md
侧边栏配置文件_sidebar.md
导航栏配置文件_navbar.md
主页内容渲染文件README.md
浏览器图标favicon.ico

具体的配置可以参考官网

然后进行github的部署:

仓库的创建网上很多,可以参考下,这里不表了:

创建完成:

image-20220211211153858

接下来进行项目的上传:

进入到之前创建的本地文件中,然后进行git 初始化

git init

image-20220211212201979

查看下状态:

image-20220211212240226

进行git添加和提交:

git add "--all" 
git status 

image-20220211212822935

进行提交:

git commit -m "demo"

image-20220211212856880

添加远程仓库地址并进行提交:

git remote add origin https://github.com/xbhog/demo.git
git push -u origin master

部署完成后因为github访问比较慢,需要网站进行加速,这里我选择的是Netify;操作方法:点击进入

该网站的搭建自己录制了三个视频,对应的是docsify的本地搭建,GitHub远程部署和网站加速以及自动提交。

欢迎观看:

Docsify网站搭建和自动部署

docsify的github部署问题

Docsify网站的部署和加速

参考:

VS Code上传代码到Github链接地址:点击进入

docsify官网

Netify

Netify操作方法