原文博客

很久以前，自己擁有一個(gè)用hexo搭建的靜態(tài)博客網(wǎng)站:ox:，記得當(dāng)時(shí)為了把它搞出來(lái)，廢了不少勁:anger:，然后后來(lái)又?jǐn)鄶嗬m(xù)續(xù)更改過(guò)一些配置和樣式，但是因?yàn)楦杏X(jué)各種麻煩，所以就放在github上積累和很多的塵土:cupid:，到現(xiàn)在也懶得在打掃了（其實(shí)是好久不用，有點(diǎn)忘了怎么用了:-1::poop:），前段時(shí)間在百度統(tǒng)計(jì)上看了看那個(gè)靜態(tài)網(wǎng)站的訪問(wèn)人數(shù)，發(fā)現(xiàn)已經(jīng)很久很久沒(méi)人訪問(wèn)過(guò)了，:sweat_smile:，然而就在前段時(shí)間（沒(méi)錯(cuò)，就是前面那個(gè)時(shí)間），我靈光一閃，為啥不重新弄個(gè)靜態(tài)博客呢:heart_eyes:，于是我就決定洗洗睡覺(jué)（沒(méi)錯(cuò)，那是一個(gè)夜深人靜的晚上），第二天抽空找個(gè)簡(jiǎn)單點(diǎn)的框架，然后搭個(gè)靜態(tài)博客，用來(lái)記錄自己的所見(jiàn)所聞所想:tada: 第二天一大早吃完中午飯后（睡到中午了:sunglasses:），我就看起了VuePress官網(wǎng),沒(méi)錯(cuò)，我選擇了VuePress框架，至于為什么呢，有以下幾點(diǎn)：

1、 目前開(kāi)發(fā)用vue框架:fire:

2、 就是想用它搞一個(gè):muscle:

3、 反正也簡(jiǎn)單，實(shí)在不行再換唄（搞不起來(lái)是不可能的）:clap:

4、 沒(méi)有別的理由了:notes:

它有什么好處、特性、和別的框架對(duì)比？看人家官網(wǎng)就得了，說(shuō)的挺好的

沒(méi)啥好說(shuō)的，按照人家官網(wǎng)搭就完事了，人家寫(xiě)的那么清晰、明了。感覺(jué)尤大出品的文檔都很友好，閱讀起來(lái)很方便

# 將 VuePress 作為一個(gè)本地依賴安裝
yarn add -D vuepress # 或者：npm install -D vuepress

# 新建一個(gè) docs 文件夾,你也可以打開(kāi)編輯器來(lái)手動(dòng)創(chuàng)建
mkdir docs

# 新建一個(gè) markdown 文件
echo "# Hello VuePress!" > docs/README.md

# 啟動(dòng)，讓你感受下效果-----but:這種啟動(dòng)方式不爽，還是放package.json里省事，所以感受完了就結(jié)束進(jìn)程吧，
npx vuepress dev docs

項(xiàng)目安裝完成后，我們進(jìn)入package.json里面，添加script啟動(dòng)項(xiàng)

 "scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs"
  }

上面一頓操作后我們現(xiàn)在要知道三件事情：

1、我們以后所有的文章都將在docs中寫(xiě)

2、開(kāi)發(fā)，也就是寫(xiě)作的時(shí)候執(zhí)行：

yarn docs:dev # 或者：npm run docs:dev // 默認(rèn)端口http://localhost:8080/

3、打包生成靜態(tài)html文件，執(zhí)行

yarn docs:build # 或者：npm run docs:build

默認(rèn)情況下，生成的靜態(tài)文件放在.vuepress/dist中，不過(guò)可以改的
好了，先來(lái)認(rèn)識(shí)下我們以后要大展拳腳的地方 docs目錄：

.
├─ docs //以后要在這里面寫(xiě)文章，直接在此文件夾下新建文件夾，然后再建md文檔就行，鏈接會(huì)自動(dòng)生成
│  ├─ README.md // 這個(gè)將會(huì)是我們以后的首頁(yè)
│  └─ .vuepress // 這個(gè)里面會(huì)存放一些配置和組建
│     └─ public  // 靜態(tài)文件存放地
│     └─ components  // 組建存放地
│     └─ config.js //配置文件，我們以后的所有配置基本都在這里寫(xiě)
└─ package.json

原諒我這部分說(shuō)的比較糙，其實(shí)這部分看官網(wǎng)就好了，人家講的的確挺詳細(xì)的，要講的主要是下面的內(nèi)容：

官網(wǎng)默認(rèn)主題提供了一個(gè)只需要寫(xiě)寫(xiě)配置就能生成的頁(yè)面，格式是固定的，和VuePress的首頁(yè)一毛一樣,但是這不是我想要的（我也不知道我想要什么樣的），所以我在.vuepress/components中新建了一個(gè)組建叫home，同時(shí)在首頁(yè)引入：（md文件里可以寫(xiě)vue代碼的哦）

// 記得不要復(fù)制注釋
---
navbar: false       // 不要導(dǎo)航欄
isNoPage: true       // 自定義的屬性
sidebar: false        // 不要側(cè)導(dǎo)航
pageClass: home-list  //自定也頁(yè)面類(lèi)
---

.vuepress/components/home.vue和我們平時(shí)寫(xiě)vue沒(méi)啥區(qū)別，引用的時(shí)候就用這個(gè)文件的文件名就可以了，官網(wǎng)有介紹，因?yàn)槟壳斑€沒(méi)想好首頁(yè)改做成什么樣的，所以就先這樣放著
isNoPage是我自己寫(xiě)的，主要是為了標(biāo)志當(dāng)前是否是文章頁(yè)，以后會(huì)用來(lái)做判斷，在this.$site.frontmatter中存放
pageClass是頁(yè)面自定義類(lèi)，編譯的時(shí)候會(huì)把這個(gè)類(lèi)加在外層的div中，可以根據(jù)這個(gè)來(lái)寫(xiě)自己想要的樣式

/**這段css可以寫(xiě)在.vuepress/style.styl中，這個(gè)是我對(duì)首頁(yè)寫(xiě)的樣式**/
home-list{
  .page-edit{
    display: none /**隱藏首頁(yè)的編輯和最后修改時(shí)間標(biāo)簽**/
  }
  #gitalk-container{
    display:none  /**隱藏首頁(yè)的評(píng)論**/
  }
}

每一張文章頁(yè)，我都會(huì)在頭部添加

---
tags: vuepress, 前端
description: 本文介紹應(yīng)該VuePress搭建一個(gè)博客，據(jù)官網(wǎng)說(shuō)：VuePress 由兩部分組成：一部分是支持用 Vue 開(kāi)發(fā)主題的極簡(jiǎn)靜態(tài)網(wǎng)站生成器，另一個(gè)部分是為書(shū)寫(xiě)技術(shù)文檔而優(yōu)化的默認(rèn)主題。它的誕生初衷是為了支持 Vue 及其子項(xiàng)目的文檔需求。
---

tags: 是當(dāng)前頁(yè)面的標(biāo)簽，用于在列表頁(yè)生成標(biāo)簽云

description:頁(yè)面的描述信息，在列表頁(yè)會(huì)顯示，官網(wǎng)中有獲取more之前的方法,但是會(huì)有樣式，所以會(huì)感覺(jué)很難看，所以我就添加的這個(gè)description字段，當(dāng)然，我也并沒(méi)有放棄官網(wǎng)的方法，因?yàn)橛袝r(shí)候可能真的懶得寫(xiě)描述信息了,所以加了個(gè)判斷

  {{item.frontmatter.description}}……閱讀原文

獲取說(shuō)有文章的列表我是通過(guò)一開(kāi)始設(shè)置的isNoPage來(lái)做的判斷

const arts = this.$site.pages.filter(item => {
  return !item.frontmatter || !item.frontmatter.isNoPage
})

我的標(biāo)簽是一個(gè)vue組建，然后在列表頁(yè)引入改組件；上面說(shuō)到，我在每個(gè)文章前面都會(huì)加tags，我會(huì)在標(biāo)簽組件中通過(guò)遍歷this.$site.pages，拿到所有的標(biāo)簽，然后去重，即是我所有頁(yè)面的標(biāo)簽

favorite.icon也就是網(wǎng)頁(yè)左上角那個(gè)小圖標(biāo)

head:[
	["link", { rel: "shortcut icon", href: "/favorite.icon type: "image/jpg" }]
]

注意href寫(xiě)的是/favorite.icon,而不是/public/favorite.icon

在.vuepress下新建兩個(gè)styl文件用來(lái)寫(xiě)樣式

override.styl:用來(lái)覆蓋默認(rèn)主體樣式,比如我想讓我的內(nèi)容占據(jù)屏幕的90%，可以：

$contentWidth = 90%

style.styl:寫(xiě)自己一些自定義的樣式，可以在這個(gè)文件夾里寫(xiě)，比如多帶帶修改導(dǎo)航的顏色

.navbar{
  background:red
}

官網(wǎng)對(duì)此的介紹

作為一個(gè)有靈魂的博客，怎么可以不能評(píng)論呢，我能忍，博客也不能忍:star2:，我的評(píng)論系統(tǒng)用的是GITALK,官網(wǎng)說(shuō)是這是一個(gè)基于 Github Issue 和 Preact 開(kāi)發(fā)的評(píng)論插件，現(xiàn)在用的多的貌似還有valine、gitment,這個(gè)貌似可以統(tǒng)計(jì)閱讀量；希望gitalk也能出個(gè)閱讀量統(tǒng)計(jì)功能，官網(wǎng)提供的方式有兩種，一種是在html中引入js文件，另一種是用npm包的形式，我選擇的是通過(guò)js將評(píng)論需要的js和css用js動(dòng)態(tài)插入到頁(yè)面中，在.vuepress/enhanceApp.js中寫(xiě)如下代碼：（enhanceApp.js介紹）

const getGitalk = ({pages})=> {
  const path = window.location.pathname
  // 獲取當(dāng)前頁(yè)面信息
  const dist = pages.filter(item => {
    return item.path === path
  })[0]

  //只有在isNoPage是false的時(shí)候才會(huì)顯示評(píng)論
  if (!dist.frontmatter || !dist.frontmatter.isNoPage) {
    const page =document.querySelector(".page")

    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);

    scriptGitalk.onload= () => {
      let gitalk = document.createElement("div")
      gitalk.id = "gitalk-container"
      page.appendChild(gitalk)
      var _gitalk = new Gitalk({
        clientID: "11111111111111",
        clientSecret: "2222222222222222",
        repo: "slbyml.github.io", // 存儲(chǔ)評(píng)論的倉(cāng)庫(kù)名字
        owner: "slbyml",
        admin: ["slbyml"],  //倉(cāng)庫(kù)的管理員，可以有多個(gè)
        id: decodeURI(path),      // 每個(gè)頁(yè)面根據(jù)url生成對(duì)應(yīng)的issue，保證頁(yè)面之間的評(píng)論都是獨(dú)立的
      })
      _gitalk.render("gitalk-container")
    }
  }
}
export default ({
  Vue, // VuePress 正在使用的 Vue 構(gòu)造函數(shù)
  options, // 附加到根實(shí)例的一些選項(xiàng)
  router, // 當(dāng)前應(yīng)用的路由實(shí)例
  siteData // 站點(diǎn)元數(shù)據(jù)
}) => {
  setTimeout(() => {
      // 打包的時(shí)候因?yàn)闆](méi)有document，所以要加個(gè)try
    try {
      document && getGitalk.call(this, siteData)
    } catch (e) {
      console.error(e.message)
    }
  },500)
}

對(duì)于gitalk的用法請(qǐng)看官網(wǎng)，但是要講兩個(gè)元素clientSecret和clientSecret，這兩個(gè)怎么來(lái)的呢，是在這申請(qǐng)的，創(chuàng)建完成后可以看到生成的這兩個(gè)字段

部署

部署就簡(jiǎn)單了，我目前是兩個(gè)倉(cāng)庫(kù)，一個(gè)私有的，用來(lái)存放源代碼，一個(gè)就是用來(lái)存放生成的靜態(tài)文件的倉(cāng)庫(kù) 更改package.json->script:

"scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs",
    "deploy": "bash deploy.sh"  // 新加的，用來(lái)生成靜態(tài)文件及上傳到github
  }

然后根目錄下新建deploy.sh文件：

#!/usr/bin/env sh

# 確保腳本拋出遇到的錯(cuò)誤
set -e

# 生成靜態(tài)文件
npm run docs:build

# 進(jìn)入生成的文件夾
cd dist

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

# 如果發(fā)布到 https://.github.io/
git push -f git@github.com:slbyml/blog.git master

cd -

我的默認(rèn)生成的靜態(tài)文件在根目錄下的dist，因?yàn)槲腋牧?b>config.js里的配置，保證docs里面的文件是干凈的

dest: "dist"

這樣在我執(zhí)行npm run deploy的時(shí)候就會(huì)自動(dòng)生成靜態(tài)文件，并上傳的github上，是不是很方便 最后，這些都是我自己做的事情，可能會(huì)有更好的實(shí)現(xiàn)，所以歡迎討論！！:clap: 以后想添加的東西：