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

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

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

00.契子

01.需求分析

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

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

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

初步設定:

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

02.可行性分析

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

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

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

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

使用的技術點:

  • npm
  • VuePress
  • github

追加技術點:

  • vue
  • Regex

03.數據源和工具準備

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靜態站點。

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

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

圖片描述

  • setting 裏設置好github-page屬性

圖片描述

  • docs/.vuepress/config.js 中配置 對應倉庫名 Wiki1001Pro
base: '/Wiki1001Pro/'// 這是部署到github相關的配置
  • 將build獲得的dist文件夾上傳至github

圖片描述

10.其他配置

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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章