使用VuePress搭建個人博客

VuePress
是一個基於 Vue 的靜態網站生成器。其中主要用到：Vue，VueRouter，Webpack。
類似的工具：hexo

• 基於 Markdown 語法生成網頁
• 可以使用 Vue 開發的組件

---

使用 VuePress 搭建個人博客：

• 創建遠程倉庫
• 本地博客項目搭建
• 其它

---

創建遠程倉庫

1. 來到Github，創建倉庫

   沒有用戶的話先注冊。新建一個倉庫：
   點左邊的New或右上角加號里面的New repository

   
   

   填寫倉庫名，點Create repository完成創建。

   

2. clone 到本地，然后開始開發

   剛才建的倉庫，地址就是https://github.com/CoderMonkie/v-blog.git了。

   # [進入工作的目錄] 在VSCode的terminal中執行：
   git clone https://github.com/CoderMonkie/v-blog.git
   cd v-blog
   
   # 全局安裝vuepress
   npm install -g vuepress
   
   # 寫個文件來個 HelloWorld 試試吧
   echo # Hello world > readme.txt
   vuepress dev
   

   上面命令就讓我們的blog啟動起來了。HelloWorld：

   

本地博客項目搭建

# 初始化工程目錄 v-blog
npm init -y

初始化會生成package.json文件。

目錄配置

極簡基本結構：

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

/v-blog/

 新建docs文件夾（在根目錄 v-blog 下），這里存放所有的博客內容。

/v-blog/docs/

 docs文件夾下新建README.md，這個文件就是首頁。

 docs文件夾下新建.vuepress文件夾，該目錄存放vuepress的所有配置。

/v-blog/docs/.vuepress/

 .vuepress文件夾下，新建config.js文件，作為vuepress的配置入口文件。

 當內容多時，config.js中的配置項可以抽出單獨的js文件。

以上，最基本的結構就完成了，讓我們生成個主頁試試。

生成簡單主頁

/v-blog/docs/.vuepress/config.js

在config.js中編輯如下：

module.exports = {
  title: 'Coder-Monkey',
  description: '~從前端到全棧開發~和碼路工人一起學~'
}

/v-blog/docs/README.md

在README.md文件中編輯如下：

(上面說了，這個是首頁內容。注意---是markdown語法。)

---
home: true
actionText: 我要學習 ➡
actionLink: /senior-js/
features:
- title: JavaScript進階
  details: 夯實高級開發所需基礎，提升編程技能及代碼設計能力，學會閱讀分析源碼，建立健全技術知識體系，平滑過渡高級前端開發工程師。
- title: 單頁應用開發
  details: 全方位分析前端主流框架React、Vue在項目中的應用、剖析核心源碼以及內核機制、核心技術點、架構設計思想等，從根源解決開發難題。
- title: 移動端APP開發
  details: 了解移動端適配常見難點，學習Dart語法，掌握控件、布局、動畫、操作手勢、傳感器、線程網絡以及交互等核心技能。
- title: Node開發
  details: 掌握Node項目部署、發布流程，打通全棧，完成產品的自主研發上線。
footer: MIT Licensed | © 2019-present 碼路工人
---

啟動起來：

vuepress dev docs

或者在package.json文件里配置一個命令：

"scripts" :{
    "start": "vuepress dev docs"
}

就可以用以下命令啟動：

npm run start
# 或
npm start

• config.js 中的配置對應下圖中的①

• README.md 中的配置對應下圖中的②

好了，簡單主頁出來了。下面我們要添加的是Navbar導航欄以及sidebar側邊欄。

Navbar導航欄

編輯/v-blog/docs/.vuepress/config.js文件，配置themeConfig.nav。

module.exports = {
  title: 'Coder-Monkey',
  description: '~從前端到全棧開發~和碼路工人一起學~',
  themeConfig: {
    nav: [
      {
        text: 'JavaScript進階',
        items: [
          {text: '框架的設計 jQuery源碼分析', link: '/senior-js/jquery/'},
          {text: '函數式編程 Underscore源碼分析', link: '/senior-js/underscore/'},
          {text: '模塊化編程 自研模塊加載器', link: '/senior-js/module/'},
        ]
      },
      {
        text: '單頁應用開發',
        items: [
          {text: '組件化開發 React專題', link: '/spa/react/'},
          {text: '組件化開發 Vue專題', link: '/spa/vue/'},
          {text: '現代前端工程實踐方案 解鎖webpack', link: '/spa/webpack/'},
        ]
      },
      {
        text: '移動端APP開發',
        items: [
          {text: 'TODO-1', link: '/mobile/TODO1/'},
          {text: 'TODO-2', link: '/mobile/TODO2/'},
          {text: 'TODO-3', link: '/mobile/TODO3/'},
        ]
      },
      {
        text: 'Node開發',
        items: [
            {text: 'TODO-1', link: '/node/TODO1/'},
            {text: 'TODO-2', link: '/node/TODO2/'},
            {text: 'TODO-3', link: '/node/TODO3/'},
        ]
      },
      {
        text: 'Github',
        link: 'https://github.com/CoderMonkie/v-blog'
      },
    ]
  }
}

• 導航欄里面鏈接條目可以嵌套（層級可設）
• 內部鏈接兩頭斜線：link: '/route-path-here/'
• 外部鏈接直接填上網址，如上面的 Github

結果圖：

我們在上面添加了若干鏈接，還沒有寫具體文章，所以還不能跳轉。
當條目越來越多，文件也越來越長，就有必要分出單獨文件來管理了。

我們在config.js同級目錄下新建一個nav.js，
themeConfig.nav的值直接引入nav.js文件。

/v-blog/docs/.vuepress/config.js

就變成以下：

module.exports = {
  title: 'Coder-Monkey',
  description: '~從前端到全棧開發~和碼路工人一起學~',
  themeConfig: {
    nav: require('./nav')
  }
}

把剛才上面的導航配置復制粘貼到nav.js文件中。

/v-blog/docs/.vuepress/nav.js 文件編輯如下：

module.exports = [
    {
        text: 'JavaScript進階',
        items: [
          {text: '框架的設計 jQuery源碼分析', link: '/senior-js/jquery/'},
          {text: '函數式編程 Underscore源碼分析', link: '/senior-js/underscore/'},
          {text: '模塊化編程 自研模塊加載器', link: '/senior-js/module/'},
        ]
      },
      {
        text: '單頁應用開發',
        items: [
          {text: '組件化開發 React專題', link: '/spa/react/'},
          {text: '組件化開發 Vue專題', link: '/spa/vue/'},
          {text: '現代前端工程實踐方案 解鎖webpack', link: '/spa/webpack/'},
        ]
      },
      {
        text: '移動端APP開發',
        items: [
          {text: 'TODO-1', link: '/mobile/TODO1/'},
          {text: 'TODO-2', link: '/mobile/TODO2/'},
          {text: 'TODO-3', link: '/mobile/TODO3/'},
        ]
      },
      {
        text: 'Node開發',
        items: [
            {text: 'TODO-1', link: '/node/TODO1/'},
            {text: 'TODO-2', link: '/node/TODO2/'},
            {text: 'TODO-3', link: '/node/TODO3/'},
        ]
      },
      {
        text: 'Github',
        link: 'https://github.com/CoderMonkie/v-blog'
      },
]

這樣，config.js配置文件就簡潔了。

下面在配置側邊欄時，我們直接采用同樣的方法，
不再把具體配置寫在config.js中了。

Sidebar側邊欄

編輯/v-blog/docs/.vuepress/config.js文件，配置themeConfig.sidebar。

module.exports = {
  title: 'Coder-Monkey',
  description: '~從前端到全棧開發~和碼路工人一起學~',
  themeConfig: {
    nav: require('./nav'),
    sidebar: require('./sidebar')
  }
}

編輯/v-blog/docs/.vuepress/sidebar.js文件

module.exports = {
    '/senior-js/jquery/': require('../senior-js/jquery/sidebar'),
    '/senior-js/underscore/': require('../senior-js/underscore/sidebar'),
}

我們注意到，這里的鏈接也是嵌套的，
接下來再去配置子路由模塊的內容。

編輯/v-blog/docs/senior-js/jquery/sidebar.js文件

module.exports = [
    {
        title: '核心功能',
        collapsable: true,
        children: [
            '/senior-js/jquery/1',
            '/senior-js/jquery/2',
        ]
    },
    {
        title: '回調對象設計',
        collapsable: true,
        children: [
            '/senior-js/jquery/3',
            '/senior-js/jquery/4',
        ]
    },
]

上面的1234對應的是markdown文件名，所以，在jquery文件夾下新建這四個文件：

/v-blog/docs/senior-js/jquery/1.md

# jQuery-article-1

/v-blog/docs/senior-js/jquery/2.md

# jQuery-article-2

/v-blog/docs/senior-js/jquery/3.md

# jQuery-article-3

/v-blog/docs/senior-js/jquery/4.md

# jQuery-article-4

為了大家看得清晰，文件結構及配置截圖如下：

npm run start啟動起來查看效果：

注意：
  nav.js中的路由地址，
  sidebar.js中的路由地址，
  文件夾層級結構，
  這三者都是匹配的。

圖片資源

准備一張圖片/v-blog/docs/.vuepress/public/img/QRCode-CoderPower.png，把它添加到頁面。

/v-blog/docs/README.md中指定主題圖片

---
home: true
heroImage: /img/QRCode-CoderPower.png
actionText: 我要學習 ➡
// ...略...
---

圖片的默認路徑是/v-blog/docs/.vuepress/public/

所以我們填寫的路徑是：/img/QRCode-CoderPower.png

重新啟動，刷新頁面，圖片出來了：

編寫內容

博客系統搭起來了，剩下的就是寫作了，文章充實起來~

碼及時保存並push到倉庫。

給網站添加icon

• 准備icon圖片/v-blog/docs/.vuepress/public/img/icon.png

• 在config.js的head配置中指定

  head: [
    ['link', {rel: 'icon', href: '/img/icon.png'}],
  ]
  

重新啟動刷新頁面可以看到icon有了。

在左上角添加logo

原理：
 &emsp:通過添加css樣式，實現添加logo圖片

• 准備logo圖片/v-blog/docs/.vuepress/public/img/icon.png

• 新建樣式文件/v-blog/docs/.vuepress/public/css/style.css

  .navbar .site-name::before {
      height: 2.2rem;
      min-width: 2.2rem;
      margin-right: .8rem;
      vertical-align: middle;
      display: inline-block;
      content: '';
      background: url('../img/logo.png') no-repeat;
      background-size: 100%;
  }
  

• 在config.js的head配置中指定

  head: [
    // ...略...
    ['link', {rel: 'stylesheet', href: '/css/style.css'}],
  ]
  

看下效果：

其它

• 博客發布靜態網站到Github上

• 可以在head中添加CSS和js的引用

• 博客可以自定義主題

• 添加評論功能

等內容，一起探索起來吧~