原文博客

很久以前，自己擁有一個用hexo搭建的靜態博客網站:ox:，記得當時為了把它搞出來，廢了不少勁:anger:，然后后來又斷斷續續更改過一些配置和樣式，但是因為感覺各種麻煩，所以就放在github上積累和很多的塵土:cupid:，到現在也懶得在打掃了（其實是好久不用，有點忘了怎么用了:-1::poop:），前段時間在百度統計上看了看那個靜態網站的訪問人數，發現已經很久很久沒人訪問過了，:sweat_smile:，然而就在前段時間（沒錯，就是前面那個時間），我靈光一閃，為啥不重新弄個靜態博客呢:heart_eyes:，于是我就決定洗洗睡覺（沒錯，那是一個夜深人靜的晚上），第二天抽空找個簡單點的框架，然后搭個靜態博客，用來記錄自己的所見所聞所想:tada: 第二天一大早吃完中午飯后（睡到中午了:sunglasses:），我就看起了VuePress官網,沒錯，我選擇了VuePress框架，至于為什么呢，有以下幾點：

1、 目前開發用vue框架:fire:

2、 就是想用它搞一個:muscle:

3、 反正也簡單，實在不行再換唄（搞不起來是不可能的）:clap:

4、 沒有別的理由了:notes:

它有什么好處、特性、和別的框架對比？看人家官網就得了，說的挺好的

沒啥好說的，按照人家官網搭就完事了，人家寫的那么清晰、明了。感覺尤大出品的文檔都很友好，閱讀起來很方便

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

# 新建一個 docs 文件夾,你也可以打開編輯器來手動創建
mkdir docs

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

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

項目安裝完成后，我們進入package.json里面，添加script啟動項

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

上面一頓操作后我們現在要知道三件事情：

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

2、開發，也就是寫作的時候執行：

yarn docs:dev # 或者：npm run docs:dev // 默認端口http://localhost:8080/

3、打包生成靜態html文件，執行

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

默認情況下，生成的靜態文件放在.vuepress/dist中，不過可以改的
好了，先來認識下我們以后要大展拳腳的地方 docs目錄：

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

原諒我這部分說的比較糙，其實這部分看官網就好了，人家講的的確挺詳細的，要講的主要是下面的內容：

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

// 記得不要復制注釋
---
navbar: false       // 不要導航欄
isNoPage: true       // 自定義的屬性
sidebar: false        // 不要側導航
pageClass: home-list  //自定也頁面類
---

.vuepress/components/home.vue和我們平時寫vue沒啥區別，引用的時候就用這個文件的文件名就可以了，官網有介紹，因為目前還沒想好首頁改做成什么樣的，所以就先這樣放著
isNoPage是我自己寫的，主要是為了標志當前是否是文章頁，以后會用來做判斷，在this.$site.frontmatter中存放
pageClass是頁面自定義類，編譯的時候會把這個類加在外層的div中，可以根據這個來寫自己想要的樣式

/**這段css可以寫在.vuepress/style.styl中，這個是我對首頁寫的樣式**/
home-list{
  .page-edit{
    display: none /**隱藏首頁的編輯和最后修改時間標簽**/
  }
  #gitalk-container{
    display:none  /**隱藏首頁的評論**/
  }
}

每一張文章頁，我都會在頭部添加

---
tags: vuepress, 前端
description: 本文介紹應該VuePress搭建一個博客，據官網說：VuePress 由兩部分組成：一部分是支持用 Vue 開發主題的極簡靜態網站生成器，另一個部分是為書寫技術文檔而優化的默認主題。它的誕生初衷是為了支持 Vue 及其子項目的文檔需求。
---

tags: 是當前頁面的標簽，用于在列表頁生成標簽云

description:頁面的描述信息，在列表頁會顯示，官網中有獲取more之前的方法,但是會有樣式，所以會感覺很難看，所以我就添加的這個description字段，當然，我也并沒有放棄官網的方法，因為有時候可能真的懶得寫描述信息了,所以加了個判斷

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

獲取說有文章的列表我是通過一開始設置的isNoPage來做的判斷

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

我的標簽是一個vue組建，然后在列表頁引入改組件；上面說到，我在每個文章前面都會加tags，我會在標簽組件中通過遍歷this.$site.pages，拿到所有的標簽，然后去重，即是我所有頁面的標簽

favorite.icon也就是網頁左上角那個小圖標

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

注意href寫的是/favorite.icon,而不是/public/favorite.icon

在.vuepress下新建兩個styl文件用來寫樣式

override.styl:用來覆蓋默認主體樣式,比如我想讓我的內容占據屏幕的90%，可以：

$contentWidth = 90%

style.styl:寫自己一些自定義的樣式，可以在這個文件夾里寫，比如多帶帶修改導航的顏色

.navbar{
  background:red
}

官網對此的介紹

作為一個有靈魂的博客，怎么可以不能評論呢，我能忍，博客也不能忍:star2:，我的評論系統用的是GITALK,官網說是這是一個基于 Github Issue 和 Preact 開發的評論插件，現在用的多的貌似還有valine、gitment,這個貌似可以統計閱讀量；希望gitalk也能出個閱讀量統計功能，官網提供的方式有兩種，一種是在html中引入js文件，另一種是用npm包的形式，我選擇的是通過js將評論需要的js和css用js動態插入到頁面中，在.vuepress/enhanceApp.js中寫如下代碼：（enhanceApp.js介紹）

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

  //只有在isNoPage是false的時候才會顯示評論
  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", // 存儲評論的倉庫名字
        owner: "slbyml",
        admin: ["slbyml"],  //倉庫的管理員，可以有多個
        id: decodeURI(path),      // 每個頁面根據url生成對應的issue，保證頁面之間的評論都是獨立的
      })
      _gitalk.render("gitalk-container")
    }
  }
}
export default ({
  Vue, // VuePress 正在使用的 Vue 構造函數
  options, // 附加到根實例的一些選項
  router, // 當前應用的路由實例
  siteData // 站點元數據
}) => {
  setTimeout(() => {
      // 打包的時候因為沒有document，所以要加個try
    try {
      document && getGitalk.call(this, siteData)
    } catch (e) {
      console.error(e.message)
    }
  },500)
}

對于gitalk的用法請看官網，但是要講兩個元素clientSecret和clientSecret，這兩個怎么來的呢，是在這申請的，創建完成后可以看到生成的這兩個字段

部署

部署就簡單了，我目前是兩個倉庫，一個私有的，用來存放源代碼，一個就是用來存放生成的靜態文件的倉庫 更改package.json->script:

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

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

#!/usr/bin/env sh

# 確保腳本拋出遇到的錯誤
set -e

# 生成靜態文件
npm run docs:build

# 進入生成的文件夾
cd dist

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

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

cd -

我的默認生成的靜態文件在根目錄下的dist，因為我更改了config.js里的配置，保證docs里面的文件是干凈的

dest: "dist"

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