vuepress+GitHub博客，今後再也不沉默。自動化構建+評論，就是這麼簡單。

時間  2019-11-16
標籤 vuepress+github vuepress github 博客 今後 再也不 沉默 自動化 構建 評論 就是 簡單 欄目 Git 简体版
原文   原文鏈接

關於博客

這個博客是基於Vuepress1.X來搭建的。記錄一些技術方面的知識。下面是介紹怎麼用Vuepress從頭開始搭建一個技術博客。javascript

Vuperss簡介

Vuepress是Vue生態中關於靜態網站的一個生成器，對於技術類型博客支持很好，配置少，上手快，UI風格討人喜歡。這個博客網站使用的是Vuepress1.x來進行搭建的。除了這個博客以外下面的網站也是使用的vuepresscss

開始

  • 默認你的電腦上有Node環境
  • Node.js的版本大於8.6
  • 若是已經閱讀過官方文檔最好不過

本篇教程一共會在github上面創建兩個項目，一個用來寫博客，另一個用來展現博客。其實也能夠合成一個項目，看我的喜愛。 html

安裝vuepress

在這個博客使用的是vuepress1.X因此安裝的時候須要這樣安裝：前端

yarn global add vuepress@next // OR npm install -g vuepress@next

複製代碼

若是想要使用vuepress0.X,按照下面的安裝方式，vue

yarn global add vuepress // OR npm install -g vuepress
複製代碼

對於新手搭建博客這兩個版本的區別不大，這個博客中建議使用vuepress1.X。java

搭建博客項目

一共分爲四個部分node

  • 搭建一個初始項目而且能用vuepress來寫博客
  • 配置導航和側邊欄
  • 構建而且發佈
  • 自動化部署

開始以前我先放一個個人博客的目錄結構：git

jiegou

第一部分：搭建項目

新建write-blog文件夾,而且初始化項目,在第一部分中github

mkdir writ-blog
cd writ-blog
npm init -y
mkdir docs // 這個文件夾是放置全部博客的地方
cd docs
touch README.md //建立reademe文件，即首頁

複製代碼

初始化的目錄結構以下所示：web

.
├─ 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文件目錄

這個時候運行項目,每個導航欄對應的頁面應該時空白頁面。

關於docs/.vuepress/public這個文件夾:

這個文件夾

是存放公共的資源的，我把我博客的logo放到了這個文件夾中，每篇博客的靜態資源建議放到該篇博客的目錄下而不是都放到public之中。例如：本片教程中的圖片我都放到了這篇文章對應的目錄下面:

blog

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中，

stings
,把你的項目的名稱改成 {你的用戶名}.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

token
點擊Generate new token
new token
隨便起一個Note,而後把全部的都給勾選上，而後點擊Generate token這個按鈕，結果大概是這樣的
copy
,而後點擊後面的複製按鈕圖標，留做第二步使用;

設置Environment Variables :100:

去travis上你的項目中的More OPtions(下圖中右上角):

就是write-blog這個項目的More Options，soyomo.github.io這個項目只是一個空殼子，只有兩個地方有用到，第一是按照gitpage的規範建立；第二是部署的時候在travis中設置環境變量address的時候用到這個項目的github地址。別的時候就沒有了。

OPtions
中找到Settings,再在Environment Variables中添加環境變量,我添加的相似於下圖，

下圖
圖中的token後面的內容就是第一步中複製的內容，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上報錯,若是遇到這個報錯：

報錯
說明沒有權限往git倉庫上提交代碼，那麼這個時候就須要重複第四個步驟：travis自動化部署。

後續

上面的步驟都作好以後，一個簡單的博客網站就已經在你的手中誕生了，這個時候應該去買杯咖啡或者吃頓大餐來犒賞一下本身:tada: :tada: :tada:,可是這個博客並無能夠評論的地方怎麼辦呢？

添加評論系統

在添加評論以前你須要準備clientID和clientSecret，這兩個東西的生成是在這裏Register a new OAuth application,

oauth
除了Authorization callback URL以外，剩餘的三項是能夠隨便填寫的，Authorization callback URL中的回調url通常指向的是你的博客地址，個人填寫的是‘ soyomo.github.io’，點擊Register application 以後會跳轉一個新頁面你就會看到clientID和clientSecret了。而後接下來就是添加系統評論的部分了。

個人博客如今使用的是：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填寫的是博客的項目名稱，就會致使在開發環境中登錄不成功，可是若是開發環境中已經有關於評論的部分的話，就說明已經配置成功了

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程