基於 Vuepress 搭建個人部落格,文章詳細,助你快速上手

Jine_are 發表於 2020-11-21
Vue

搭建部落格

	幾年前在小白階段使用過 WordPress + 阿里雲伺服器 搭建了自己的部落格,
也走了很多坑,從零摸坑最後也弄好了,也順便使用了阿里雲的一些服務,
但當時沒有記錄筆記的習慣,過了好久很多操作也遺忘了。
	加上伺服器過期了好多資料也沒有備份,那就重新搭一個快速上手的部落格,
想著怎麼也應該嘗試一些新的方法,剛好也瞭解到了尤大神的 Vuepress。因為也更好的支援 Vue

此文章內容將會抽時間持續更新ing,請嘗試不同時間段來參考。

準備工作

1、準備伺服器環境,或者最後部署到GitHub或碼雲託管

因本人常用阿里雲伺服器操作,有以下簡述步驟:

1.1、阿里雲官網購買伺服器,順便再阿里雲上買個域名

1.2、域名實名認證 + 伺服器繫結域名 + 備案網站(這些操作需要稽核時間,可以先跳過這步)

1.3、在自己的伺服器選擇 Linux centos版本 系統 (初始化)

1.4、需要node環境

1.4.1:可以在建立伺服器例項時初始化之前候選擇上(但提供的版本太低,最後也可以先升級下,升級node操作自行百度)

1.4.2:也可以在建立伺服器例項時候不安裝node環境(若選擇這步驟可以進行如下操作)

(1)開啟node中文官網(http://nodejs.cn/download/)
(2)右鍵複製 Linux二進位制(x64)連結。.tar.xz格式的
(3)開啟自己的伺服器,使用命令: ‘weget xxxxx(網址連結)’
(4)在該目錄下解壓,有兩層壓縮,下面解壓命令:

xz -d node-v8.11.3-linux-x64.tar.xz

tar -xvf node-v8.11.3-linux-x64.tar

(5)配置環境變數(nano 是一個命令列編輯器,你也可以使用vim、vi等命令)
sudo vim /etc/profile

複製下面兩行到剛開啟的profile檔案最底部(注意node的安裝地址 /root/node-v14.15.0-linux-x64/ 換成自己的):

#node 8.11.3
export NODE_HOME=/root/node-v14.15.0-linux-x64
export PATH=$PATH:$NODE_HOME/bin

儲存後退出,再執行下面命令將環境變數生效:
source /etc/profile

(6)、將目錄軟連結到全域性環境下(命令後面的/usr/local/bin/node是固定的)

ln -s /root/node-v14.15.0-linux-x64/bin/node /usr/local/bin/node

ln -s /root/node-v14.15.0-linux-x64/bin/npm /usr/local/bin/npm

(7)、這樣安裝好了以後使用npm安裝的包(比如:ionic serve),使用包的命令時可能會提示找不到命令,沒關係,在使用者目錄下終端執行下面命令(固定寫法):

echo -e "export PATH=$(npm prefix -g)/bin:$PATH" >> ~/.bashrc && source ~/.bashrc

(8)、 這樣我們在所有使用者下,都可以使用npm,也可以使用npm安裝的包的命令。大功告成,成功的將nodejs安裝並配置到全域性環境下。

2、安裝寶塔

2.0、為什麼要安裝寶塔?

寶塔只是個輔助工具,日後運維操作可以很方便,對於不懂Linux指令的道友還是很友好的幫助。這裡只是對新手的建議,對於老手可以自己進行部署

2.1 、寶塔官網(https://www.bt.cn/download/linux.html)

若是阿里雲伺服器,建議先參考文章配置好開放的埠號:https://www.bt.cn/bbs/thread-2897-1-1.html

2.2、在伺服器中安裝寶塔

Centos版本輸入以下命令:

yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh

安裝過程遇見 y 或 n 選項,直接選y

2.3、安裝成功後,你的伺服器上會出現外網地址和使用者名稱+密碼,開啟這個地址,然後輸入使用者和密碼

3、安裝 yarn

3.1、為什麼要安裝yarn,而不使用npm呢?

yarn和npm都是包管理工具,但是yarn是嶄新的,經過重新設計的npm客戶端,於2016年10月釋出,相比於npm,yarn在執行速度上有顯著的提升,安裝時間變少,功能上也有很多改進。

yarn雖然和nom一樣是本地快取,但是yarn無需網際網路連結就能安裝本地快取的依賴項,提供了離線模式,而這個是npm實現不了的。

yarn解決了由於語義版本控制而導致的npm的不確定性問題,通過安裝時建立的預設檔案,確保使用的庫的版本相同。

yarn增加了一些能讓開發人員並行化處理所有必需的操作,且通過新增了一些改進,使得執行速度有了顯著的提升,整個安裝時間也變得更少。

npm的輸出資訊比較冗長,相比之下,yarn簡潔很多。預設情況下,直觀且直接地列印出必要的資訊。

yarn的語義相對於npm更加清晰,主要是因為yarn改變了一些npm的命令名稱,看上去就更清晰了。

上面簡介了yarn作用和與npm的對比,但是這裡強制採用yarn工具

以下是Vuepress官網給的建議:

如果你的現有專案依賴了 webpack 3.x,我們推薦使用 Yarn 而不是 npm 來安裝 VuePress。因為在這種情形下,npm 會生成錯誤的依賴樹。

3.2、安裝yarn

這裡使用了npm進行安裝(也可以採用yum,wget等)

在安裝之前,先設定下npm的國內淘寶映象吧~

npm config set registry https://registry.npm.taobao.org

設定好,那麼開始安裝,如下:

npm i yarn -g

安裝完成後,可以檢視下版本,檢驗是否安裝成功

yarn -v

設定yarn國內映象

yarn config set registry https://registry.npm.taobao.org/

Vuepress 簡單使用

以下內容來有一部分自官網文件,我的這些內容是助你快速上手,而不是去copy官網文件

一些官方給的知識點和配置介紹我們先不看,先搭建好,看效果,有別的需求之後再去改動

當然你可以繼續參考我的文章,也可直接檢視官網的文件

Vuepress官網(https://www.vuepress.cn/)

初始化

1.0、先在本地主機上初始化(最後在部署到伺服器上),建立vuepress目錄,並進入

mkdir vuepress

cd vuepress

1.1、使用yarn工具,初始化

yarn init -y

1.2、將 VuePress 安裝為本地依賴

yarn add -D vuepress # npm install -D vuepress

1.3、建立你的第一篇文件

mkdir docs && echo '# Hello VuePress' > docs/README.md

1.4、在 package.json 中新增一些 scripts

此處我們把 docs 目錄作為 targetDir 下面所有的“檔案的相對路徑”都是相對於 docs 目錄的。

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

預設頁面路由地址如下:

檔案的相對路徑頁面路由地址
/README.md/
/guide/README.md/guide/
/config.md/config.html

1.5、在本地啟動伺服器

yarn docs:dev 

# npm run docs:dev

1.6、訪問內網(http://localhost:8080)

若出現如下圖,便是基本的搭建成功

在這裡插入圖片描述

目錄結構

VuePress 遵循 “約定優於配置” 的原則,推薦的目錄結構如下:

.
├── docs
│   ├── .vuepress (可選的)   '用於存放全域性的配置、元件、靜態資源等。'
│   │   ├── components (可選的)  '該目錄中的 Vue 元件將會被自動註冊為全域性元件'
│   │   ├── theme (可選的)  '用於存放本地主題'
│   │   │   └── Layout.vue
│   │   ├── public (可選的)  '靜態資源目錄'
│   │   ├── styles (可選的)  '用於存放樣式相關的檔案'
│   │   │   ├── index.styl  '將會被自動應用的全域性樣式檔案,會生成在最終的 CSS 檔案結尾,具有比預設樣式更高的優先順序'
│   │   │   └── palette.styl  '用於重寫預設顏色常量,或者設定新的 stylus 顏色常量'
│   │   ├── templates (可選的, 謹慎配置)  '儲存 HTML 模板檔案。'
│   │   │   ├── dev.html  '用於開發環境的 HTML 模板檔案'
│   │   │   └── ssr.html  '構建時基於 Vue SSR 的 HTML 模板檔案。'
│   │   ├── config.js (可選的)  '配置檔案的入口檔案,也可以是 YML 或 toml。'
│   │   └── enhanceApp.js (可選的)  '客戶端應用的增強'
│   │ 
│   ├── README.md
│   ├── guide
│   │   └── README.md
│   └── config.md
│ 
└── package.json

官網也給了以下提示:

當你想要去自定義 templates/ssr.htmltemplates/dev.html 時,最好基於 預設的模板檔案 (opens new window)來修改,否則可能會導致構建出錯

基本配置

首先在你的文件目錄下(也就是docs目錄)建立一個 .vuepress 目錄,所有 VuePress 相關的檔案都將會被放在這裡。你的專案結構可能是這樣:

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

README.md檔案中新增的內容如下:

---
home: true 
heroImage: https://jine.oss-cn-beijing.aliyuncs.com/image/weimei.jpg
actionText:actionLink: /zh/guide/
heroText: Write the Code,Change the World~
tagline: 喜歡籃球,脾氣賊棒√ 
features:
- title: 讚賞  
- details: 點點手指喲~
footer: MIT Licensed | Copyright © 2020-present Evan You
---

Front-matter 是檔案最上方以 --- 分隔的區域,用於指定個別檔案的變數

VuePress 提供了對 YAML front matter (opens new window)開箱即用的支援,這些資料可以在當前 markdown 的正文,或者是任意的自定義或主題元件中使用。

注意:copy時候,不要把 — 給丟掉 ,這就類似於寫法格式,可不能丟掉

一個 VuePress 網站必要的配置檔案是 .vuepress/config.js,它應該匯出一個 JavaScript 物件:

你可以先把我大概配置頁面基本的內容copy,先把頁面跑起來

module.exports = {
    title: 'Jine',  //標題
    keywords: '前端開發',
    description: '前端開發 Jine 的個人部落格',
    repo: 'https://github.com/zeroonbush/blog.git',  //倉庫地址
    base: '/docs/',  // 配合部署專案
    head: [
        ['link', { rel: 'png', href: '/img/熊貓.png' }]
    ],
    lastUpdated: 'Last Updated',
    themeConfig: {  //主題配置
        // 部落格配置
        blogConfig: {
            category: {
                location: 2,     // 在導航欄選單中所佔的位置,預設2
                text: 'Category' // 預設文案 “分類”
            },
            tag: {
                location: 3,     // 在導航欄選單中所佔的位置,預設3
                text: 'Tag'      // 預設文案 “標籤”
            }
        },
        logo: '/img/部落格專家.png',
        nav: [  //導航欄
            { text: '首頁', link: '/' },
            { text: '碼趣', link: '/code/' },
            { text: '讚賞', link: '/money/' },
            { text: 'About me', link: '/me/' },
            { text: 'CSDN', link: 'https://blog.csdn.net/weixin_42760849' }
        ],
        sidebar: 'auto',
        displayAllHeaders: true, // 預設值:false
    }
}

/*
以下例舉倆個引數的描述如下:

title
型別: string
預設值: undefined
網站的標題,它將會被用作所有頁面標題的字首,同時,預設主題下,它將顯示在導航欄(navbar)上。

#description
型別: string
預設值: undefined
網站的描述,它將會以 <meta> 標籤渲染到當前頁面的 HTML 中。

*/

上述的配置好後,執行起 dev server

如下圖:

在這裡插入圖片描述

更多配置和引數描述參見官網的 => 配置 來檢視所有可配置的選項。

主題配置

在 VuePress 中,目前自帶了一個預設的主題(正是你現在所看到的),它是為技術文件而設計的。同時,預設主題提供了一些選項,讓你可以去自定義導航欄(navbar)、 側邊欄(sidebar)和 首頁(homepage) 等,詳情請參見 預設主題

如果你想開發一個自定義主題,可以參考 自定義主題

主題配置我日後的文章單獨去更新

我先建議想要快速搭建個好看的部落格,可以先用別人寫好的部落格主題(

以下內容參考這個部落格主題去搭建,我想說的是先做到用會別人的,再去設計自己的主題讓別人用

vuepress-theme-reco 主題使用