使用VuePress 搭建我的博客

時間 2020-06-15

標籤使用 vuepress 搭建我的博客简体版

原文原文鏈接

介紹

VuePress 是一個靜態網站生成器，包含由Vue驅動的主題系統和插件API，同時還包含一個爲書寫技術文檔而優化的默認主題。此篇文章只介紹如何使用VuePress 搭建我的博客的部分。javascript

安裝

前置條件：VuePress 須要 Node.js >= 8.6html

安裝 vuepress

VuePress 安裝畢竟簡單，可使用如下命令直接安裝：前端

yarn add -D vuepress # npm install -D vuepress
複製代碼

驗證安裝

爲了驗證VuePress 的效果，首先建立一篇文檔vue

mkdir docs && echo '# Hello VuePress' > README.md
複製代碼

在當前目錄下建立 package.json 文件，添加如下內容：java

{
  "scripts": {
    "dev": "vuepress dev docs",
    "build": "vuepress build docs"
  }
}
複製代碼

在本地啓動服務器git

vuepress dev .
複製代碼

VuePress 會在 http://localhost:8080 啓動一個熱重載的開發服務器。github

若是沒有報錯，可在瀏覽器打開http://localhost:8080，默認加載內容爲 README.md 中內容。shell

VuePress 目錄結構

VuePress 遵循 「約定優於配置」 的原則，推薦的目錄結構以下：npm

.
├── blog
│   ├── .vuepress (可選的)
│   │   ├── components (可選的)
│   │   ├── theme (可選的)
│   │   │   └── Layout.vue
│   │   ├── public (可選的)
│   │   ├── styles (可選的)
│   │   │   ├── index.styl
│   │   │   └── palette.styl
│   │   ├── templates (可選的, 謹慎配置)
│   │   │   ├── dev.html
│   │   │   └── ssr.html
│   │   ├── config.js (可選的)
│   │   └── enhanceApp.js (可選的)
│   │ 
│   ├── README.md
│   └──_post
│       ├── about.md
│       └── README.md 
│ 
└── package.json
複製代碼

這裏blog目錄被稱做 targetDir ，目錄下的文件都是相對於 blog 目錄的。好比此目錄下文件的路由地址以下：json

文件相對路徑	頁面路由地址
/README.md	/
/_post/README.md	/_post/
/_post/about.md	/_post/about.html

基本配置

如今 VuePress 已經能夠運行，如今添加一些基本的配置。首先在當前目錄下建立 .vuepress 目錄（全部 VuePress 相關的文件都放在此目錄下），而後在 .vuepress 目錄下建立 config.js 文件（也可使用YAML (.vuepress/config.yml) 或是 TOML (.vuepress/config.toml) 格式的配置文件）。

添加如下配置到config.js：

module.exports = {
  title: '顧斯比',  // 網站的標題，它將會被用做全部頁面標題的前綴。
  description: '顧斯比的博客', // 網站的描述，它將會以 <meta> 標籤渲染到當前頁面的 HTML 中。
}
複製代碼

其它詳細配置參考官方文檔：vuepress.vuejs.org/zh/config/

主題

由於是使用 VuePress 做爲靜態博客使用，須要替換掉默認的主題。這裏使用官方主題： @vuepress/theme-blog 。

安裝

yarn add @vuepress/theme-blog -D
# OR npm install @vuepress/theme-blog -D
複製代碼

使用&配置

在config.js 中添加主題相關配置：

// .vuepress/config.js
module.exports = {
  title: '顧斯比',
  description: '顧斯比的博客 gusibi goodspeed',
  theme: '@vuepress/blog',
  themeConfig: {
     nav: [     // 導航條相關配置
            { text: '首頁', link: '/' },
            { text: '標籤', link: '/tag/'},
            { text: '關於 ', link: '/about/' },
            { text: 'github ', link: 'https://github.com/gusibi/', target:'_blank' },
        ],
        /** * Ref: https://vuepress-theme-blog.ulivz.com/config/#globalpagination */
        globalPagination: {
          lengthPerPage: 10,
        },

        /** * Ref: https://vuepress-theme-blog.ulivz.com/config/#sitemap */
        sitemap: {
            hostname: 'http://blog.gusibi.mobi/'
        },
  }
}
複製代碼

博客內容設置

Front matter 是用於指定博客文件的變量，必須放在博客文件的最上方。而且必須採用在三點劃線之間書寫的有效的 YAML。這是一個基本的例子：

---
title: Blogging Like a Hacker # 博客標題
date: 2020-06-14              # 博客發佈日期
tags:                         # 文章標籤
 - 前端
 - dart
 - flutter
 - vue
summary: 這裏是文章的摘要
---
複製代碼

其它變量：vuepress.vuejs.org/zh/guide/fr…

URL

默認狀況下，path 路徑則爲文件目錄的相對路徑，好比：

├── package.json
└── source
    ├── _post
    │   └── intro-vuepress.md
    ├── index.md
    └── tags.md
複製代碼

那麼你就會得到如下的可用頁面：

/source/
/source/tags.html
/source/_post/intro-vuepress.html
複製代碼

推薦使用 permalink 指定文章的永久連接，可使用全局配置來向全部頁面應用永久連接：

// .vuepress/config.js
module.exports = {
  permalink: "/:year/:month/:day/:slug"
};
複製代碼

另外，你也能夠只爲單獨一個頁面去設置永久連接。這種方式比全局配置擁有更高的優先級。

📝 hello.md:

---
title: Hello World
permalink: /hello-world
---
Hello!
複製代碼

內容

博客內容格式爲 markdown，markdown 語法參考：www.markdownguide.org/

插件

搜索

VuePress 內置搜索，能夠經過設置 themeConfig.search: false 來禁用默認的搜索框，或是經過 themeConfig.searchMaxSuggestions 來調整默認搜索框顯示的搜索結果數量：

module.exports = {
  themeConfig: {
    search: false,
    searchMaxSuggestions: 10
  }
}
複製代碼

你能夠經過在頁面的 frontmatter 中設置 search 來對單獨的頁面禁用內置的搜索框：

---
search: false
---
複製代碼

⚠️提示

內置搜索只會爲頁面的標題、****h2 、 h3 以及 tags 構建搜索索引。若是你須要全文搜索，你可使用 Algolia 搜索。

google-analytics

google-analytics是著名互聯網公司Google爲網站提供的數據統計服務。能夠對目標網站進行訪問數據統計和分析，並提供多種參數供網站擁有者使用。這裏推薦安裝：

安裝

使用如下命令安裝

yarn add -D @vuepress/plugin-google-analytics
# OR npm install -D @vuepress/plugin-google-analytics
複製代碼

使用

將ga 配置添加到配置文件

module.exports = {
  plugins: [
    [
      '@vuepress/google-analytics',
      {
        'ga': '' // UA-00000000-0
      }
    ]
  ]
}
複製代碼

更多配置參考文檔：vuepress.vuejs.org/zh/theme/de…

RSS

vuepress 包含rss 插件，能夠直接在配置中添加如下內容啓用：

module.exports = {
    ...
    themeConfig: {
      ...
      feed: {
         canonical_base: 'http://blog.gusibi.mobi/',
      },
    },
  };
複製代碼

部署到Github

在 docs/.vuepress/config.js 中設置正確的 base。

若是你打算髮布到 https://.github.io/，則能夠省略這一步，由於 base 默認便是 "/"。

在你的項目中，建立一個以下的 deploy.sh 文件:

#!/usr/bin/env sh 
# 確保腳本拋出遇到的錯誤
set -e

# 生成靜態文件
vuepress build --dest ./public

# 進入生成的文件夾
cd public

# 若是是發佈到自定義域名
# echo 'blog.gusibi.mobi' > CNAME

git add -A
git commit -m 'deploy'

# 發佈到 https://<USERNAME>.github.io
git push -f git@github.com:gusibi/gusibi.github.io.git master

# 若是發佈到 https://<USERNAME>.github.io/<REPO>
# git push -f git@github.com:<USERNAME>/<REPO>.git master:gh-pages

cd -
複製代碼