VuePress 搭建個人 Blog

**搭建前提：**安裝node.js 且node.js 版本 >= 8。node.js安裝很簡單，這裡略過。

經過過去搞過的兩種靜態部落格的搭建方式總結，搞清楚搭建的前提是至關重要的！！！

# 建立專案檔案 mkdir blog # 將 vuepress 作為乙個本地依賴安裝 yarn add -d vuepress # 或者：npm install -d vuepress # 新建乙個 docs 資料夾 mkdir docs # 新建乙個 markdown 檔案 echo "# hello vuepress" > docs/readme.md # 開始寫作啟動 npx vuepress dev docs

# vuepress dev server listening at http://localhost:8080/

在 docs 同級目錄下建立 package.json 檔案：(以下為終端指令操作，[ ] 中的內容為輸入上方指令後輸出的結果)

pwd
[**/blog/]
ls[docs]
touch package.json
ls[docs   package.json]
vim package.json

按 i 進行 insert 操作，新增以下內容：

然後按鍵順序：esc->:wq

此時啟動方式就更改為了：

npm run docs:dev

npm run docs:build

配置 config.js

cd ***/blog/docs/.vuepress/

vim config.js

新增以下內容：

module.exports =
,      ,,],
// 搜尋
search: true,
searchmaxsuggestions: 10,
lastupdated: 'last updated', // string | boolean
}}

配置 shell 指令碼（指令碼示例，請根據自己的需求使用）

cd ***/blog/

vim deploy.sh

新增以下內容：

#!/usr/bin/env sh # 確保指令碼丟擲遇到的錯誤 set -e # 構建 npm run docs:build # 進入到構建輸出目錄 cd docs/.vuepress/dist # 如果你是要部署到自定義網域名稱 # echo 'www.example.com' > cname git init git add -a git commit -m 'deploy' # 如果你想要部署到 https://.github.io # git push -f [email protected]:/.github.io.git master # 如果你想要部署到 https://.github.io/ # git push -f [email protected]:/.git master:gh-pages

cd -

在 docs 下新建資料夾 technical 開始寫部落格，資料夾下新建 readme.md 表示改目錄主頁或者主要內容。

專案結構如下：

- docs - .vuepress - dist // 編譯後輸出目錄 - config.js // 配置 - technical // 部落格資料夾 - readme.md // 部落格資料夾主頁 - readme.md // 主頁 - node_modules // 所需 modules - package.json

- deploy.sh // 部署指令碼

注意：每個資料夾下的 readme.md 檔案為資料夾目錄下的預設首頁，相當於 index.html

---
sidebar: auto
---# 環境配置
#### 2020.04
- [runtime 的使用場景]
(./runtime 的使用場景.md)
- [weak 的底層原理]
(./weak 的底層原理.md)

以上為簡單的 blog 使用 vuepress 搭建流程，做個記錄，畢竟對於 vuepress 我也是初學者。後續進行深入的研究。

VuePress 搭建個人 Blog

阿里雲ECS搭建VuePress

vuePress搭建屬於自己的站點。

05 VuePress 上線部署搭建你的專屬部落格

VuePress 搭建個人 Blog

阿里雲ECS搭建VuePress

vuePress搭建屬於自己的站點。

05 VuePress 上線部署 搭建你的專屬部落格

相關推薦

05 VuePress 上線部署搭建你的專屬部落格