利用vuePress搭建我的博客

時間 2019-12-05

標籤利用 vuepress 搭建我的博客简体版

原文原文鏈接

最近學習了一下vuePress來搭建一個我的博客,在整個過程當中感覺頗多,特此羅列,方便交流進步html

step1 (初始化項目)

目前vuePress官方已經發布兩個版本0.x and 1.x，在使用過程當中發現1.x存在一些問題。例如:項目不能熱更新config.js文件中的更改，navbar顯示異常等問題，所以小弟建議使用0.x。前端

這部分能夠按照官網的快速上手來初始化項目,我使用的是npm方式

1. npm install -g vuepress (全局安裝vuePress)

   2. mkdir 項目名稱 (新建項目文件夾. 能夠右鍵手動新建，也可使用 mkdir 命令新建)

   3. npm init -y (進入剛新建的項目文件夾,初始化項目)

   4. 在項目文件夾根目錄建立 docs 文件夾，在 docs 中建立 .vuepress 文件夾，在.vuepress中建立 public 文件夾,components 文件夾,override.styl文件,style.styl文件和 config.js 文件，初始項目結構以下所示：

        vuepressBlog //項目文件夾
        ├─── docs
        │   ├──── README.md //通常用來作首頁
        │   └──── .vuepress //用於存放全局的配置、組件、靜態資源等
        |      ├── components //該目錄中的 Vue 組件將會被自動註冊爲全局組件
        │      ├── public // 靜態資源目錄
        |      ├── override.styl //用於重寫默認顏色常量，或者設置新的 stylus 顏色常量。(定義的樣式常量能夠在vue組件中直接使用)
        |      ├── style.styl //會被自動應用的全局樣式文件,具備比默認樣式更高的優先級(須要覆蓋的默認樣式代碼寫在該文件裏)
        │      └── config.js  //配置文件的入口文件(即配置性的東西基本在這配置)
        └── package.json
複製代碼

至此,項目初始化工做就已完畢,包括上面的初始化項目結構目錄,後面步驟中會對目錄進行進一步完善,不過都是些按需配置的工做.vue

step2 (項目配置)

這部分工做咱們在config.js文件中作,不要問我爲神馬,規定,規定,規定,重要的事情說三遍!!! 能用代碼呈現的問題,我通常儘可能不去bb,因此,直接貼config.js文件中的代碼,直接能夠複製去用的.java

module.exports = {
    title: 'Stone\'s blog',  //博客標題
    description: '個人我的博客', //我的描述
    head: [ // 注入到當前頁面的 HTML <head> 中的標籤
      ['link', {  // 增長一個自定義的 favicon(網頁標籤的圖標)
        rel: 'icon',
        type: 'image/x-icon',
        href: './favicon.ico'
      }],
      ['link', { rel: 'apple-touch-icon', href: './favicon.ico' }], //適配移動端ico
    ],
    base: '/', // 這是部署到github相關的配置
    markdown: {
      lineNumbers: false // 代碼塊顯示行號
    },
    themeConfig: {
      nav: [ // 導航欄配置
        {
          text: 'Home',
          link: '/' // '/'默認爲docs文件夾下的README.md文件

        },
        {
          text: 'Blog',
          link: '/blog/'
        },
        {
          text: 'Space',
          link: '/space/'
        },
        {
          text: 'GitHub',
          link: 'https://github.com/HUYIJUNCODING'
        }
      ],
      : {
        '/blog/': [
          {
            title: '前端daily', /sidebar/ 側邊欄名稱
            collapsable: true, // 可摺疊
            children: [
                '/blog/javaScript/one', //文章地址
                '/blog/javaScript/two',
            ]
          },
          {
            title: '框架相關',
            collapsable: true,
            children: [
                '/blog/framework/vuepressBlog',
            ]
          },
          {
            title: '工具收藏',
            collapsable: true,
            children: [
                '/blog/tools/one',
                '/blog/tools/two',
            ]
          },
        ],
        '/space/': [
          {
            title: '詩和遠方',
            collapsable: true,
            children: [
                '/space/poetryAndDistance/one',
            ]
          },
          {
            title: '諞閒傳',
            collapsable: true,
            children: [
                '/space/talk/one',
            ]
          },
        ]
      }, // 側邊欄配置
      sidebarDepth: 2, // 側邊欄顯示2級
    }
  }
複製代碼

至此項目你已經完成一半了,關於配置這裏我重點說幾個點,也是我在實現過程當中遇到了問題的地方.git

a. favicon存放位置(別問我爲神馬,n屢次失敗後的經驗,嘿嘿嘿!!!)

存放目錄:  .vuepress -> public/favicon.ico

    引用方式:  config.js文件中 href: './favicon.ico'
複製代碼

b. sidebar配置方式 github

vuePress官方給出了兩種不一樣的方式,能夠戳這裏,可是仍是以爲有瑕疵,若是將兩種方式結合起來使用,會有何化學效果,bling,bling,bling. 所以config.js文件中的sidebar配置方式就產生了,使用後發現確實很棒,確認過眼神,是我想要的,bling,bling,bling. 預覽實現的效果,請前往個人blog. web

c. navbar模塊

navbar對應的模塊放在docs文件夾根目錄下,即與.vuepress同級,各模塊以文件夾的形式創建,例如我這裏的blog, space.每個文件下能夠有一個README.md文件,也能夠沒有,沒有的話,在navbar關聯路徑時候須要特定指定某一個子.md文件,避免navbar切換後內容爲空,由於默認會找該模塊下的README.md文件. npm

在 package.json 文件裏添加兩個啓動命令json

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

複製代碼

`npm run dev`項目飛起

本地啓動項目: npm run dev

打包項目: npm run build
複製代碼

到這裏項目就基本完成,下來呢就是一些業務邏輯方面或者根據我的喜愛錦上添花的工做,總之,基礎落成,下來就剩coding的事了(寫博客文章的事情,需自身去修行完成)!bash

step3 (部署上線)

走到這一步的小夥伴們必定是coding完成了或者基本差很少了,那麼下來咱們將項目部署到GitHub上,這樣仰慕你的小夥伴就能夠線上訪問到你的博客啦.
方式不少種,我這裏只以GitHub爲例 (其實我只會這個:joy: :joy: :joy:)

登陸 Github 新建兩個倉庫

新建倉庫一： GITHUBUSERNAME.github.io（不用克隆到本地）

這裏的 GITHUBUSERNAME 是你的GitHub名稱,是你的GitHub名稱,是你的GitHub名稱,很重要的事情說三遍,只能必須徹底相同,爲了更具體說明,我貼一張圖.

而後 Repository name 就填寫爲：GITHUBUSERNAME.github.io ,以個人爲例子就是 HUYIJUNCODING.github.io,一樣貼出來一張圖

ok,第一個倉庫就新建好了,該倉庫不用clone到本地,不用作任何操做,全部代碼的修改都在第二個倉庫中進行,這個倉庫後面關聯後只是用來存放線上發佈的代碼的,即dist目錄下的文件

新建倉庫二： 這裏的倉庫名能夠隨便起,例如:blog.github.io（克隆到本地）

這個倉庫存放本地項目代碼,之後的修改均在這裏進行.

若是是本身從頭搭建的，那就將當前博客項目根目錄下的內容拷貝到倉庫二，並在倉庫本地根目錄下建立 deploy.sh 文件，內容以下：

#!/usr/bin/env sh

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

# 生成靜態文件
npm run build

# 進入生成的文件夾
cd docs/.vuepress/dist

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

git push -f git@github.com:USERNAME/USERNAME.github.io.git master  //這句須要配置本身的倉庫地址,除過這句代碼,其餘均複製粘貼便可

cd -
複製代碼

修改deploy.sh文件(上面代碼其實已經體現,不過爲了說明其重要性,在這裏單獨再拿出來講明哈)

git push -f git@github.com:USERNAME/USERNAME.github.io.git master

// 就上面這句代碼,若是你想要部署到 https://USERNAME.github.io上,你須要將USERNAME替換成你的GitHub名稱,例如個人替換成 HUYIJUNCODING,
// 即git push -f git@github.com:HUYIJUNCODING/HUYIJUNCODING.github.io.git master
複製代碼

到這裏有的小夥伴會疑惑那倉庫一和倉庫二如何作到關聯呢,很好,若是你有這個疑問,那我這個時候就一本正經的告訴你,剛纔修改的這個地方就是解決這個問題的,用來 關聯兩個倉庫,倉庫一就相似於咱們的線上服務器,倉庫二用於本地開發.

在 package.json 文件夾中添加發布命令

"scripts": {
    "dev": "vuepress dev docs",  //運行項目
    "build": "vuepress build docs", //打包項目
    "deploy": "bash deploy.sh", //發佈項目
    "publish": "vuepress build docs && bash deploy.sh" //打包發佈一步完成(自定義的命令,爲了將打包和發佈合併成一步執行)
  }
複製代碼

一座蒂花之秀落成!

發佈命令: npm run deploy  //僅僅發佈項目,若是代碼有更新,該操做前須要npm run build下
打包發佈命令: npm run publish //先打包項目,再發布項目,就不須要再單獨執行一次npm run build
複製代碼

完成後就能夠運行本身的項目啦,這裏是個人地址: huyijuncoding.github.io/

----------------------------------一條華麗的分割線------------------------------------

覺得我bb完了,對嗎?怎麼可能,對啊,固然尚未,哈哈哈!,下面是一些友情提示和福利

.md 文件中引用vue組件方法
a. 頁面覆蓋引用
該引用方法會覆蓋當前整個頁面(除過navbar),所以展現內容都在.vue組件裏面寫,跟咱們寫vue代碼就同樣了.

b. 局部引用
該引用方法不會覆蓋當前頁面,按需引入,局部展現,實例請前往文檔.

全局默認樣式覆蓋,顏色常量設置

override.styl //用於重寫默認顏色常量，或者設置新的 stylus 顏色常量。(定義的樣式常量能夠在vue組件中直接使用)
 style.styl //會被自動應用的全局樣式文件,具備比默認樣式更高的優先級(須要覆蓋的默認樣式代碼寫在該文件裏)
複製代碼

當咱們須要覆蓋vuePress中一些默認樣式,例如,navbar,sidebar字體顏色,背景色等就能夠在style.styl文件中直接重寫, 當須要定義些或者重寫顏色常量,就能夠在override.tyl中設置而後在.vue組件中直接使用.

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。