手把手帶你搭建VuePress的技術部落格

qiufeihong2018發表於2019-03-22

Vue

先看效果圖:

首頁

評論區域

需要node環境和npm支援

如果不會安裝npm請轉到如何安裝 npm 並管理 npm 版本

vuepress

這個還是蠻不錯的,尤大出品,必屬精品.

vuepress是什麼?

Vue 驅動的靜態網站生成器
簡潔至上以 Markdown 為中心的專案結構，以最少的配置幫助你專注於寫作。
Vue驅動享受 Vue + webpack 的開發體驗，可以在 Markdown 中使用 Vue 元件，又可以使用 Vue 來開發自定義主題。
高效能 VuePress 會為每個頁面預渲染生成靜態的 HTML，同時，每個頁面被載入的時候，將作為 SPA 執行。

具體就不介紹了

詳情請看官網vuepress

既然是手把手,當然我得一步一步下來

全域性安裝

npm install -g vuepress
複製程式碼

建立專案vuepess-blog

mkdir vuepress-blog
複製程式碼

專案初始化

npm init -y
複製程式碼

完了,會建立一個package.json

{
  "name": "vuepess-blog",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}
複製程式碼

其中新增主README.md檔案

touch README.md
複製程式碼

在這個檔案中主要寫一些這是什麼專案啊,這個專案有什麼特性啊,這個專案怎麼啟動啊等等

# vuepress-blog
> a vuepress blog about qiufeihong

### Build Setup


# clone item
git clone git@github.com:qiufeihong2018/vuepress-blog.git

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# deploy https://username.github.io
npm run d

# pm2 deploy
npm run server 


### main page
![avatar](./shotPic/main.png)

### feature
- [x] 可以統計閱讀量
- [x] 支援評論
- [ ] Algolia搜尋
- [ ] 在 GitHub 上編輯此頁
- [ ] SEO


複製程式碼

新增docs資料夾

mkdir docs
複製程式碼

這個資料夾中主要放些你的配置和所寫的部落格內容

在docs資料夾中建立.vuepress資料夾

cd docs
mkdir .vuepress
複製程式碼

這個資料夾中你就可以放配置了

新建總配置config.js檔案

cd .vuepress
touch config.js
複製程式碼

主要配置都寫在這裡，我將側邊欄和導航懶配置抽離出來，實現模組化

module.exports = {
    title: '飛鴻的部落格',
    description: '我的心路歷程',
    dest: './dist',
    port: '7777',
    head: [
        ['link', {rel: 'icon', href: '/logo.gif'}]
    ],
    markdown: {
        lineNumbers: true
    },
    themeConfig: {
        nav: require('./nav'),
        sidebar: require('./sidebar'),
        sidebarDepth: 2,
        lastUpdated: 'Last Updated',
        searchMaxSuggestoins: 10,
        serviceWorker: {
            updatePopup: {
                message: "New content is available.",
                buttonText: 'Refresh'
            }
        },
        editLinks: true,
        editLinkText: '在 GitHub 上編輯此頁 ！'
    }
}

複製程式碼

新建導航欄nav.js

效果：

閉合

2. 展開

touch nav.js
複製程式碼

導航欄配置放在這個檔案中

陣列中的每個物件指的是每個導航標籤;
text就是導航標籤名;
link就是該檔案的路徑，docs是該路徑的根目錄，所以要‘/’開頭。如果是外部連結，那就直接放進去即可。
導航標籤下拉選單，就要配置items，裡面也是一個陣列物件，同上。

module.exports = [
    {
        text: '首頁', link: '/'
    },
    {
        text: '學習資源',
        items: [
            {text: '前端學習路線', link: 'http://www.imooc.com/article/261756'},
            {text: '前端學習視訊', link: '/front-end-video/'},
            {text: '全棧', link: '/resource/'}
        ]
    },
    {
        text: '優文轉載', link: '/reprint/'
    },
    {
        text: '技術總結',
        items: [
            {
                text: 'mongo', link: '/technical-summary/mongo/'
            },
            {
                text: 'vue-webpack', link: '/technical-summary/vue-webpack/'
            },
            {
                text: 'Vue.js 元件精講', link: '/technical-summary/vue-component/'
            },
            {
                text: 'ubuntu', link: '/technical-summary/ubuntu/'
            },
            {
                text: 'eslint', link: '/technical-summary/eslint/'
            },
            {
                text: 'nuxt', link: '/technical-summary/nuxt/'
            },
            {
                text: 'node', link: '/technical-summary/node/'
            },
            {
                text: 'css', link: '/technical-summary/css/'
            },
            {
                text: 'github', link: '/technical-summary/github/'
            },
            {
                text: 'es6', link: '/technical-summary/es6/'
            }

        ]
    },
    {
        text: '視訊總結', link: '/video-summary/'
    },
    {
        text: '面試', link: '/interview/'
    },
    {
        text: '優秀部落格',
        items: [
            {
                text: '張鑫旭-鑫空間-鑫生活', link: 'https://www.zhangxinxu.com/'
            }
        ]
    },
    {
        text: '個人主頁',
        items: [
            {
                text: 'GitHub', link: 'https://github.com/qiufeihong2018'
            },
            {
                text: '掘金', link: 'https://juejin.im/user/5bf4d63cf265da61561ee241/posts'
            },
            {
                text: 'CSDN', link: 'https://blog.csdn.net/weixin_38465623'
            },
            {
                text: 'segmentfault', link: 'https://segmentfault.com/u/qiufeihong2018'
            },
            {
                text: '知乎', link: 'https://www.zhihu.com/people/chou-fei-hong/activities'
            },
            {
                text: '簡書', link: 'https://www.jianshu.com/'
            },
            {
                text: 'v2ex', link: 'https://www.v2ex.com/'
            }
        ]
    },
    {
        text: '那些年的電影', link: '/movie/'
    }
]

複製程式碼

當你們像我這樣配置時，目錄結構最好和我一樣

目錄結構如下：

建立側邊欄sidebar.js

效果：

側邊欄配置放在這裡,將其他資料夾中的側邊欄配置引進來

module.exports = {
    '/technical-summary/github/': require('../technical-summary/github/sidebar'),
    '/technical-summary/vue-component/': require('../technical-summary/vue-component/sidebar'),
    '/interview/': require('../interview/sidebar'),
    '/reprint/':require('../reprint/sidebar')
}

複製程式碼

上述的具體檔案的目錄結構如下：

technical-summary

interview

reprint

在docs資料夾下面建立一個README.md檔案

預設的主題提供了一個首頁，跟VuePress一樣的主頁

效果如下：


home: true
heroImage: /logo.jpg
actionText: 快速上手 →
actionLink: /zh/guide/
features:
- title: 簡潔至上
  details: 以 Markdown 為中心的專案結構，以最少的配置幫助你專注於寫作。
- title: Vue驅動
  details: 享受 Vue + webpack 的開發體驗，在 Markdown 中使用 Vue 元件，同時可以使用 Vue 來開發自定義主題。
- title: 高效能
  details: VuePress 為每個頁面預渲染生成靜態的 HTML，同時在頁面被載入的時候，將作為 SPA 執行。
footer: MIT Licensed | Copyright © 2018-present Evan You

複製程式碼

也可以像我這樣配置：你可以將首頁圖片換成gif格式的，騷一點

效果如下：

---
home: true
heroImage: /logo-computed.gif
actionText: 是時候展現真正的技術了 →
actionLink: /resource/
features:
- title:  比爾·蓋茨經典語錄/名句
  details: 只要有堅強的持久心，一個庸俗平凡的人也會有成功的一天，否則即使是一個才識卓越的人，也只能遭遇失敗的命運。

- title: 賈伯斯經典語錄/名句
  details: 你的時間有限，所以不要為別人而活。不要被教條所限，不要活在別人的觀念裡。不要讓別人的意見左右自己內心的聲音。最重要的是，勇敢的去追隨自己的心靈和直覺，只有自己的心靈和直覺才知道你自己的真實想法，其他一切都是次要。

- title: 李嘉誠經典語錄/名句
  details: 當你放下面子賺錢的時候，說明你已經懂事了。當你用錢賺回面子的時候，說明你已經成功了。當你用面子可以賺錢的時候，說明你已經是人物了。當你還停留在那裡喝酒、吹牛，啥也不懂還裝懂，只愛所謂的面子的時候，說明你這輩子也就這樣了。

footer: MIT Licensed | Copyright © 2019-present FeiHong
---

### 12345
```bash
# clone item
git clone git@github.com:qiufeihong2018/vuepress-blog.git

# install dependencies
npm install 

# serve with hot reload at localhost:6666
npm run dev

# build for production with minification
npm run build

# deploy to github page
npm run d

# build&&pm2
npm run server


::: warning 注意

請確保你的 Node.js 版本 >= 8。
:::

複製程式碼

現在就可以在docs資料夾中寫部落格內容了

我就舉一個最簡單的例子

建立front-end-video檔案,在資料夾中建立README.md,這裡面寫部落格啦

mkdir front-end-video
cd front-end-video
touch README.md
複製程式碼

###  前端學習
技術部落格

複製程式碼

在package.json中新增啟動命令

啟動專案:npm run dev 這條命令就等於vuepress dev docs
打包專案:npm run build 這條命令就等於vuepress build docs

{
  "name": "vuepress-blog",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "vuepress dev docs",
    "build": "vuepress build docs",
    "server": "npm run build && pm2 start blog.js",
    "d": "bash deploy.sh"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@vuepress/plugin-back-to-top": "^1.0.0-alpha.0",
    "element-ui": "^2.5.4",
    "express": "^4.16.4",
    "leancloud-storage": "^3.12.0",
    "pm2": "^3.2.9",
    "valine": "^1.3.4",
    "vuepress": "^0.14.9"
  }
}

複製程式碼

你的專案就run起來了

推送到遠端倉庫

在GitHub中新建倉庫
在根目錄下新增.gitignore忽略一些檔案
推送上去

node_modules
dist
.idea
複製程式碼

git init

git add .

git commit -m "my first push vuepess blog"

git push

複製程式碼

掛載到GitHub Pages

這裡的'#'是註釋

然後開啟你的github倉庫,再建一個倉庫
將下列第20行中我的倉庫名替換成你的倉庫名
在package.json中新增命令npm run d,這條命令就是bash deploy.sh,這條命令的意思是啟動這個指令碼
你的vueress的部落格就成功掛載GitHub Pages上了

###!/usr/bin/env sh

### 確保指令碼丟擲遇到的錯誤
set -e

### 生成靜態檔案
npm run build

### 進入生成的資料夾
cd dist

### 如果是釋出到自定義域名
### echo 'www.yourwebsite.com' > CNAME

git init
git add -A
git commit -m 'deploy'

### 如果你想要部署到 https://USERNAME.github.io
git push -f git@github.com:qiufeihong2018/qiufeihong2018.github.io.git master

### 如果釋出到 https://USERNAME.github.io/<REPO>  REPO=github上的專案
### git push -f git@github.com:USERNAME/<REPO>.git master:gh-pages

cd -
複製程式碼

完了後，就可以qiufeihong2018.github.io/訪問了

pm2守護程式

效果自行腦補，後臺一直執行

安裝pm2,將其寫進package.json中

npm install -save pm2
複製程式碼

用到express,所以你得先安裝一下 npm install -save express

根檔案中新增pm2指令碼blog.js

const fs = require('fs');
const path = require('path');
const express = require('express');
const chalk = require('chalk')
const blog = express();
blog.use(express.static(path.resolve(__dirname, './dist')))

blog.get('*', function(req, res) {
    const html = fs.readFileSync(path.resolve(__dirname, './dist/index.html'), 'utf-8')
    res.send(html)
})
blog.listen(7777, res => {
    console.log(chalk.yellow('Start Service On 7777'));
});

複製程式碼

新增啟動命令

npm run server:這條命令是npm run build && pm2 start blog.js,意思是打包並且啟動pm2

想要知道更多pm2操作，請移步pm2

新增valine評論和閱讀量統計

效果如下：

安裝valine模組

npm install -save valine
複製程式碼

在.vuepress中建立components資料夾,在其中建立Valine元件

<template>
    <div class="page">
        <section class="page-edit">
            <div>
                <!-- id 將作為查詢條件 -->
                <span class="leancloud-visitors"
                      data-flag-title="Your Article Title">
        <em class="post-meta-item-text">閱讀量： </em>
        <i class="leancloud-visitors-count"></i>
      </span>
            </div>
            <h3>
                <a href="javascript:;"></a>
                評 論：
            </h3>
            <div id="vcomments"></div>
        </section>
    </div>

</template>

<script>
    export default {
        name: 'Valine',
        mounted: function () {
            // require window
            const Valine = require('valine');
            if (typeof window !== 'undefined') {
                this.window = window
                window.AV = require('leancloud-storage')
            }
            this.valine = new Valine()
            this.initValine()
        },
        watch: {
            $route (to, from) {
                if (from.path != to.path) {
                    this.initValine()
                }
            }
        },
        methods: {
            initValine () {
                let path = location.origin + location.pathname
                // vuepress打包後變成的HTML不知為什麼吞掉此處的繫結`:id="countId"`
                document.getElementsByClassName('leancloud-visitors')[0].id = path
                this.valine.init({
                    el: '#vcomments',
                    appId: '********',// your appId
                    appKey: '********', // your appKey
                    notify: false,
                    verify: false,
                    path: path,
                    visitor: true,
                    avatar: 'mm',
                    placeholder: 'write here'
                });
            }
        }
    }
</script>
複製程式碼

修改其中的appId和appKey
獲取APP ID 和 APP Key,請先登入或註冊 LeanCloud, 進入控制檯後點選左下角建立應用
在.vuepress中建立theme資料夾
將node_modules中的Layout拷貝到theme資料夾中

將引用的檔案路徑改成指向node_modules去

    import Vue from 'vue'
    import nprogress from 'nprogress'
    import Home from '../../../node_modules/vuepress/lib/default-theme/Home.vue'
    import Navbar from '../../../node_modules/vuepress/lib/default-theme/Navbar.vue'
    import Page from '../../../node_modules/vuepress/lib/default-theme/Page.vue'
    import Sidebar from '../../../node_modules/vuepress/lib/default-theme/Sidebar.vue'
    import SWUpdatePopup from '../../../node_modules/vuepress/lib/default-theme/SWUpdatePopup.vue'
    import {resolveSidebarItems} from '../../../node_modules/vuepress/lib/default-theme/util'
    import Valine from '../components/Valine'
複製程式碼

在Layout中新增valine

<template>
    <div
            class="theme-container"
            :class="pageClasses"
            @touchstart="onTouchStart"
            @touchend="onTouchEnd"
    >
        <Navbar
                v-if="shouldShowNavbar"
                @toggle-sidebar="toggleSidebar"
        />

        <div
                class="sidebar-mask"
                @click="toggleSidebar(false)"
        ></div>

        <Sidebar
                :items="sidebarItems"
                @toggle-sidebar="toggleSidebar"
        >
            <slot
                    name="sidebar-top"
                    slot="top"
            />
            <slot
                    name="sidebar-bottom"
                    slot="bottom"
            />
        </Sidebar>

        <div
                class="custom-layout"
                v-if="$page.frontmatter.layout"
        >
            <component :is="$page.frontmatter.layout"/>
        </div>

        <Home v-else-if="$page.frontmatter.home"/>

        <Page
                v-else
                :sidebar-items="sidebarItems"
        >
            <slot
                    name="page-top"
                    slot="top"
            />
            <slot
                    name="page-bottom"
                    slot="bottom"
            />
        </Page>
        <Valine></Valine>

        <SWUpdatePopup :updateEvent="swUpdateEvent"/>
    </div>
</template>
複製程式碼

大功告成

目前暫不支援首頁去除,每個頁面最底下都有

想要知道更多Valine操作，請移步Valine

導航欄分類小技巧

效果圖

如圖,優秀部落格分為個人部落格和團隊部落格兩大類,實驗證明,items是可以一直items下去的,所以可以分得很細

    {
        text: '優秀部落格',
        items: [
            {
                text: '個人部落格',
                items: [
                    {
                        text: '張鑫旭-鑫空間-鑫生活', link: 'https://www.zhangxinxu.com/'
                    },
                    {
                        text: 'Cherry\'s Blog', link: 'https://cherryblog.site/'
                    },
                    {
                        text: 'ECMAScript 6 入門', link: 'http://es6.ruanyifeng.com/'
                    }
                ]
            },
            {
                text: '團隊部落格',
                items: [

                    {
                        text: '美團技術部落格', link: 'https://tech.meituan.com/'
                    },
                    {
                        text: '百度前端fex', link: 'http://fex.baidu.com/'
                    },
                    {
                        text: '淘寶前端團隊FED', link: 'http://taobaofed.org/'
                    },
                    {
                        text: '騰訊CDC', link: 'https://cdc.tencent.com/'
                    },
                    {
                        text: '京東JDC', link: 'https://jdc.jd.com/'
                    },
                    {
                        text: '攜程設計委員會Ctrip Design Committee', link: 'http://ued.ctrip.com/'
                    },
                    {
                        text: '騰訊全端AlloyTeam', link: 'http://www.alloyteam.com/2018/12/13440/'
                    }
                ]
            }
        ]
    },

複製程式碼

其餘配置

Markdown 擴充

參考文獻

VuePress 手把手教你搭建一個類Vue文件風格的技術文件/部落格

手把手教你使用 VuePress 搭建個人部落格

vuepress和valine搭建帶評論的部落格

feihong碼字不易，求路過的小哥哥小姐姐的star。github地址
歡迎關注feihong的掘金賬號。
有興趣也可以關注feihong的 GitHub。
原文地址。

VuePress 手摸手教你搭建Vue風格的技術文件/部落格
2022-06-08
Vue
一篇帶你用 VuePress + Github Pages 搭建部落格
2021-12-17
VueGithub
vuepress和valine搭建帶評論的部落格
2019-01-03
Vue
VuePress 手摸手教你搭建一個類Vue文件風格的技術文件/部落格
2018-09-10
Vue
使用VuePress快速搭建部落格
2022-09-14
Vue
手把手教你用Hexo搭建個人技術部落格
2018-03-30
Hexo
搭建 VuePress 部落格，你可能會用到的一些外掛
2022-02-16
Vue
技術人如何搭建自己的技術部落格
2018-09-20
VuePress從零開始搭建自己的部落格
2018-06-09
Vue
搭建自己的技術部落格系列（三）讓你的部落格擁有評論功能！
2019-09-14
VuePress 部落格搭建系列 33 篇正式完結！
2022-03-30
Vue
搭建自己的技術部落格系列（四）部落格接入百度統計，隨時瞭解你部落格的PV/UV
2019-09-14
使用vuepress搭建GitHub pages靜態部落格頁面
2020-09-08
VueGithub
手把手教你搭建部落格
2022-03-24
onethink搭建的技術部落格--悠悠極客
2019-05-11
「山禾說成長」：手把手教你搭建一個完全屬於自己的技術部落格
2020-07-08
搭建個人部落格手把手教程
2018-03-12
使用 Github Actions 部署 VuePress 部落格
2021-05-31
GithubVue
個人技術部落格
2017-11-10
個人技術部落格（α）
2017-11-16
技術部落格收藏
2016-01-05
基於 Vuepress 搭建個人部落格，文章詳細，助你快速上手
2020-11-21
Vue
VuePress部落格美化之reco主題
2020-07-28
Vue
如何寫技術部落格
2022-03-22
oracle、sql技術部落格
2016-06-15
OracleSQL
Oracle技術部落格集合
2012-07-23
Oracle
Hexo已經看膩了，來試試VuePress搭建個人部落格
2018-04-23
HexoVue
寶塔皮膚搭建wordpress個人技術部落格（圖文教程）
2020-07-12
從零開始教你用vuepress搭建自己的部落格（1）—基礎篇
2019-04-12
Vue
想寫技術部落格了
2019-04-02
技術部落格那些事兒
2017-07-18
C-部落格，技術文件
2016-05-21
轉：技術牛人部落格
2016-01-19
從 0 開始搭建一個技術部落格，私藏乾貨~
2019-01-25
程式設計師如何從0到1搭建自己的技術部落格
2019-03-29
程式設計師
VuePress 部落格優化之開啟 HTTPS
2022-01-17
Vue優化HTTP
Vuepress + GitHub Actions 實現部落格自動部署！
2021-08-26
VueGithub
搭建自己的技術部落格系列（六）酷炫主題icarus常用配置整合版，快速搞定部落格首頁
2019-09-14

手把手帶你搭建VuePress的技術部落格

vuepress

全域性安裝

建立專案vuepess-blog

專案初始化

其中新增主README.md檔案

新增docs資料夾

在docs資料夾中建立.vuepress資料夾

新建總配置config.js檔案

新建導航欄nav.js

建立側邊欄sidebar.js

在docs資料夾下面建立一個README.md檔案

現在就可以在docs資料夾中寫部落格內容了

在package.json中新增啟動命令

推送到遠端倉庫

掛載到GitHub Pages

pm2守護程式

新增valine評論和閱讀量統計

導航欄分類小技巧

其餘配置

參考文獻

相關文章