VuePress博客搭建筆記（一）簡單上手

時間 2019-11-05

標籤 vuepress 博客搭建筆記簡單上手简体版

原文原文鏈接

前奏較長，不墨跡的可直接跳轉至css

04.開始搭建博客

博客預覽

精簡模板源碼←

00.契子

偶爾的整理潔癖
日常有收藏+書籤的習慣
github私有倉庫免費開放
翻看博文：做爲軟件工程師，如何進行知識管理

01.需求分析

Ok，由於以上的四個契機，因緣巧合鬼使神差地，就作出了搭建一個 實用性 我的博客的想法。html

Well,那就來先分析下基本的需求吧。前端

我的博客 => 博文產出&支持MarkDown格式&方便管理和維護
知識庫 => 知識概括&習慣培養

初步設定：vue

將各應用中的書籤導入到博客中，在博客中有一塊區域負責對知識的消化與產出
配合對雲倉庫和隨筆這兩個模塊的管理來培養習慣

02.可行性分析

這時我想要的博客是能在任意場所任意時間任意平臺都能打開即食用的，對全部的知識/書籤/博文都能作一個快速的查詢,並且不想花錢搭建雲服務器和雲數據庫。
正好我目前正在使用vue框架，那麼就決定是你了，VuePress ！node

基於VuePress搭建的項目有不少，就舉最近看到並在食用的這個，awesome-bookmarks爲例，總體知足個人需求，感受能夠的。git

...程序員施工中...程序員

目前使用下來看，VuePress上手不算難也不算太簡單，花了兩天才正式擼出這個blog，仍是費了些二虎之力的。github

使用的技術點：web

npm
VuePress
github

追加技術點：chrome

vue
Regex

03.數據源和工具準備

數據
- awesome-bookmarks
- 前端最實用書籤(持續更新)
工具
- VuePress官方文檔
- node.js>=8.0
- Yarn
- 一個文本編輯器(好比webstorm,主要用來可視化執行命令)

04.開始搭建博客

安裝

1.安裝程序 node.js 或者 Yarn。VuePress支持使用Yarn和npm來安裝，Node.js版本須要>=8才能夠。

此處選擇熟悉的工具便可，博主這裏用的是npm咯。

2.打開cmd，在控制檯輸入如下代碼：

全局安裝VuePress

yarn global add vuepress # 或者：npm install -g vuepress

## 或者也能夠在已存在的項目中開發，將 VuePress 做爲一個本地依賴安裝，
## 上下兩條選擇一個便可，博主選擇上者，省點折騰。

## yarn add -D vuepress # 或者：npm install -D vuepress

建立新項目目錄

mkdir project
cd project

初始化項目

yarn init -y # 或者 npm init -y

接着，在 package.json 里加一些腳本:

{
  "scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs"
    /* docs:dev 鍵值能夠自定義修改，此處是爲了和一些項目中默認腳本中自帶的 dev 區分開。
    若是修改了這個doc:dev 爲 mydev，那麼下面執行vuepress dev docs的命令就變成了npm run mydev
    npm run mydev 等於在該項目的根目錄下執行vuepress dev doc
    vuepress dev doc 作的就是調用安裝的vuepress去根據你目錄中的.vuepress配置項和docs下的全部.md/。html文件作一個項目的編譯和打包
    docs:build 同理 */
  }
}

而後就能夠開始寫做了:

yarn docs:dev # 或者：npm run docs:dev

要生成靜態的 HTML 文件，運行：

yarn docs:build # 或者：npm run docs:build

默認狀況下，文件將會被生成在 .vuepress/dist，固然，你也能夠經過 .vuepress/config.js 中的 dest 字段來修改，生成的文件能夠部署到任意的靜態文件服務器上.

不習慣命令行輸入的也能夠直接依靠windows可視化操做創建以下工程目錄。

project
├─── docs
│   ├── README.md
└── package.json

在README.md中輸入一些內容，在package.json中注入腳本命令。並將命令掛載到webstorm的命令配置處。
而後點擊運行run dev ，run build 來自動生成.vuepress文件夾

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

無論使用哪一種方式，最終的項目結構應該和上面同樣。

docs文件夾是你的根目錄，也是vuepress要去解析的文件夾，
docs下的README.md能夠理解爲首頁頁面。
docs下的.vuepress是一些配置文件，這裏能夠存放圖片等靜態資源，一些主題配置，自定義組件等等

至此，一個基於docs文件夾下的README.md文件生成的頁面就製做完成了。👏

05.config.js基本配置

module.exports = {
    title: 'Wiki 1001', // 頁籤標題 : A001_VuePress博客搭建的簡單教程&問題分析 # | Wiki 1001
    description: '金志相的 Wiki 1001 維基百科', // meta 中的描述文字，意義不大，SEO用
    // 注入到當前頁面的 HTML <head> 中的標籤
    head: [
        // 增長一個自定義的 favicon(網頁標籤的圖標)
        // 這裏的 '/' 指向 docs/.vuepress/public 文件目錄 
        // 即 docs/.vuepress/public/img/geass-bg.ico
        ['link', { rel: 'icon', href: '/img/geass-bg.ico' }], 
    ],
    base: '/Wiki1001Pro/', // 這是部署到github相關的配置
    markdown: {
        lineNumbers: true // 代碼塊顯示行號
    },
 }

config.js中繼續配置主題參數 頂部導航欄

module.exports = {
    ...
    themeConfig: {
        sidebarDepth: 4, // e'b將同時提取markdown中h2 和 h3 標題，顯示在側邊欄上。
        lastUpdated: 'Last Updated' ,// 文檔更新時間：每一個文件git最後提交的時間,
        // 頂部導航欄
        nav:[
             // 單項 text：顯示文字，link：指向連接
             // 這裏的'/' 指的是 docs文件夾路徑
             // [以 '/' 結尾的默認指向該路徑下README.md文件]
            { text: '求索', link: '/FAQ/' },  // http://localhost:8080/Wiki1001Pro/FAQ/
            { text: '倉庫', link: '/Store/' },
            { text: '隨筆', link: '/Thought/' },
            // 多項，下拉形式
            {
                text: 'Concat',
                items: [
                    // link：指向連接也能夠是外網連接
                    { text: 'Segmentfault', link: 'https://segmentfault.com/u/mulander' },
                ]
            },
            {
                text: 'GitHub',
                items: [
                    { text: 'GitHub首頁', link: 'https://github.com/Mulander-J' },
                    { text: 'Island', link: 'https://mulander-j.github.io/island/code/html/index.html' },
                    { text: 'TimeWaster', link: 'https://mulander-j.github.io/timeWaster/demo/index.html#/' },
                ]
            },
        ],
    }
}

config.js中繼續配置主題參數 側邊欄

module.exports = {
   ...
   themeConfig: {
   ...
    // 側邊欄菜單( 一個模塊對應一個菜單形式 )
    sidebar:{
         // 打開FAQ主頁連接時生成下面這個菜單
        '/FAQ/':[
            //多級菜單形式
            {
                // 菜單名
                title: '消化堆',
                // 子菜單
                children: [
                    // ['','']=>[路徑,標題]
                    // 或者寫成 '路徑',標題自動識別爲該地址的文件中的h1標題
                    // 不以 '/' 結尾的就是指向.md文件             
                    ['/FAQ/DigestionHeap/Digested','消化過'], // '/FAQ/DigestionHeap/Digested.md'文件
                    ['/FAQ/DigestionHeap/Digesting','消化中'],
                    ['/FAQ/DigestionHeap/DigestWill','待消化']
                ]
            },
            {
                title: '輸出層',
                children: [
                    ['/FAQ/Console/A001','#A001_VuePress'],
                    ['/FAQ/Console/A002','#A002_插件清單']
                ]
            },
            ['/FAQ/','百科首頁'],
            ['/FAQ/Pool/SkillStack','技術棧'],
            ['/FAQ/Pool/Review','歸去來']
        ],
         // 打開Thought主頁連接時生成下面這個菜單
        '/Thought/':[
            ['/Thought/','隨筆首頁'],
            {
                title: '遊記',
                children: [
                    ['/Thought/Travels/beiPing','北平遊記'],
                ]
            },
            {
                title: '年終回顧',
                children: [
                   ['/Thought/YearReview/2018','2018年'],
                   ['/Thought/YearReview/2019','2019年']
                ]
            },
        ],
          // 打開Store主頁連接時生成下面這個菜單
        '/Store/': [
            ['','倉庫首頁'],
            {
                title: '應用',
                children: [
                    ['/Store/Apps/DownDoors', '下載門戶'],
                    ['/Store/Apps/OwnTest', '博主測評']
                ]
            },
            {
                title: '電影',
                children: [
                    ['/Store/Films/','收藏級電影']
                ]
            },
            {
                title: '動畫',
                children: [
                    ['/Store/Anime/','收藏級動畫']
                ]
            },
        ]
    },
}

注意事項

和圖標/圖片等靜態資源相關的其 '/' 默認指向的是 docs/.vuepress/public/
和側邊欄/導航欄相關的地址配置其 '/' 默認指向的是 docs/
側邊欄/導航欄指向.md文件的須要先創建相關.md文件，否則會報404或者頁面空白

06.基本目錄結構

本博客的工程目錄結構-版本以編輯時間爲準，

可配合上文 config.js 關聯配置

Dev
├─── docs
│   └── .vuepress   // 配置目錄
│   │    ├── public // 靜態資源
│   │    ├──── img
│   │    ├────── geass-bg.ico // 圖標
│   │    ├────── logo.jpg // 首頁logo
│   │    └── config.js
│   ├── FAQ // 求索模塊
│   │    ├── Console    // 一級目錄 輸出層
│   │    │      ├── img    // 博文引用 的 相關圖片
│   │    │      │   ├── A001    // A001博文的圖片庫
│   │    │      │   └──── 001.jpg   
│   │    │      ├── A001.md    // 輸出層
│   │    │      └── A002.md    // 輸出層
│   │    ├── DigestionHeap // 一級目錄 消化堆
│   │    │      ├── Digested.md    // 二級目錄 消化過
│   │    │      ├── Digesting.md    // 二級目錄 消化中
│   │    │      └── DigestWill.md    // 二級目錄 待消化
│   │    ├── Pool // 靜態池
│   │    │      ├── SkillStack.md    // 技術棧
│   │    │      └── Review.md    // 歸去來
│   │    └── README.md  // 求索首頁
│   ├── Store
│   │    ├── Anime    // 一級目錄 動漫
│   │    │      └── README.md
│   │    ├── Apps // 一級目錄 應用
│   │    │      ├── DownDoors.md    //  下載門戶
│   │    │      └── OwnTest.md    //  博主測評
│   │    ├── Films // 一級目錄 電影
│   │    │      └── README.md
│   │    └── README.md  // 倉庫首頁
│   ├── Thought
│   │    ├── Travels    // 一級目錄 遊記
│   │    │      └── beiPing.md   
│   │    ├── YearReview // 一級目錄 年終回顧
│   │    │      ├── img    // 博文引用 的 相關圖片
│   │    │      │   ├── 2018    // 2018博文的圖片庫
│   │    │      │   ├──── 001.jpg   
│   │    │      │   ├─——─ 002.jpg   
│   │    │      │   └──── 003.jpg   
│   │    │      ├── 2018.md    
│   │    │      └── 2019.md   
│   │    └── README.md  // 隨筆首頁
│   └── README.md   // 博客首頁
└── package.json

07.博客首頁

---
home: true
heroImage: /img/logo.jpg
heroText: Wiki 1001
tagline: Meet 1000 Books & Unit Them Into 1 Wiki
actionText: Get Wiki →
actionLink: /FAQ/
features:
- title: Wiki - 求索
  details: 基於書籤對知識點進行 整理，吸取，吐納，歸檔。吾將上下而求索...
- title: Store - 倉庫
  details: 展望雲倉庫而概括整理，方便行事&培養習慣。魚和熊掌我全都要...
- title: Thought - 隨筆
  details: 活着，是一件最能帶來知足感的事。細細琢磨吧，人生啊，有意思的很...
footer: MIT Licensed | Copyright © 2019.01.11-present Mulander-J
---

oops！ 😀 footer 沒截到，應該不用我多講了吧。

08.導入書籤

首先，從Chrome瀏覽器中出的書籤是下面這個格式的

<DT><H3 ADD_DATE="1547274523" LAST_MODIFIED="1547274529">myGits</H3>
    <DL><p>
        <DT><A HREF="https://mulander-j.github.io/Wiki1001Pro/index.html" ADD_DATE="1547274505">Wiki 1001</A>
        <DT><A HREF="https://mulander-j.github.io/timeWaster/demo/index.html#/" ADD_DATE="1546489726" ICON="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAACpElEQVQ4jT2Su29cZRDFfzPfd+8+/FrjKI4TiEAWiJcQ/AGUdPQpaBB/EhIFDR3/AEKyUAoKkNKBgUgUIGEFRzJ+xbte7+7de785FGs4zZFG8zhnZgzg20dfvNWH9ZIsqgpoWaGqVtz+F1ihi2KGyvHJ5e/286dfv+699AMwCiIwsMAwQLcVtiKBzIyIUD/V3kZ8lqveYGipbEnqmQwzIBkqgQ0yRYXUgG6bmBnuFr2qdnXdpoe6EBRJAgUQgVSaTvW9DZ0PG11Pr2VmEhFShFYiJEXxNtwQELAaD4YRpbD+8ksMHm5zdPGcprQk81VOCEnmDj70UFRm9N1ow0pbTI4pZPXuho0e3LGmbe345tRuFo1pGea9yuglonTmXXRGF4zTgnhlSH+0RswapKC9uGF2Nia5czO+5tKnpNc2meSGq+sxs2VLXlLTlxhO4PjqGTvvPeT+u/u8+PEILQvRBtWgZv+jDzDg6PCI9mrOzvoILPC6WhJAVfd4kHb4+/FTjucXbHz8BtPZDdF0vPPoQ/qjNY4ODimThlyvrtOWFqetb/cS5F7Fq5t77N3b4+TZc07OT1FbmD6/pF7rgSD3KkwgRARkKpAMwyjLjrW7I4S4//4+63dHmBmzf8bMzyas744o8xZPjptTvOC5ZJlJhskk+Xatp9880U+fH8hAucr65cvH+uvgUOu7WyIkd5NhZGXlliVuq7/1KjE/m5AbWMwafvvqe3JV0Y7nJJzZ6eR/C26uIMgWbigQUoSULOnOcMsJaX45JaVEdetfi07myQwLg5SyWQZvs5mnqvYSgZkxyDWD3OfFfMJy0TLsDXAMM8cNJNKg6rPomi6f//nrH7tvvv1JKdo2984oRkBlibU8oO1auhKkBElQBLjZomu6MuW7fwHKV31zU2eghQAAAABJRU5ErkJggg==">TWaster</A>
    </DL><p>
</DT>

其次，我對markdown的語法其實不是很熟。

對於連接的寫法我直接複製過來的以下:

[連接][3]

emm...這樣寫我幾百個書籤豈不是要編號編到死哦。😂

因而我取巧了下，用下面這種vue寫法替代

<ul>
    <li  v-for="a in [
    {title:'讓我幫你百度一下',url:'http://baidu.apphb.com/'},
    {title:'Kaspersky Cyberthreat',url:'https://cybermap.kaspersky.com/'},
    {title:'Breathingearth',url:'http://www.breathingearth.net/'}
    ]">
        <a :href='a.url' target='_blank'>{{a.title}}<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>
    </li>
</ul>

這樣寫確實比編着號寫方便，可是語義不強，閱讀性和維護性不太好。

直到我忽然看到了這種寫法

[連接](http://alink.com)

WTF?!🤬 🌶真的難受，我寫了一半了欸。

爲了完整性和一致性，改回來！！！

那麼怎麼把chrome的書籤導入到markdown裏呢？我是這樣作的

<DL><p>
    <DT><A HREF="https://mulander-j.github.io/Wiki1001Pro/index.html" ADD_DATE="1547274505">Wiki 1001</A>
    <DT><A HREF="https://mulander-j.github.io/timeWaster/demo/index.html#/" ADD_DATE="1546489726" ICON="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAACpElEQVQ4jT2Su29cZRDFfzPfd+8+/FrjKI4TiEAWiJcQ/AGUdPQpaBB/EhIFDR3/AEKyUAoKkNKBgUgUIGEFRzJ+xbte7+7de785FGs4zZFG8zhnZgzg20dfvNWH9ZIsqgpoWaGqVtz+F1ihi2KGyvHJ5e/286dfv+699AMwCiIwsMAwQLcVtiKBzIyIUD/V3kZ8lqveYGipbEnqmQwzIBkqgQ0yRYXUgG6bmBnuFr2qdnXdpoe6EBRJAgUQgVSaTvW9DZ0PG11Pr2VmEhFShFYiJEXxNtwQELAaD4YRpbD+8ksMHm5zdPGcprQk81VOCEnmDj70UFRm9N1ow0pbTI4pZPXuho0e3LGmbe345tRuFo1pGea9yuglonTmXXRGF4zTgnhlSH+0RswapKC9uGF2Nia5czO+5tKnpNc2meSGq+sxs2VLXlLTlxhO4PjqGTvvPeT+u/u8+PEILQvRBtWgZv+jDzDg6PCI9mrOzvoILPC6WhJAVfd4kHb4+/FTjucXbHz8BtPZDdF0vPPoQ/qjNY4ODimThlyvrtOWFqetb/cS5F7Fq5t77N3b4+TZc07OT1FbmD6/pF7rgSD3KkwgRARkKpAMwyjLjrW7I4S4//4+63dHmBmzf8bMzyas744o8xZPjptTvOC5ZJlJhskk+Xatp9880U+fH8hAucr65cvH+uvgUOu7WyIkd5NhZGXlliVuq7/1KjE/m5AbWMwafvvqe3JV0Y7nJJzZ6eR/C26uIMgWbigQUoSULOnOcMsJaX45JaVEdetfi07myQwLg5SyWQZvs5mnqvYSgZkxyDWD3OfFfMJy0TLsDXAMM8cNJNKg6rPomi6f//nrH7tvvv1JKdo2984oRkBlibU8oO1auhKkBElQBLjZomu6MuW7fwHKV31zU2eghQAAAABJRU5ErkJggg==">TWaster</A>
</DL><p>

1. Ctrl+F 或者 Ctrk+R 喚出文檔尋找和替換菜單
1. 輸入 " ADD_DATE[^>]*"> 替換爲 )[
1. 輸入 <DT><A HREF=" 替換爲 (
1. 輸入 <DL><p> 替換爲 ''
1. 輸入 </DL><p> 替換爲 ''

獲得結果以下

(http://alink.com)[連接]

6.而後選中連接或者連接標題移動一下就能夠了。

這樣全部的連接都出來了，只是要每一個都去加回車換行和互換先後順序。

若是有其餘更好的方法，能夠給我留言~

09.掛載GitHub

由於這段時間github私有倉庫免費開放了，我親自試了下，公有私有互相切換是真的絲滑，真香！

因此這個博客工程也就嘗試性地放到了私有倉庫裏，

又由於私有倉庫不能建立github-page，因此我只好建立了一個對應的公有倉庫用來存放dist靜態站點。

同時，也很好地區分開了開發環境與生產環境

嗯，這麼解釋就舒服多了，一點也不麻煩🤪

創建一個公有倉庫： https://github.com/Mulander-J...

在 setting 裏設置好github-page屬性

docs/.vuepress/config.js 中配置對應倉庫名 Wiki1001Pro

base: '/Wiki1001Pro/'// 這是部署到github相關的配置

將build得到的dist文件夾上傳至github

訪問https://github.com/Mulander-J...

10.其餘配置

詳細的目前尚未試過就不繼續寫了，走到這裏的話應該能搭建出和本博客同樣的站點了。
具體的能夠去網上繼續學習研究

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。