如何使用vuepress搭建博客并發布到云服務器

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

VuePress安裝

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

安裝vuePress
創建文件 Blog
進入文件夾打開終端，輸入

npm install -D vuepress

根據以下結構創建，具體配置參考官方

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

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

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

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

配置

首頁配置
默認主題提供了一個主頁布局。

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

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

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

部署

配置完可以部署,執行npm run build 將項目打包,在文件config.js中 base至關重要,要將base設置成根目錄。可以將發布在云盤中如百度X盤，github上可直接通過鏈接訪問，也可將其發布在云服務器，由于我有個域名，所以打算就其發布在云主機，這里可以選擇億速云。選擇廣東的節點，大概每天0.88元，算起來比阿里云便宜點。

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

//創建一個文件夾
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

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

配置

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

檢查nginx.conf文件

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

啟動nginx

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

感謝各位的閱讀，以上就是“如何使用vuepress搭建博客并發布到云服務器 ”的內容了，經過本文的學習后，相信大家對如何使用vuepress搭建博客并發布到云服務器 這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！