關於部落格
這個部落格是基於Vuepress1.X來搭建的。記錄一些技術方面的知識。下面是介紹怎麼用Vuepress從頭開始搭建一個技術部落格。
Vuperss簡介
Vuepress是Vue生態中關於靜態網站的一個生成器，對於技術型別部落格支援很好，配置少，上手快，UI風格討人喜歡。這個部落格網站使用的是Vuepress1.x來進行搭建的。除了這個部落格之外下面的網站也是使用的vuepress
開始
- 預設你的電腦上有Node環境
- Node.js的版本大於8.6
- 如果已經閱讀過官方文件最好不過
本篇教程一共會在github上面建立兩個專案，一個用來寫部落格，另外一個用來展示部落格。其實也可以合成一個專案，看個人喜好。
安裝vuepress
在這個部落格使用的是vuepress1.X所以安裝的時候需要這樣安裝：
yarn global add vuepress@next // OR npm install -g vuepress@next
複製程式碼如果想要使用vuepress0.X,按照下面的安裝方式，
yarn global add vuepress // OR npm install -g vuepress
複製程式碼對於新手搭建部落格這兩個版本的區別不大，這個部落格中建議使用vuepress1.X。
搭建部落格專案
一共分為四個部分
- 搭建一個初始專案並且能用vuepress來寫部落格
- 配置導航和側邊欄
- 構建並且釋出
- 自動化部署
開始之前我先放一個我的部落格的目錄結構：
第一部分：搭建專案
新建write-blog資料夾,並且初始化專案,在第一部分中
mkdir writ-blog
cd writ-blog
npm init -y
mkdir docs // 這個資料夾是放置所有部落格的地方
cd docs
touch README.md //建立reademe檔案，即首頁
複製程式碼初始化的目錄結構如下所示：
.
├─ docs
│ └─ README.md
└─ package.json
複製程式碼注意 docs資料夾是你所有部落格所在的資料夾，docs資料夾根目錄下的README.md 檔案在經過vuepress的編譯之後會成為你的部落格網站的首頁！！！
在docs跟目錄中的README.md檔案中寫上以下內容：
---
home: true
heroImage: /logo.png
actionText: 介紹 →
actionLink: /blog/
features:
- title: 框架
details: Vue、React、Abgular、Flutter的學習和實踐。
- title: 工作筆記
details: 好記性不如爛筆頭，記錄平時工作中遇到的一些問題和解決方法。
- title: 前端視覺化
details: 前端方面視覺化的知識，包括webgl,canvas,glsl等。
- title: 後端
details: 前端怎麼能不瞭解一些後端知識呢？ 一些個人對後端的學習和實踐。
- title: 開發環境配置
details: 有時候開發環境的配置也是很頭疼的，windows和mac下面又各不一樣，工具的熟練程度直接決定開發速度，所以留文待查吧。
footer: MIT Licensed | Copyright © 2019-present chenfeng
---
複製程式碼注意: 這個檔案就是你部落格的首頁(index.html)，```'home: true'```,是必須的
初始化之後，在package.json中的script中新增兩個命令：
"dev": "vuepress dev docs",
"build": "vuepress build docs",
複製程式碼然後執行npm run dev，在瀏覽器中開啟服務,會出現一個頁面，大概長得是這個樣子
第二部分：配置導航和側邊欄
第二部分的目錄結構如下：
.
├─ .vuepress
│ └─ config.js
├─ docs
│ └─ README.md
└─ package.json
複製程式碼你會注意到這一步多出了一個.vuepres的資料夾，有關vuepress的配置，都在這個資料夾之中，下面介紹一下有關導航欄和側邊欄的配置。.vuepress/config中的基本配置如下：
module.exports = {
title: 'chenfeng\'s blog',
description: 'chenfeng的個人部落格',
}
複製程式碼當你完成上述步驟的話，你在本地起的dev環境所呈現的網頁應該包含一個頁頭,和一個描述。
下面這個配置內容是我的網站的配置：
module.exports = {
title: 'chenfeng\'s blog',
description: 'chenfeng的個人部落格',
head: [ // 注入到當前頁面的 HTML <head> 中的標籤
['link', { rel: 'icon', href: '/logo.png' }], // 增加一個自定義的 favicon(網頁標籤的圖示)
['link', { rel: 'manifest', href: '/logo.png' }],
['link', { rel: 'apple-touch-icon', href: '/logo.png' }],
['link', { rel: 'mask-icon', href: '/logo.png', color: '#3eaf7c' }],
['meta', { 'http-quiv': 'pragma', cotent: 'no-cache' }],
['meta', { 'http-quiv': 'expires', cotent: '0' }],
['meta', { 'http-quiv': 'pragma', cotent: 'no-cache, must-revalidate' }]
],
serviceWorker: true, // 是否開啟 PWA
base: '/', // 這是部署到github相關的配置
markdown: {
lineNumbers: true // 程式碼塊顯示行號
},
themeConfig: {
nav: [
{ text: '主頁', link: '/' },
{
text: '基礎', items: [
{ text: 'JavaScript', link: '/basis/JavaScript/' },
{ text: 'HTML', link: '/basis/HTML/' },
{ text: 'CSS', link: '/basis/CSS/' },
{ text: 'TypeScript', link: '/basis/CSS/' },
]
},
{
text: '框架', items: [
{ text: 'Vue', link: '/frame/Vue/' },
{ text: 'React', link: '/frame/React/' },
{ text: 'Angular', link: '/frame/Angular/' },
{ text: 'Flutter', link: '/frame/Flutter/' }
]
},
{ text: '工作筆記', link: '/work/' },
{ text: '前端視覺化', link: '/visualization/' },
{ text: '環境配置', link: '/devconfig/' },
{ text: 'Github', link: 'https://github.com/soyomo' }
],
sidebar: {
'/blog/': getSidebar('blog'),
'/frame/': getSidebar('frame'),
'/basis/': getSidebar('basis')
},
sidebarDepth: 2, // 側邊欄顯示2級
}
};
function getSidebar(barName) {
const sidebar = {
frame: [
'/frame/',
'/frame/Vue/',
'/frame/React/',
'/frame/Angular/'
],
blog: [
'/blog/'
],
basis: [
]
}
return sidebar[barName]
}
複製程式碼如果你感覺檔案太長的話，可以單獨把nav和sidebar提到另外一個獨立的檔案之中。我的.vuepress的檔案目錄結構是這樣的：
其中nav.js的內容如下所示：
module.exports = [
{ text: '主頁', link: '/' },
{
text: '基礎', items: [
{ text: 'JavaScript', link: '/basis/JavaScript/' },
{ text: 'HTML', link: '/basis/HTML/' },
{ text: 'CSS', link: '/basis/CSS/' },
{ text: 'TypeScript', link: '/basis/CSS/' },
]
},
{
text: '框架', items: [
{ text: 'Vue', link: '/frame/Vue/' },
{ text: 'React', link: '/frame/React/' },
{ text: 'Angular', link: '/frame/Angular/' },
{ text: 'Flutter', link: '/frame/Flutter/' }
]
},
{ text: '工作筆記', link: '/work/' },
{ text: '前端視覺化', link: '/visualization/' },
{ text: '環境配置', link: '/devconfig/' },
{ text: 'Github', link: 'https://github.com/soyomo' }
]
複製程式碼然後把這個檔案引入到config.js中就可以了.這個時候的導航還是不能工作的，因為你會找不到路徑。所以需要把導航對應的資料夾都建立好，這些資料夾都是建立在docs的跟目錄中的，部落格每個頁面對應的檔案都是在docs的跟目錄下的！！！這些資料夾建立好之後，都要建立一個README.md的檔案，因為當你的路徑只寫資料夾的時候，這個檔案在vuepress中是路徑預設匹配的。我的docs的檔案目錄如下：
這個時候執行專案,每一個導航欄對應的頁面應該時空白頁面。
關於docs/.vuepress/public這個資料夾:
是存放公共的資源的，我把我部落格的logo放到了這個資料夾中，每篇部落格的靜態資源建議放到該篇部落格的目錄下而不是都放到public之中。例如：本片教程中的圖片我都放到了這篇文章對應的目錄下面:
blog資料夾的路徑：write-blog/docs/blog;
關於pwa的manifest配置也是需要放到這個資料夾中的。 manifest.json的內容：
{
"name": "chenfeng",
"short_name": "feng",
"start_url": "index.html",
"display": "standalone",
"background_color": "#2196f3",
"description": "個人網站",
"theme_color": "blue",
"icons": [
{
"src": "./logo.jpg",
"sizes": "144x144",
"type": "image/png"
}
],
"related_applications": [
{
"platform": "web"
},
{
"platform": "play",
"url": "https://play.google.com/store/apps/details?id=cheeaun.hackerweb"
}
]
}
複製程式碼到此為止，第二部分就完畢了。
第三部分:構建並且釋出
在這個部分中你需要在github上新建一個專案，我的專案是專案，其實這個專案就是所謂的GitHub Pages，新建好專案之後需要在該專案的setings中，
{你的使用者名稱}.github.io,然後你就擁有了一個gitpage,就可以直接通過該連結訪問了。https://{username}.github.io/;
做完這些之後，需要在你的write-blog專案中的package.json中新增以下命令：
"scripts": {
"dev": "vuepress dev docs",
"build": "vuepress build docs",
"deploy": "bash deploy.sh",
},
複製程式碼並且在write-blog檔案的跟目錄下新建一個deploy.sh檔案,內容如下：
#!/usr/bin/env sh
# 確保指令碼丟擲遇到的錯誤
set -e
npm install -g vuepress@next
# 生成靜態檔案
npm run build
# 進入生成的資料夾
cd docs/.vuepress/dist
# 如果是釋出到自定義域名
# echo 'www.example.com' > CNAME
git init
git add -A
git commit -m 'deploy'
# 如果釋出到 https://<USERNAME>.github.io
# git push -f https://${token}@${address} master:master
git push -f git@github.com:{你的使用者名稱}/{你的使用者名稱}.github.io.git master
# 如果釋出到 https://<USERNAME>.github.io/<REPO>
# git push -f git@github.com:<USERNAME>/<REPO>.git master:gh-pages
cd -
複製程式碼然後，執行npm run deploy，之後就會發布到{username}.github.io這個專案中去了，並且通過連線是可以訪問的。這樣就基本可以實現書寫部落格了，但是每次寫完都得去npm run deploy一下，並不是很友好，那麼自動化部署就會幫到你了。
第四部分：travis自動化部署
對於travis,如果你還沒有聽說過，那麼這裡有一篇入門的教程供你參考。在這個環節裡，分為三部分：
- 用你的github賬號登陸travis網站
- 在github上面申請Personal access tokens
- 在travis中設定環境變數
申請Personal access tokens
去github setting申請一個Personal access tokens
設定Environment Variables :100:
去travis上你的專案中的More OPtions(下圖中右上角):
就是write-blog這個專案的More Options，soyomo.github.io這個專案只是一個空殼子，只有兩個地方有用到，第一是按照gitpage的規範建立；第二是部署的時候在travis中設定環境變數address的時候用到這個專案的github地址。別的時候就沒有了。
github.com/soyomo/soyomo.github.io.git）。新增完畢之後，在專案中的deploy.sh檔案中修改git push 的內容，如下:
!/usr/bin/env sh
# 確保指令碼丟擲遇到的錯誤
set -e
npm install -g vuepress@next
# 生成靜態檔案
npm run build
# 進入生成的資料夾
cd docs/.vuepress/dist
# 如果是釋出到自定義域名
# echo 'www.example.com' > CNAME
git init
git add -A
git commit -m 'deploy'
# 如果釋出到 https://<USERNAME>.github.io
git push -f https://${token}@${address} master:master
# 如果釋出到 https://<USERNAME>.github.io/<REPO>
# git push -f git@github.com:<USERNAME>/<REPO>.git master:gh-pages
cd -
複製程式碼然後，在專案的跟目錄下面建立一個.travis.yml檔案，內容如下：
sudo: required
language: node_js
node_js: stable
script: bash ./deploy.sh
branches:
only:
- master
notifications:
email: false
複製程式碼這樣，當你每次提交write-blog專案的修改的時候，travis就會自動的幫你構建你的{username}.github.io專案了。
報錯
當初部署的時候，並沒有去github申請token導致在travis上報錯,如果遇到這個報錯：
後續
上面的步驟都做好之後，一個簡單的部落格網站就已經在你的手中誕生了，這個時候應該去買杯咖啡或者吃頓大餐來犒賞一下自己:tada: :tada: :tada:,但是這個部落格並沒有可以評論的地方怎麼辦呢？
新增評論系統
在新增評論之前你需要準備clientID和clientSecret，這兩個東西的生成是在這裡Register a new OAuth application,
我的部落格現在使用的是：Vssue.Vssue是一個vue驅動的基於Issue的外掛，在vuepress中使用它十分方便。這裡是官方關於在vuepress中使用Vssue的說明文件，如果你不想看也沒關係其實一共也就兩步。
第一步安裝外掛
npm install @vssue/vuepress-plugin-vssue
npm install @vssue/api-github-v3
複製程式碼第二步使用外掛
在.vuepress/config.js中新增plugins:
plugins: {
'@vssue/vuepress-plugin-vssue': {
// 設定 `platform` 而不是 `api`
platform: 'github',
locale: 'zh', // 語言設定
// 其他的 Vssue 配置
owner: 'OWNER_OF_REPO', // 你的github賬戶名稱
repo: 'NAME_OF_REPO', // 你的Github部落格倉庫 我填的是soyomo
clientId: 'YOUR_CLIENT_ID', // 你在github上面申請的clientId
clientSecret: 'YOUR_CLIENT_SECRET', // 在github上面申請的clientSecret
},
},
複製程式碼然後以元件的方式在md文件中使用,也就是在md文件的最底部加上這樣一句就行：
<Vssue title="Vssue Demo" />
複製程式碼評論系統的另一種選擇
我的部落格第一版的裡面用的是gittalk來實現評論的，gittalk的原理就是利用github的issue來實現評論部落格的。具體的實現是在.vuepress/enhanceApp.js檔案中。關於enhanceApp.js的內容可以參考vuepress的官方文件,在這個部落格專案中就只需要在該檔案中輸入以下程式碼就可以了：
function integrateGitalk(router) {
const linkGitalk = document.createElement('link');
linkGitalk.href = 'https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.css';
linkGitalk.rel = 'stylesheet';
document.body.appendChild(linkGitalk);
const scriptGitalk = document.createElement('script');
scriptGitalk.src = 'https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js';
document.body.appendChild(scriptGitalk);
router.afterEach((to) => {
if (scriptGitalk.onload) {
loadGitalk(to);
} else {
scriptGitalk.onload = () => {
loadGitalk(to);
}
}
});
function loadGitalk(to) {
let commentsContainer = document.getElementById('gitalk-container');
if (!commentsContainer) {
commentsContainer = document.createElement('div');
commentsContainer.id = 'gitalk-container';
commentsContainer.classList.add('content');
}
const $page = document.querySelector('.page');
if ($page) {
$page.appendChild(commentsContainer);
if (typeof Gitalk !== 'undefined' && Gitalk instanceof Function) {
renderGitalk(to.fullPath);
}
}
}
function renderGitalk(fullPath) {
const gitalk = new Gitalk({
clientID: '****', // 在github上生成的
clientSecret: '****', // 在github上生成的 come from github development
repo: '****', // 你的部落格的倉庫名稱
owner: '****', // 你在githug上的使用者名稱稱
admin: ['****'], // 管理成員
id: 'comment',
distractionFreeMode: false,
language: 'zh-CN',
});
gitalk.render('gitalk-container');
}
}
export default ({Vue, options, router}) => {
try {
document && integrateGitalk(router)
} catch (e) {
console.error(e.message)
}
}
複製程式碼需要注意的是因為在開發環境中我們的專案使用的是‘write-blog’，而配置中的repo填寫的是部落格的專案名稱，就會導致在開發環境中登陸不成功，但是如果開發環境中已經有關於評論的部分的話，就說明已經配置成功了