十分鐘搭建一個Vue風格的博客

時間 2019-11-07

標籤十分 10分搭建一個 vue 風格博客简体版

原文原文鏈接

前言📕

某個無聊的早晨，我打開個人電腦，看着凌亂的桌面，我陷入了深思。。。javascript

本身的博客😄

我決定弄個網站記錄一下，但是本身搭建又太麻煩。。秉持着「咱們不造輪子,只作輪子的搬運工」的理念，我打算去百度上找找😑html

原來尤大早就替咱們造好了輪子，Vuepress。簡單說明一下，這是一個基於Vue的靜態博客系統，不須要搭建雲服務器和雲數據庫，只用本地寫入靜態文件，而且博客能夠搜索進行快速聯想到文章，簡直不要太方便，開箱即用。前端

通過好幾天的一邊學習一邊踩坑，基本的結構總算出來了😀vue

開始搭建👻

首先安裝Vuepress，本文使用Yarn進行安裝（npm一樣能夠）。java

管理員權限打開終端輸入以下指令:git

# 1. 建立一個空文件夾
mkdir my-blog
cd ./my-blog
 # 2.建立一個package.json的模塊文件
yarn init -y # 或者 npm init -y
 # 3.添加vuepress模塊
yarn add -D vuepress 或者：npm install -D vuepress
 # 4.接着在packjson里加入一些指令方便咱們操做項目
"scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs"
    /* 終端中輸入 docs:dev 運行項目
       輸入 docs:build 打包項目 */
}
複製代碼

這時還不能啓動，咱們須要手動構建以下文件目錄github

/my-blog/
  ├── /docs/
  │  ├── /.vuepress/
  │  │  ├── /config/
  │  │  │  ├── nav.js
  │  │  │  └── sidebar.js
  │  │  ├── config.js
  │  │  └── /public/
  │  │         └── /img/
  │  │            ├── favorite.png
  │  │            └── witch.ico
  │  └── README.md
  └── package.json
複製代碼

my-blog 根目錄文件夾
package.json 存放項目依賴包
docs 存放項目全部的文檔和配置
README.md 項目啓動後的主頁內容
.vuepress 存放博客界面的配置以及靜態資源
nav.js 存放首頁頂部導航欄配置
sidebar.js 存放側邊欄配置
config.js 存放項目主要配置
public 存放靜態資源

或者直接去筆者倉庫Clone代碼目錄點擊此處😊shell

基本配置🏄‍

首先配置最重要的config.js文件，能夠參考個人配置，以下：數據庫

const nav = require('./config/nav'); //引入導航欄配置
const sidebar = require('./config/sidebar'); //引入側邊欄配置
const routeConfig = require('./plugins/routeConfig'); //引入路由配置

module.exports = {
    title: "不是博客",
    description: "不是博客",
    head: [
        // 這裏的 '/' 指向 docs/.vuepress/public 文件目錄 
        ['link', {
            rel: 'icon',
            href: '/img/witch.ico' //配置網頁的小圖標，以下圖
        }]
    ],
    base: '/blog/', // 部署到github會用到的配置
    markdown: {
        lineNumbers: true // 代碼塊顯示行號
    },
    // 頂部導航欄
    themeConfig: {
        displayAllHeaders: true, //展開側邊欄全部的小標題
        sidebarDepth: 1, //提取markdown中h2標題，做爲小標題顯示在側邊欄上。
        lastUpdated: '最後更新', // 文檔更新時間：每一個文件git最後提交的時間,
        nav, //導航
        sidebar, //側邊欄
    },
    plugins: [
        routeConfig,
    ],
}
複製代碼

在此推薦一個好看的ico和PNG圖標的網站，請放心食用，點擊這裏🚀npm

導航欄配置👙

導航能夠分爲以下三種配置：

僅顯示標題到導航欄

顯示標題到導航欄，且顯示下拉標題

顯示標題到導航欄，且分類別顯示下拉標題

nav.js配置以下：

const nav = [
    // 1.0 僅顯示標題到導航欄
    {
        text: '首頁',
        link: '/'
    },
    // 2.0 顯示標題到導航欄，且顯示下拉標題
    {
        text: '關於做者',
        items: [{
                text: 'GitHub',
                link: 'https://github.com/ordinaryA',
            },
            {
                text: '掘金',
                link: 'https://juejin.im/user/5c38537d518825260d7ec96c',
            }
        ]
    },
    // 3.0 顯示標題到導航欄，且分類別顯示下拉標題
    {
        text: '大前端',
        items: [{
                text: '基礎',
                items: [{
                        text: 'Javascript',
                        link: '/大前端/01.Javascript/',
                        //此處/以docs爲根目錄
                    },
                    {
                        text: 'ES6',
                        link: '/大前端/02.ES6/',
                    },
                ]
            },
        ]
    }
]
複製代碼

側邊欄配置⛳

此處坑極多，容易配置失敗，前方高能！！！

再次貼一下倉庫地址避免觀衆老爺們踩坑點擊此處😊

sidebar.js配置以下：

const 摸魚 = [{
    title: "上班摸魚", //側邊欄大類標題
    collapsable: false, //false可使側邊欄分組強制打開
    children: [
        [
            //md文件路徑，以底部導出的/摸魚/爲根路徑
            '01.上班摸魚/01.摸魚，是員工給公司的福報.md',
            //側邊欄顯示的標題名
            '摸魚，是員工給公司的福報'
        ],
    ],
}];
const 練習 = [{
        title: "小遊戲",
        collapsable: false,
        children: [
            ['01.前言.md', '前言'], 
            ['02.掃雷.md', '掃雷'],
            ['03.管道小鳥.md', '管道小鳥'],
            ['04.貪吃蛇.md', '貪吃蛇'],
        ],
    },
    {
        title: "聊天室",
        collapsable: false,
        children: [
            ['05.聊天室.md', '聊天室'],
        ],
    },
];
module.exports = {
    '/摸魚/': 摸魚,
    '/練習/': 練習,
}
複製代碼

配置首頁🎁

docs目錄下的README.md以下：

---
home: true
heroImage: /img/favorite.png
actionText: 摸魚🐟🐟🐟
actionLink: /PAGE/2019-10-23-touch-fish-hhhh/
features:
- title: 大前端
  details: 埋伏五百刀斧手於賬後，以摔杯爲號
- title: 練習
  details: 批判的武器不能代替武器的批判
- title: 摸魚
  details: 摸魚，是員工給公司的福報
footer: Awesome...
---
複製代碼

首頁也能夠寫vue和html代碼，筆者正在學習，就不舉慄了🥛

更多能夠參考官網配置，點擊此處 Vuepress🚗

部署🎉

Vuepress項目能夠發佈到GitHub page上，不須要雲服務器，因爲筆者用的是本身的服務器，就不分享怎麼發佈了。

部署的時候有個坑須要注意一下，config.js文件下的base須要填GitHub的配置或者服務器上的根目錄名，否則項目構建的dist包的引入路徑會出錯。

另：構建的dist包在本地是沒法運行的，會出現三條黑槓（若是有運行的辦法能夠留下評論，筆者也還在摸索階段），可是部署到服務器後會正常顯示😆

module.exports = {
    title: "不是博客",
    description: "不是博客",
    head: [
        ['link', {
            rel: 'icon',
            href: '/img/witch.ico'
        }]
    ],
    base: '/blog/', // 部署到github會用到的配置 👈
}
複製代碼