博客 / 詳情

返回

git平台docsify佈署markdown文件

git平台docsify佈署markdown文件

本地安裝

docsify 可以快速幫你生成文檔網站。不同於GitBook、Hexo的地方是它不會生成靜態的 .html 文件,所有轉換工作都是在運行時。

// 首先安裝node
https://gitlab.com/xuyq123/mynotes/-/blob/master/%E5%85%B6%E4%BB%96/nodejs%20&%20vue.md

// 安裝docsify
npm i docsify-cli -g   

docsify --version

// 初始化docsify項目
docsify init ./test

// 運行
docsify serve docs

http://localhost:3000
 
教程
https://docsify.js.org/#/zh-cn/quickstart
https://www.jianshu.com/p/4883e95aa903
https://marked.js.org/demo/


修改主題
index.html  
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify/themes/vue.css">
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify/themes/buble.css">
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify/themes/dark.css">
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify/themes/pure.css">
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify/themes/dolphin.css">


給每個頁面的末尾加上 footer
window.$docsify = {
  plugins: [
    function(hook) {
      var footer = [
        '<hr/>',
        '<footer>',
        '<span><a href="https://github.com/QingWei-Li">cinwell</a> &copy;2017.</span>',
        '<span>Proudly published with <a href="https://github.com/docsifyjs/docsify" target="_blank">docsify</a>.</span>',
        '</footer>'
      ].join('');

      hook.afterEach(function(html) {
        return html + footer;
      });
    }
  ]
};

gitlab佈署docsify

1、創建 .gitlab-ci.yml
2、創建docs目錄,將markdown文件放在此處。推送文件。
3、推送文件。

可參考此項目  
https://gitlab.com/xuyq123/plain-docsify   
https://xuyq123.gitlab.io/plain-docsify 

多級頁面可參考  
https://gitlab.com/xuyq123/myblog-docsify   
https://xuyq123.gitlab.io/myblog-docsify 
.gitlab-ci.yml
image: ruby:alpine

stages:
- deploy

pages:
  stage: deploy
  script:
  - cp -r docs/. public
  - echo "deploying to pages for note"
  environment:
    name: note
    url: https://xuyq123.gitlab.io/plain-docsify
  artifacts:
    paths:
    - public
  only:
  - master

github佈署docsify

1、本地生成 docsify項目

// 初始化docsify項目
docsify init ./test

// 運行
docsify serve docs

2、推送文件。

3、開啓github pages 
位置:Setting - GitHub Pages - Save  
選擇對應目錄。

後期更新文件,只需推送即可。

可參考此項目 
https://github.com/scott180/myblog-docsify/   
https://scott180.github.io/myblog-docsify/

gitee佈署docsify

在對應的 Gitee 倉庫服務中選擇 Gitee Pages,選擇您要部署的分支,填寫您要部署的分支上的目錄,
例如docs,填寫完成之後點擊啓動即可。

示例

名稱 倉庫 備註
plain-docsify gitlab plain-docsify  網頁 <br/>github plain-docsify  網頁 筆記docsify
myblog-docsify gitlab myblog-docsify  網頁 <br/>github myblog-docsify  網頁 筆記與博客docsify
user avatar
0 位用戶收藏了這個故事!

發佈 評論

Some HTML is okay.