Linux 下 VuePress 的安裝使用

2021-10-23 10:23:04 字數 3146 閱讀 8834

我的小站、github

vuepress 是乙個基於 vue 的輕量級靜態**生成器,以及為編寫技術文件而優化的預設主題。

vuepress 要求 node.js 環境,且 node.js 版本 >= 8.6。

安裝 node.js

# 建立安裝目錄

sudo

mkdir /usr/local/lib/nodejs

# 進入安裝目錄

cd /usr/local/lib/nodejs

wget

# 解壓

配置環境變數

# 編輯環境變數檔案,在末尾追加 node.js 路徑

echo

export path=/usr/local/lib/nodejs/node-v14.7.0-linux-x64/bin:$path

>>~/.bash_profile

# 過載該檔案使設定生效

source ~/.bash_profile

# 檢視版本資訊

# 使⽤**映象

npm config set registry

# 安裝 vuepress

npminstall -g vuepress

# 在 root 目錄下建立並進入my_blogs目錄

mkdir ~/my_blogs

cd ~/my_blogs

# 專案初始化

# 設定 package.json 的指令碼配置 (推薦使用 finalshell等工具直接編輯)

vim package.json

# 修改scripts中的內容如下

"scripts"

:,

修改前

修改後

# 建立文件目錄以及 .vuepress ⽬錄

mkdir ~/my_blogs/docs ~/my_blogs/docs/.vuepress

# 在 docs 目錄下新建⼀個md⽂件

echo

'# hello vuepress - first blog!'

> ~/my_blogs/docs/readme.md

# 在 .vuepress 目錄下建立 config.js 配置⽂件

cd ~/my_blogs/docs/.vuepress

echo

>config.js

# 在 .vuepress 目錄下建立 public ⽬錄

在 my_blogs 路徑下檢視目錄

tree -a

# 如果沒有安裝 tree

# centos 系統下使用

sudo yum install tree

# ubuntu 系統下使用

修改首頁配置

編輯/root/my_blogs/docs目錄下的readme.md檔案

---

home: true

herotext: vue技術部落格初試

tagline: 專案結構,關注討論,每日分享

actiontext: 每日更新 →

actionlink: /testlink/

features:

- title: 專案結構

- details: 以 markdown 為中心的專案結構,以最少的配置幫助你專注於寫作。

- title: 關注討論

- details: 享受 vue + webpack 的開發體驗,在 markdown 中使用 vue 元件,同時可以使用vue 來開發自定義主題。

- title: 每日分享

- details: vuepress 為每個頁面預渲染生成靜態的 html,同時在頁面被載入的時候,將作為 spa 執行。

至此,vuepress搭建完畢。

vuePress搭建屬於自己的站點。

官網 類似hexo乙個極簡的靜態 生成器,用來寫技術文件不能在爽。初始化專案 npm install g vuepress 建立乙個markdown文件 echo hello vuepress readme.md 編寫文件 vuepress dev 編譯文件 vuepress build docs ...

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

1 生成預設blog專案 2 打包上傳github 1 yarn build 2 進入到目錄 e myown test vuepress02 blog vuepress dist 6 設定郵箱和使用者名稱 8 我之前生成給rsa key,所以無需重新生成,只需要配置下即可,如果需要生成和配置的請參考...

Linux下ZendOptimizer的安裝與配置

內容 在裝的好的red hat linux 9 apache 2.0.55 mysql 5.1.6 php 5.1.2後,接下來就是安裝linux下的php加速器zendoptimizer 2.6.2了。自己編譯 php 後,zend optimizer 2.6.2 需要自己設定一下,請參照以下步驟...