先看效果圖:
- 首頁
- 評論區域
需要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
效果:
- 閉合
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
- 在根目錄中建立指令碼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 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/'
}
]
}
]
},
複製程式碼