手把手帶你搭建VuePress的技術部落格
摘要：
先看效果圖:
首頁
評論區域
需要node環境和npm支援
如果不會安裝npm請轉到 如何安裝 npm 並管理 npm 版本
vuepress
這個還是蠻不錯的,尤大出品,必屬精品.
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 [email protected]: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  ### 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 [email protected]: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
- 在根目錄中建立指令碼deploy.sh
這裡的'#'是註釋
- 然後開啟你的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 [email protected]:qiufeihong2018/qiufeihong2018.github.io.git master ### 如果釋出到 https://USERNAME.github.io/<REPO>REPO=github上的專案 ### git push -f [email protected]: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