VuePress從零開始搭建自己的部落格

codeteenager發表於2018-06-09
Vue

VuePress從零開始搭建自己的部落格

最近將自己的部落格從Hexo轉移到VuePress中來，使用VuePress的過程中也遇到了一些問題，寫一篇文章來記錄一下搭建過程和踩過的坑。

VuePress是什麼？

VuePress是以Vue驅動的靜態網站生成器，是一個由Vue、Vue Router和webpack驅動的單頁應用。在VuePress中，你可以使用Markdown編寫文件，然後生成網頁，每一個由VuePress生成的頁面都帶有預渲染好的HTML，也因此具有非常好的載入效能和搜尋引擎優化。同時，一旦頁面被載入，Vue將接管這些靜態內容，並將其轉換成一個完整的單頁應用，其他的頁面則會只在使用者瀏覽到的時候才按需載入。

詳情請看VuePress官方文件

VuePress特性

  • 為技術文件而優化的內建Markdown擴充
  • 在Markdown檔案中使用Vue元件的能力
  • Vue驅動的自定義主題系統
  • 自動生成Service Worker(支援PWA)
  • Google Analytics整合
  • 基於Git的"最後更新時間"
  • 多語言支援
  • 響應式佈局

環境搭建

安裝

VuePress支援使用Yarn和npm來安裝，Node.js版本需要>=8才可以。

全域性安裝VuePress

yarn global add vuepress # 或者：npm install -g vuepress
複製程式碼

建立專案目錄

mkdir project
cd project
複製程式碼

初始化專案

yarn init -y # 或者 npm init -y
複製程式碼

新建docs資料夾

docs資料夾作為專案文件根目錄，主要放置Markdown型別的文章和.vuepress資料夾。

mkdir docs
複製程式碼

設定package.json

VuePress中有兩個命令，vuepress dev docs命令執行本地服務，通過訪問http://localhost:8080即可預覽網站，vuepress build docs命令用來生成靜態檔案，預設情況下，放置在docs/.vuepress/dist目錄中，當然你也可以在docs/.vuepress/config.js中的dest欄位來修改預設存放目錄。在這裡將兩個命令封裝成指令碼的方式，直接使用npm run docs:dev和npm run docs:build即可。

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

建立.vuepress目錄

在docs目錄中，建立.vuepress目錄，.vuepress目錄主要用於存放VuePress相關的檔案。

mkdir .vuepress
複製程式碼

建立config.js

進入到.vuepress目錄中，然後建立config.js，config.js是VuePress必要的配置檔案，它匯出y一個javascript物件。

touch config.js
複製程式碼

建立public資料夾

進入到.vuepress目錄中，然後建立public資料夾，此資料夾主要放靜態資原始檔，例如favicons和 PWA的圖示。

mkdir public
複製程式碼

此時，專案的結構差不多就出來了。

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

複製程式碼

以上只是簡單了搭建了一下部落格的開發環境，接下來是部落格主要的基本配置config.js，也是必須要做的。

基本配置

一個config.js的主要配置包括網站的標題、描述等基本資訊，以及主題的配置。這裡簡單的列舉一下常用配置。

網站資訊

module.exports = {
    title: '個人主頁', 
    description: '姜帥傑的部落格',
    head: [
        ['link', { rel: 'icon', href: '/img/logo.ico' }],
        ['link', { rel: 'manifest', href: '/manifest.json' }],
    ]
}
複製程式碼
  • title：網站標題
  • description：網站描述
  • head：額外的需要被注入到當前頁面的HTML"head"中的標籤，其中路徑的"/"就是public資源目錄。

具體配置詳情請看文件：配置

主題配置

module.exports = {
       themeConfig: {
        nav: [
            { text: '主頁', link: '/' },
            { text: '博文',
              items: [
                { text: 'Android', link: '/android/' },
                { text: 'ios', link: '/ios/' },
                { text: 'Web', link: '/web/' }
              ] 
            },
            { text: '關於', link: '/about/' },
            { text: 'Github', link: 'https://www.github.com/codeteenager' },
        ],
        sidebar: {
            '/android/': [
                        "",
                        "android1", 
                    	 ...
                         ],
                "/ios/":[
                        "",
                        "ios1",
                        ],
                "/web/":[
                        "",
                        "web1",
                        ...
            				 ],
            },
        sidebarDepth: 2,
        lastUpdated: 'Last Updated', 
    },
}
複製程式碼

  • nav：導航欄配置，此配置主要用於配置導航欄的連結，例如以上主頁的link為"/"，預設是根目錄下的README.md。"/android/"連結到根目錄docs下的android資料夾下的README.md檔案。

  • sidebar：側邊欄配置，你可以省略.md擴充名，同時以/結尾的路徑將會被視為 */README.md。'/android/'、'/ios/'和'/web/'是通過路由的方式將每個頁面的標題抽取出來顯示。"/android/"是指根目錄下android資料夾中的路由，每個路由連結都要有README.md。所以目錄結構如下：

    ├─── docs
├── README.md
└── android
│   └── README.md
└── ios
   └── README.md

複製程式碼

  • sidebarDepth：巢狀的標題連結深度，預設的深度為1。

  • lastUpdated：最後更新時間。

側邊欄如圖：

VuePress從零開始搭建自己的部落格

具體主題配置詳情請看文件：主題配置

PWA配置

VuePress預設支援PWA配置的，需要在基本配置中開啟serviceWorker。

module.exports = {
	 serviceWorker: true,
}
複製程式碼

然後再新增icons和Manifest配置，在public中新增manifest.json配置，和圖示。如果不知道PWA的可以到PWA配置檢視相關資料。

{
  "name": "姜帥傑",
  "short_name": "姜帥傑",
  "start_url": "index.html",
  "display": "standalone",
  "background_color": "#2196f3",
  "description": "姜帥傑的個人主頁",
  "theme_color": "blue",
  "icons": [
    {
      "src": "./logo.png",
      "sizes": "144x144",
      "type": "image/png"
    }
  ],
  "related_applications": [
    {
      "platform": "web"
    },
    {
      "platform": "play",
      "url": "https://play.google.com/store/apps/details?id=cheeaun.hackerweb"
    }
  ]
}
複製程式碼

在config.js配置中新增manifest.json，由於iphone11.3不支援manifest的圖示，所以加上apple-touch-icon圖示配置即可。

module.exports = {
	head: [
	        ['link', { rel: 'manifest', href: '/manifest.json' }],
	        ['link', { rel: 'apple-touch-icon', href: '/img/logo.png' }],
	      ]
}
複製程式碼

最後在iphone中訪問網站，然後新增主螢幕即可。

自定義頁面

預設的主題提供了一個首頁（Homepage）的佈局(用於這個網站的主頁)。想要使用它，需要在你的根級 README.md的home: true，然後新增資料。

---
home: true
heroImage: /hero.png
actionText: 快速上手 →
actionLink: /zh/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從零開始搭建自己的部落格

如果你想自定義首頁或者其他頁面，可以在頁面的md檔案中新增頁面Vue檔案。Vue檔案放置在docs/.vuepress/components目錄中。

---
layout: HomeLayout
---
複製程式碼

例如我部落格的自定義首頁：

VuePress從零開始搭建自己的部落格

部署上線

由於構建的時候生成靜態頁面，所以將dist資料夾中的內容可以部署在gitHub的pages或者coding的pages都可以。如果使用git上傳到github上，操作比較繁瑣，這裡使用指令碼的方式自動部署到github上。

建立一個deploy.sh

在project下建立deploy.sh。

touch deploy.sh
複製程式碼

編寫指令碼

#!/usr/bin/env sh

# 確保指令碼丟擲遇到的錯誤
set -e

# 生成靜態檔案
npm run docs:build

# 進入生成的資料夾
cd docs/.vuepress/dist

# 如果是釋出到自定義域名
# echo 'www.example.com' > CNAME

git init
git add -A
git commit -m 'deploy'

# 如果釋出到 https://<USERNAME>.github.io
# git push -f git@github.com:<USERNAME>/<USERNAME>.github.io.git master

# 如果釋出到 https://<USERNAME>.github.io/<REPO>
# git push -f git@github.com:<USERNAME>/<REPO>.git master:gh-pages

cd -
複製程式碼

設定package.json

{
	"scripts": {
	    "deploy": "bash deploy.sh"
	  },
}
複製程式碼

執行npm run deploy 即可自動構建部署到github上。

詳情請看，部署

示例：我的部落格

相關文章