VuePress博客搭建的簡單教程&問題分析

前奏較長，不墨跡的可直接跳轉至 04.開始搭建博客或者博客預覽

00.契子

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

01.需求分析

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

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

個人博客 => 博文產出&支持MarkDown格式&方便管理和維護
知識庫 => 知識歸納&習慣培養

初步設定：

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

02.可行性分析

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

基於VuePress搭建的項目有很多，就舉最近看到並在食用的這個，awesome-bookmarks爲例，整體滿足我的需求，感覺可以的。

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

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

使用的技術點：

npm
VuePress
github

追加技術點：

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.其他配置

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

VuePress博客搭建的簡單教程&問題分析

VuePress博客搭建的簡單教程&問題分析

00.契子

01.需求分析

02.可行性分析

03.數據源和工具準備

04.開始搭建博客

05.config.js基本配置

06.基本目錄結構

07.博客首頁

08.導入書籤

09.掛載GitHub

10.其他配置

Demo練習—TimeWaster

簡單上手CSS-Shadow

利用styleSheets快速生成一個圖標庫界面

VuePress博客搭建筆記（二）個性化配置

VuePress博客搭建的簡單教程&問題分析

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結