docsify & gitee 搭建个人博客

这篇具有很好参考价值的文章主要介绍了docsify & gitee 搭建个人博客。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

docsify & gitee 搭建个人博客

1.npm 安装

npm是Node.js的包管理器,用于安装和管理JavaScript包。要安装npm,需要先安装Node.js。以下是在不同操作系统上安装npm的步骤:

1.1 在Windows上安装npm:

  1. 访问Node.js官方网站(https://nodejs.org)。
  2. 在下载页面上,选择适用于Windows的LTS版本(长期支持版本)的Node.js安装程序。
  3. 下载安装程序并运行它。
  4. 在安装过程中,确保选中"npm package manager"选项。
  5. 完成安装后,打开命令提示符或PowerShell,并运行npm -v命令,确认npm已成功安装。

1.2 在macOS上安装npm:

  1. 打开终端应用程序。
  2. 使用Homebrew包管理器安装Node.js。运行以下命令:
  brew install node
  1. 完成安装后,运行npm -v命令,确认npm已成功安装。

1.3 linux 安装npm

在Linux上安装npm:

  1. 打开终端。
  2. 使用包管理器安装Node.js。根据你使用的Linux发行版,运行以下命令之一:
  • Debian/Ubuntu:
	sudo apt-get install nodejs npm
  • Fedora:
    sudo dnf install nodejs npm
  • CentOS/RHEL:
     sudo yum install nodejs npm

安装完成后,你可以使用npm install 命令来安装JavaScript包。例如,要安装名为"lodash"的包,可以运行npm install lodash命令。

2. docsify

2.1 安装docsify

# 安装 docsify-cli
npm i docsify-cli -g
# 初始化项目
docsify init ./docs
# 发动项目
docsify serve docs

docsify & gitee 搭建个人博客,gitee

docsify & gitee 搭建个人博客,gitee

docsify & gitee 搭建个人博客,gitee

http://localhost:3000/#/ 成功截图:

docsify & gitee 搭建个人博客,gitee

2.2 自定义配置

2.2.1 通过修改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>

2.2.2 顶部导航栏和侧边栏

   window.$docsify = {
       name: '东小西', // 侧边栏顶部显现的称号
       repo: 'https://gitee.com/chen_1953981601', // 右上角Github图标链接,这是例子,需要具体换为自己的
       loadNavbar: true, // 默许加载 _navbar.md,作为顶部导航栏
       loadSidebar: true // 默许加载 _sidebar.md,作为侧边栏
    }
2.2.3 新建 _navbar.md 文件
- [**目录**](README.md)
  - [**环境安装**](source/env/env.md)
  - [**编程相关学习**](source/books/books.md)
  - [**人工智能**](source/DL/DL.md)
  - [**工程部署相关问题**](source/project/project.md)
  - [**相关开源工具**](source/openTech/openTech.md)
  - **论文阅读笔记**
* [**文章集合**](paper/README.md)
2.2.4 侧边栏设置
 window.$docsify = {
       name: '东小西', // 侧边栏顶部显现的称号
       repo: 'https://gitee.com/renxiaoshi', // 右上角Github图标链接
       loadNavbar: true, // 默许加载 _navbar.md,作为顶部导航栏
	   loadSidebar: true, // 默许加载 _sidebar.md,作为侧边栏
	   subMaxLevel: 3, // 目录的最大层级
    }
2.2.5 全文检索
  window.$docsify = {
       name: '东小西', // 侧边栏顶部显现的称号
       repo: 'https://gitee.com/c_1953981601', // 右上角Github图标链接
       loadNavbar: true, // 默许加载 _navbar.md,作为顶部导航栏
	   loadSidebar: true, // 默许加载 _sidebar.md,作为侧边栏
	   subMaxLevel: 3, // 目录的最大层级
	   search: {
        paths: 'auto',
        placeholder: '检索',
        noData: '没有找到喔!',
        depth: 3,
      },
    }
  <!-- 检索插件 -->
  <script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/search.min.js"></script>
2.2.6 一键仿制插件
 <!-- 一键仿制插件 -->
  <script src="//cdn.jsdelivr.net/npm/docsify-copy-code"></script>
2.2.7 代码高亮
<!-- 代码高亮 -->
  <script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-bash.min.js"></script>
  <script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-c.min.js"></script>
  <script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-json.min.js"></script>
  <script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-shell-session.min.js"></script>
  <script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-python.min.js"></script>
  <script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-http.min.js"></script>
  <script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-java.min.js"></script>
2.2.8 代码高亮
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify/themes/dark.css">
2.2.9 自定义封面

window.$docsify 中添加 coverpage: true,默许会加载 _coverpage.md。

新建_coverpage.md文件,内容如下:

# Blogs for SWPUCWF


> 如果不是为了让她哭,那么卷人又有什么意义?

[CSDN](https://blog.csdn.net/weixin_42917352?spm=1000.2115.3001.5343)

email: swpucwf@126.com

[滚动鼠标](#)

3.gitee 搭建库

Gitee Pages服务,代码托管网站将用户的库房文件以网页方式发布。

docsify & gitee 搭建个人博客,gitee

4 设置Github Pages

Settings 中的 GitHub Pages 中选择 docs 文件夹,点击保存,即可发布刚刚的文档网站。文章来源地址https://www.toymoban.com/news/detail-654234.html

到了这里,关于docsify & gitee 搭建个人博客的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 搭建个人博客详细教程

    由于国外的github page访问总是非常慢的,本文选择国内开源代码托管平台码云,因而可以在国内搭建访问与SEO检索都优于GitHub的个人网站。自己亲手勉强搭起个人博客,首先感谢木千之博主的详细教程,给了清晰的思路,写下这篇博客将详细过程记录,希望帮助更多的人,减

    2023年04月08日
    浏览(45)
  • ❤ 个人博客的搭建和设置

    闲暇时候自己试着做了一个自己的个人博客,博客使用的Github进行托管,还在阿里云买了属于自己的域名 具体步骤如下 git --version 4、进入自己想要搭建的放在Github的文件夹 一、clone仓库到本地 git clone 自己的代码仓库地址 git clone 你的代码仓库地址 二、添加自己的东西到文件

    2024年02月03日
    浏览(91)
  • Hexo搭建个人博客(github)

    记录搭建个人博客的过程 本文使用Hexo+GitHub Page的方法搭建博客,下面是环境准备的步骤,包括nodejs的安装和git的安装(注:本教程仅适用于windows用户) 详情请参考这篇博客: NVM的安装使用与配置(node, npm, yarn 为了把本地的网页上传到git上,需要在系统上下载git,详情参考

    2024年02月21日
    浏览(49)
  • 如何使用Github搭建个人博客

    在本文中,我将介绍如何使用GitHub搭建个人博客( 免费 )。GitHub是一个功能强大的版本控制和协作平台,它也可以用来托管和发布静态网页。通过将你的个人博客托管在GitHub上,你可以享受到版本控制的好处,并且能够与其他开发者进行协作。 在GitHub官网上创建一个账号,

    2024年02月15日
    浏览(46)
  • 基于Hugo 搭建个人博客网站

    目录 1.环境搭建 2.生成博客 3.设置主题 4.将博客部署到github上 1)安装Homebrew brew是一个在 macOS 操作系统上用于管理软件包的包管理器。类似于centos下的yum或者ubuntu下的apt,它允许用户通过命令行安装、更新和管理各种软件工具、库和应用程序。 前往hb官网,复制下载命令,打

    2024年02月09日
    浏览(47)
  • 使用 腾讯云搭建一个个人博客

    腾讯云:CPU: 2核 内存: 4GB系统盘60GB (带宽:6Mbps) LNMP:1.5 WORDPRESS:5.92 一个专属的域名 买了服务器后,你就会拥有一个公网ip,如果网站搭建起来了,你完全可以使用这个 ip 去访问,但仅供开发、测试使用。 如果要真正运营起来,想要有流量,还得搞一个域名,方便你推

    2023年04月08日
    浏览(31)
  • 新手利用hexo在Gitee搭建第一个博客网站(2023巨细)

    在Gitee搭建个人博客网站之前我们需要做一些准备:注册好Gitee,安装visual studio code(功能齐全,实用),安装node.js。 这些我都会一 一介绍。 Gitee是开源中国(OSChina)推出的基于Git的一款开源的源代码管理和协作平台,类似于GitHub和GitLab。Gitee提供了Git仓库托管、代码托管、代

    2024年02月09日
    浏览(49)
  • 建站神器:Hexo+Kaze+Gitee Pages 搭建静态博客网站

    建网站本身是一个很大的工程,涉及前端页面的搭建,网站数据的存储,还要购置服务器资源,甚至是后期的维护,过程相当繁琐。 不过如果仅仅是想搭建个人的网站,写写博客,想要美观,又不想操心太多和写博客无关的事情。那么,Hexo + Kaze + Gitee Pages 的方式就很适合你

    2024年01月19日
    浏览(84)
  • 10分钟搭建一个免费个人博客网站

    准备工作 有Gitee账号 有安装git 会 markdown 编写文档 Node.js 版本 = 8.6 博客采用VuePress搭建,Gitee部署,接下来,5步搞定。 1.创建项目 创建项目目录,并初始化项目,安装VuePress 2. 创建目录结构 3.完成基础配置 配置主题,定义自己的导航栏 配置首页 在 myblog/package.json 中添加一些

    2024年02月09日
    浏览(55)
  • 使用 Github、Hugo 搭建个人博客

    Hugo 静态网站构建手册:https://jimmysong.io/hugo-handbook/ :开源 博客 框架   官网:https://pages.github.com/ 文档:https://docs.github.com/zh Websites for you and your projects. (为你的项目提供网站)。 GitHub Pages 是通过 GitHub 托管和发布的公共网页。Github Pages 本质上是一个静态网站托管系统

    2024年01月16日
    浏览(76)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包