Docsify安装及个人博客搭建

最新推荐文章于 2025-07-08 13:38:28 发布

一只干巴巴的海绵

最新推荐文章于 2025-07-08 13:38:28 发布

阅读量4.3k

点赞数 4

CC 4.0 BY-SA版权

本文链接：https://blog.csdn.net/Hanx09/article/details/107316687

本文详细介绍如何通过安装Git和Node.js，配置环境变量，以及使用docsify-cli工具来搭建和部署个人博客到GitHub的过程。涵盖了从软件安装、环境配置到博客内容创建和预览的完整步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

安装Git

安装Node.js

nodejs官网下载地址，建议选择 Long Term Support (LTS) 长期支持版本：下载后一直next安装，本次安装地址在F:\nodejs。
查看版本信息：其中npm是Nodejs下的包管理器。

# 查看环境变量
C:\Users\dell> echo %PATH%
# 查看版本信息
C:\Users\dell> node -v
v12.18.2
C:\Users\dell> npm -v
6.14.5

在F:\nodejs新建两个文件夹node_global和node_cache，配置信息：

配置信息在目录C:\用户\dell\.npmrc（不同电脑有所不同）。
详细参考：npm安装教程

安装docsify

docsify 是一个动态生成文档网站的工具。不同于 GitBook、Hexo 的地方是它不会生成将 .md 转成 .html 文件，所有转换工作都是在运行时进行。

全局安装 docsify-cli 工具，可以方便创建及本地预览文档网站：

# cmd
npm i docsify-cli -g

编辑环境变量：脚本docsify.cmd在F:\nodejs\node_global，将该目录添加到环境变量

docsify搭建个人博客

1. 初始化文档

本地新建一个Blog文件夹，Shift+鼠标右键 $\Rightarrow$ Git Bash Here，输入命令：docsify init docs
执行完以上命令，会生成 docs 文件夹（注意这里的文件名约定为 docs 也是官方推荐，请按照规则设置），该目录下会生成以下 3 个文件：
- index.html：入口文件
- README.md：会做为主页内容渲染
- .nojekyll：用于阻止 GitHub Pages 会忽略掉下划线开头的文件
docs统计目录下运行 docsify serve docs 启动一个本地服务器，可以方便地实时预览效果。默认访问地址 http://localhost:3000 。

2. 搭建博客内容

设置封面

在 docs/index.html 文件中将设置 coverpage: true;
创建 docs/_coverpage.md文件：下面是封面-docsify中的示例。

<img src="test_resize.jpg" alt="logo" style="zoom: 33%;" />

# docsify <small>3.5</small>

> 一个神奇的文档网站生成器。

- 简单、轻便 (压缩后 ~21kB)
- 无需生成 html 文件
- 众多主题

[GitHub](https://github.com/docsifyjs/docsify/)
[Get Started](#docsify)

![color](#AFEEEE)

在这里插入图片描述

定制导航栏

定制导航栏-docsify给出两种方式：

HTML：文档的链接都要以 #/ 开头。

<!-- index.html -->

<body>
  <nav>
    <a href="#/">EN</a>
    <a href="#/zh-cn/">中文</a>
  </nav>
  <div id="app"></div>
</body>

配置文件：
- 在index.html配置loadNavbar: true，
- 新建文件 _navbar.md用于配置导航栏。

<!-- _navbar.md -->
* 机器学习
  * LR
  * SVM
  * DT
* 深度学习
* NLP
* CV

3. 部署到GitHub

GitHub新建一个repositories

在这里插入图片描述

将本地项目推送到GitHub

本地Blog目录下，打开Git，输入命令：git init。初始化本地仓库Blog。
将文件添加到仓库并提交：
本地仓库关联远程仓库：

git remote add origin git@github.com:YourName/Blog.git

将本地库推送到远程库：

git push -u origin master

开启 GitHub Pages 功能

在GitHub仓库，打开settings，有一个Github Pages 的设置，GitHub Pages 支持从三个地方读取文件

docs/ 目录
master 分支
gh-pages 分支

这里将文档放在 docs/ 目录下，在设置页面开启 GitHub Pages 功能并选择 master branch /docs folder 选项。
在这里插入图片描述
打开给出的网页即可看到搭建的网页。

更多设置学习docsify教程

Docsify快速搭建个人博客
 在github上建立自己的网站