這篇文章主要講解了“如何使用vuepress搭建博客并發(fā)布到云服務(wù)器 ”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“如何使用vuepress搭建博客并發(fā)布到云服務(wù)器 ”吧！

創(chuàng)新互聯(lián)主營達(dá)拉特網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營網(wǎng)站建設(shè)方案,app開發(fā)定制,達(dá)拉特h5成都微信小程序搭建,達(dá)拉特網(wǎng)站營銷推廣歡迎達(dá)拉特等地區(qū)企業(yè)咨詢

VuePress安裝

安裝node.js
安裝node.js，版本要求在>= 8
配置環(huán)境變量

安裝vuePress
創(chuàng)建文件 Blog
進(jìn)入文件夾打開終端，輸入

npm install -D vuepress

根據(jù)以下結(jié)構(gòu)創(chuàng)建，具體配置參考官方

├─ docs
│  ├─ README.md
│  └─ .vuepress
│     └─ config.js
└─ package.json

設(shè)置package.json的腳本配置
VuePress中有兩個命令:
1.vuepress dev docs命令運(yùn)行本地服務(wù)，通過訪問(http://localhost:8080)即可預(yù)覽網(wǎng)站
2.vuepress build docs命令用來生成靜態(tài)文件，默認(rèn)情況下，放置在docs/.vuepress/dist目錄中，當(dāng)然你也可以在docs/.vuepress/config.js中的dest字段來修改默認(rèn)存放目錄。
在這里將兩個命令封裝成腳本的方式，直接使用npm run dev和npm run build即可。

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

在docs的md文件就是我們要顯示的頁面，vuepress會為每個 markdown 文件都使用 markdown-it 編譯為 HTML，然后作為 Vue 組件的模板進(jìn)行處理。這允許你直接在 markdown 文件中使用 Vue。

配置

首頁配置
默認(rèn)主題提供了一個主頁布局。

home: true // 是否使用Vuepress默認(rèn)主題
heroImage: /hero.png // 首頁的圖片
actionText: Get Started → // 按鈕的文字
actionLink: /guide/ // 按鈕跳轉(zhuǎn)的目錄
features: // 首頁三個特性
-title: 簡明優(yōu)先
details: 對以 markdown 為中心的項(xiàng)目結(jié)構(gòu)，做最簡化的配置，幫助你專注于創(chuàng)作。
-title: Vue 驅(qū)動
details: 享用 Vue + webpack 開發(fā)環(huán)境，在 markdown 中使用 Vue 組件，并通過 Vue 開發(fā)自定義主題。
-title: 性能高效
details: VuePress 將每個頁面生成為預(yù)渲染的靜態(tài) HTML，每個頁面加載之后，然后作為單頁面應(yīng)用程序(SPA)運(yùn)行。
footer: MIT Licensed | Copyright © 2018-present Evan You
--- // 頁尾

導(dǎo)航配置
導(dǎo)航配置文件在.vuepress/config.js中
在導(dǎo)航配置文件中nav是控制導(dǎo)航欄鏈接的，你可以把它改成自己的博客目錄。

module.exports={
 title: 'hello vuepress',
 description: 'Just playing around',
 themeConfig: {
     nav: [
       { text: 'Home', link: '/' },
       { text: 'Guide', link: '/guide/' },
       { text: 'External', link: 'https://google.com' },
     ]
   }
}

部署

配置完可以部署,執(zhí)行npm run build 將項(xiàng)目打包,在文件config.js中 base至關(guān)重要,要將base設(shè)置成根目錄。可以將發(fā)布在云盤中如百度X盤，github上可直接通過鏈接訪問，也可將其發(fā)布在云服務(wù)器，由于我有個域名，所以打算就其發(fā)布在云主機(jī)，這里可以選擇創(chuàng)新互聯(lián)。選擇廣東的節(jié)點(diǎn)，大概每天0.88元，算起來比阿里云便宜點(diǎn)。

服務(wù)器上安裝Apache或者nginx
這里拿nginx舉例，文檔
安裝(在安裝前要安裝依賴包gcc zlib zlib-devel pcre-devel openssl openssl-devel)

//創(chuàng)建一個文件夾
cd /usr/local
mkdir nginx
cd nginx
//下載tar包
wget http://nginx.org/download/nginx-1.17.2.tar.gz
tar -xvf nginx-1.17.2.tar.g

將打包好的項(xiàng)目放在/var/www/下(配置前要將域名解析到我們的主機(jī)地址)

配置

main                                # 全局配置
events {                            # nginx工作模式配置
....
}
http {                                # http設(shè)置
 ....
 server {                        # 服務(wù)器主機(jī)配置
     listen 80;#監(jiān)聽端口
     server_name xxxx.com;#域名
     root        /var/www/dist;#站點(diǎn)目錄
     index        index.php index.html index.html;
     ...
     location {                    # 路由配置
         ....
     }
         upstream name {                    # 負(fù)載均衡配置
     ....
 }
}

檢查nginx.conf文件

cd /usr/local/nginx/sbin
./nginx -t  #查看nginx.conf文件是否有語法錯誤

啟動nginx

cd /usr/local/nginx/sbin
./nginx -s reload

感謝各位的閱讀，以上就是“如何使用vuepress搭建博客并發(fā)布到云服務(wù)器 ”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對如何使用vuepress搭建博客并發(fā)布到云服務(wù)器 這一問題有了更深刻的體會，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識點(diǎn)的文章，歡迎關(guān)注！