文檔博客

怎麼玩的,直接參考 vuepress 文檔吧, 可以木事總結一些知識點,或者轉載,每日反覆翻看幾遍,如沐浴春風般溫暖,不扯其它了,簡單寫寫自己搭建的模板怎麼部署到 github 的靜態頁面, 由於git訪問比較慢,所以最後會搬到碼雲上邊,那速度,飛一般的感覺....

先搭建模板吧,

node環境, vuepress環境就不說了,直接參考文檔

小弟現下使用的是: reco 這個版本, 我替雜南打個廣告, 記得廣告費

老慣例一步步來, 最怕一篇文章寫完了,讀者看完了,來一句,艹,他媽的,傻逼玩意,寫的毛啊, 哈哈, 這就失去了,寫博客的意義, 博客不適合寫原理, 想寫原理去掘金,知乎啊 .大佬多, 文采排版好一點, 好多大佬會幫你斧正問題, 幾天上完閱讀量,還是沒有問題的, 不過這些前提就是肚子裏待有墨水, 所謂,要想生活過的去, 木事就帶用點綠,不廢話了,開擼

1. 進入github,點擊 new,創建倉庫

2. 進入創建頁面, 寫你的倉庫名,這些寫完,最後點擊 create 按鈕,會進入當前倉庫頁

3. clone 當前倉庫,選擇用 ssh 的,有讀寫權限, https 沒有寫的權限

注: 不能克隆的,去點擊右上腳頭像, 找到倒數第二個 setting,在這裏添加你當前電腦上的祕鑰, 沒有的就自己生成一下

4. 再桌面上克隆倉庫

終端採用的是 cmder, 自帶git, 喜歡的小夥伴可以去試試, 這個終端還是很棒的,

5. 克隆後按下列執行, 初始化package.json 腳本, 安裝vuepress, 和 vuepress-theme-reco 皮膚到生產依賴

# git clone 倉庫地址

# cd 項目目錄

# npm init -y 

# yarn add vuepress vuepress-theme-reco

6. 根目錄下新建一個 docs文件, 在docs 文件夾下,新建 README.md文件,如下操作

# mkdir docs

# cd docs

# touch README.md

在 README.md 文件中寫入下邊一句話(這是markdown語法)

# Hello Vuepress

到現在最後目錄是:

7. 配置啓動腳本,再package.json 中的 scripts 中

  "scripts": {
    "start": "vuepress dev docs",
    "build": "vuepress build docs"
  },

8. 執行npm start 啓動項目....,啓動完成,打開下邊的地址,看到下邊這個頁面了

9. 接着配置vuepress, 再docs 文件夾下創建如下目錄,config.js 是配置文件, puclic 文件夾是存放靜態資源的,如圖片等

config.js導出一個對象,如下, 關於具體配置,參考, 配置文檔, 主題配置參考 reco, 就不做多贅述了

module.exports = {
  title: 'demo模板',
  description: '我的第一個',
  markdown: {
    lineNumbers: true
  },
  theme: 'reco', // 使用皮膚
  themeConfig: {
    nav: [{ text: '主頁', link: '/', icon: 'reco-home' }],
    version: '1.0'
  },
  plugins: []
}

10. 重啓項目...,看到如下

11. 部署到到 github 靜態頁面,

1. 首先去你的倉庫, 把倉庫名拷貝一下

2. 打開 docs 下的 config.js 文件,配置base屬性, 名字就是的你的倉庫名, 記得帶上雙 / /
module.exports = {
  base: '/demo-vue-press/',
  title: 'demo模板',
  description: '我的第一個',
  markdown: {
    lineNumbers: true
  },
  theme: 'reco',
  themeConfig: {
    nav: [{ text: '主頁', link: '/', icon: 'reco-home' }],
    version: '1.0'
  },
  plugins: []
}
3. 配置自動打包腳本,再根目錄下新建 deploy.sh (叫啥名字無所謂,但必須.sh 作爲文件名),把下邊的內容寫入進去,

記得把這個換成你自己的地址:

以下配置是自動打包,然後把打包的文件傳到倉庫的 gh-pages 分支, 記得換成自己的倉庫地址
#!/usr/bin/env sh

# 確保腳本拋出遇到的錯誤
set -e

# 生成靜態文件
npm run build

# 進入生成的文件夾
cd docs/.vuepress/dist

git init
git add -A
git commit -m 'deploy'

# 如果發佈到 https://<USERNAME>.github.io/<REPO>
git push -f [email protected]:frontend-qin/demo-vue-press.git master:gh-pages

cd -
4. 到這裏後,接着執行這個腳本

你可以直接把這個腳本拖拽到終端裏執行, 也可以再vscode 的終端裏,直接輸入命令執行這個文件

輸入完之後,點擊確定 (Enter鍵), 會彈出git 窗口,如下, 等執行完之後, 這個窗口就會關閉, 切記前邊的倉庫地址步驟, 沒有錯誤,否則這裏是會執行報錯的

5. 打開你的倉庫頁面,刷新一下,點擊分支, 會看到一個gh-pages 分支,此時切換到這個分支, 會看到靜態文件的

6. 點擊倉庫的 setting

7. 進入這個頁面,下拉找到 GitHub Pages, 會看到有個地址,把分支選擇 gh-pages 分支

8. 點擊這個地址,就是你剛纔的頁面了

9. 賦值這個地址,放到倉庫頁展示, 點擊倉庫,回到倉庫頁面, 點擊 edit 編輯,把地址放到後邊, 保存,到這裏基本結束了