手把手帶你搭建VuePress的技術博客

時間 2019-11-29

標籤手把手搭建 vuepress 技術博客简体版

原文原文鏈接

先看效果圖:javascript

首頁

評論區域

須要node環境和npm支持css

若是不會安裝npm請轉到如何安裝 npm 並管理 npm 版本html

vuepress

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

vuepress是什麼?vue

Vue 驅動的靜態網站生成器java
簡潔至上以 Markdown 爲中心的項目結構，以最少的配置幫助你專一於寫做。node
Vue驅動享受 Vue + webpack 的開發體驗，能夠在 Markdown 中使用 Vue 組件，又可使用 Vue 來開發自定義主題。webpack
高性能 VuePress 會爲每一個頁面預渲染生成靜態的 HTML，同時，每一個頁面被加載的時候，將做爲 SPA 運行。git

具體就不介紹了es6

詳情請看官網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/' } ] } ] }, 複製代碼