vuepress 搭建博客 (一)

vuepress 搭建博客

一、環境準備

node 環境

下載安裝 node，必須 Node.js 版本 >= 8 nodejs.org/zh-cn/downl…

vuePress

# 安裝
yarn global add vuepress # 或者：npm install -g vuepress
複製代碼

二、初始化項目

項目基本配置

初始化文件夾

npm init -y 或 yarn init -y
複製代碼

新建一個文章目錄，存放文章等靜態資源，而且咱們須要針對每篇文章，每一個模塊進行配置，使用戶可以方便導航，查看文章

在文檔目錄下面建立一個 docs, 而後在 docs 中建立一個 .vuepress 文件夾，裏面再建立一個 config.js 配置文件

項目結構以下

.
├─ docs
│  ├─ README.md
│  └─ .vuepress
│     └─ config.js
└─ package.json
複製代碼

在 VuePress 網站中，必須的配置文件是 .vuepress/config.js，它須要導出一個 JavaScript 對象：

module.exports = {
  title: 'Z 空間',
  description: '原始社會的一個碼農，自我覆盤的老巢'
}
複製代碼

此時項目能夠在本地運行了，vuepress 有兩條命令

vuepress dev docs // 運行在本地
vuepress build docs // 打包
複製代碼

咱們修改命令，在 page.json中新增腳本

"scripts": {
    "dev": "vuepress dev docs",
    "build": "vuepress build docs"
  }
複製代碼

此時咱們運行

npm run dev
複製代碼

項目便可運行在本地 http://localhost:8080/

個人是這樣

導航配置

博客必定會有導航，否則咱們只有一個頁面，一篇文章給用戶看，不符合咱們愛寫文章裝 x 的屬性，因此弄點導航出來 在 .vuepress/config.js中，新增如下內容

themeConfig: {
  nav: [{ text: '前端', link: '/fore-end/' }, { text: '其它', link: '/other/' }]
}
複製代碼

這樣就添加了兩個導航，前端 和 其它

此時也要爲這兩個導航新建兩個文件夾，而且分別建立 README.md 文件

此時文件結構以下

.
├─ docs
│  ├─ README.md
│  └─ .vuepress
│     └─ config.js
│  ├─ images
│  ├─ fore-end
│     └─ README.md
│  ├─ other
│     └─ README.md
└─ package.json
複製代碼

這樣點擊導航能夠直接讀取兩個 README.md 中的內容，不至於出現 404 的狀況

側邊欄配置

與導航欄配置相似，以下

themeConfig: {
  sidebar: {
    '/other/': ['vuepress搭建博客']
  },
  sidebarDepth: 2, // 讀取兩級標題顯示
}
複製代碼

二、靜態博客部署

我將博客放在了碼雲上，因此如下是在碼雲上部署博客步驟，GitHub 上雷同

建立一個倉庫，名爲 xxx

倉庫開啓 gitee pages

此時咱們獲得了一個訪問地址

咱們來到 .vuepress/config.js 將 base 訪問路徑設置一下

module.exports = {
  title: 'Z 空間',
  description: '原始社會的一個碼農，自我覆盤的老巢',
  base: '/blog-preview/'
}
複製代碼

否則有可能出現 404 的狀況

自動打包上傳

在根目錄下面新建一個文件，deploy.sh 將倉庫地址複製到下面文字處，這個腳本能夠自動打包，並將打包完成的頁面傳到倉庫中

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

# 生成靜態文件
npm run build

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

# 若是是發佈到自定義域名
# echo 'www.example.com' > CNAME

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

# 若是發佈到 https://<USERNAME>.github.io
git push -f 項目提交地址 master

# 若是發佈到 https://<USERNAME>.github.io/<REPO>
# git push -f git@github.com:<USERNAME>/<REPO>.git master:gh-pages

cd -
複製代碼

在 package.json 中加入腳本運行指令

"scripts": {
    "dev": "vuepress dev docs",
    "build": "vuepress build docs",
    "deploy": "bash deploy.sh"
  }
複製代碼

so，運行一下指令

npm run deploy
複製代碼

這時咱們去倉庫能夠看到

而後在 gitee pages 中更新一下

更新完成以後去咱們的網站看看

第一期就到這裏了，好玩的東西你們能夠本身摸索下，下一期集成 評論