Vuepress生成文檔部署到gitee.io注意事項

1.靜態(tài)資源要放在.vuepress/public目錄下，比如創(chuàng)建一個assets/img/目錄。把圖片文件放在目錄下面。

2.本地開發(fā)的時候，每次更新文件后，需要運行 vuepress dev .命令重新發(fā)布。

3.運行vuepress build .命令會編譯出來一個靜態(tài)文件的dist目錄。只要把這個目錄的東西push到gitee。

4.在gitee里創(chuàng)建一個新的倉庫。比如https://gitee.com/xxxxxx/repo.git倉庫的話，通過gitee pages服務(wù)會生成一個http://xxxxxx.gitee.io/repo的靜態(tài)文件網(wǎng)站。注意vuepress工程的config.js配置里必須配置base:'/repo/'設(shè)定基礎(chǔ)目錄。

追述：

1.#vuepress eject把默認theme下載到項目的目錄里。

這樣project\.vuepress\目錄下會多一個theme的目錄，里面是模板文件。 

 關(guān)鍵一：要創(chuàng)建一個package.json，

{
  "name": "vuepress-theme-xxx",
  "version": "1.4.3",
  "description": "a theme for vuepress",
  "main": "index.js"
}

里面定義這個模板的名稱，vuepress-theme-xxx

然后編輯index.js模板的入口文件，這里只要設(shè)定繼承默認模板就行了。其他開發(fā)模板參考vuepress官網(wǎng)

const path = require('path')
 
// Theme API.
module.exports =  {
  extend: '@vuepress/theme-default'
}

這樣，模板就搭建好了，修改模板就去改layouts目錄下的layout.vue和components目錄下的組件就可以。

3.使用

修改.vuepress目錄下的config.js，vuepress的入口文件。

module.exports = {
    theme:"xxx"  //這里因為前面模板配置里，package.json里定義的theme名為"vuepress-theme-xxx"，前面的vuepress-theme可以省略。
}

在gitee中部署VuePress博客問題

首先下載VuePress和博客主題

cnpm i vuepress @vuepress-reco/theme-cli –g 

進入文件夾“G:\GiteeRepositories”，并打開dos窗口

theme-cli init lijiang_blog #項目名
cd lijiang_blog 
cnpm i #安裝依賴
cnpm run dev #項目運行

（注意：這里有三種可以選，分別是blog，doc,和afternoon xxx，這里選擇blog就行。afternoon xxx這個是一個成熟的示例，需要的話可以單獨下載參考其代碼。doc和blog區(qū)別不大）

然后打包，注意，在打包之前，一定要在G:\GiteeRepositories\lijiang_blog\docs\.vuepress中的config.js中添加一行代碼，用來設(shè)置站點根路徑：

base: '/lijiang_blog/' #這里的“Lijiang_blog”為等會在gitee上創(chuàng)建的倉庫名

然后打包：npm run build

接著去碼云新建倉庫：https://gitee.com/projects/new

切記：倉庫名要小寫！！

gitee上創(chuàng)建倉庫后，再去本地磁盤初始化一個文件夾，再將此文件夾連接到gitee倉庫。

依次執(zhí)行以下的命令

git init
git remote add origin “剛剛創(chuàng)建的項目的http://gitee.com/xxx”
git add .
git commit –m ‘a(chǎn)sdf'
git push origin master –u

點擊啟動按鈕后，不到半分鐘就能部署好項目

這樣就可以訪問了。這是我部署的：http://lidajiang.gitee.io/lijiang_blog/

后面在本地添加文章后，將項目推送到gitee，點服務(wù)按鈕，在打開的頁面中點擊更新就行

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。 

最新評論