vuepress + GitHub搭建我的博客筆記（1）

時間 2021-05-04

標籤 html vue git github shell npm json windows 瀏覽器 bash 欄目 Git 简体版

原文原文鏈接

準備搭博客了。以前瞭解了一下 vuepress，它極簡並且又 支持MD語法，並且還可使用 Vue本身 開發個性化插件，還有一個重要的理由是有本身的網站感受很酷?！

1、開始

相關的教程網絡上已經一搜一大堆了，個人參考教程，不少重複的勞動都簡要寫一下好了。html

# 全局安裝
npm install -g vuepress
# 創建my-blog文件夾
mkdir my-blog
# 進入my-blog文件夾
cd my-blog
# 初始化項目 該命令會自動生成package.json等文件
npm init -y

在my-blog下建立文件結構以下所示：vue

.根目錄
├── docs
│   ├── .vuepress
│   │   ├── public 存放圖片等靜態資源
│   │   ├── styles
│   │   │   └── palette.styl 主題樣式->全局
│   │   └── config.js 配置
│   ├── README.md 首頁
│   └── blog
│       └── README.md
└── package.json

⚠️注意：README.md是必須的，訪問/blog/時將自動指向blog文件夾下面的README.md，沒有該文件會引起編譯錯誤。git

1.`config.js`

module.exports = {
  title: '遊客17846',
  description: 'Just do it!',
  head: [// 會加入<head>中
    ['link', { rel: 'icon', href: '/logo.ico' }],// 指定瀏覽器Tab圖標
    ['link', { rel: 'manifest', href: '/manifest.json' }],//PWA
    ['link', { rel: 'apple-touch-icon', href: '/logo.png' }]// 指定safari瀏覽器保存書籤至桌面圖標
  ],
  serviceWorker: true,
  base: '/',// 部署時指定存放的項目的地址
  markdown: {
    lineNumbers: true// 代碼塊行號顯示
  },
  themeConfig: {
    logo: '/logo.png',// 主頁顯示圖標
    nav: [
      { text: '首頁', link: '/' },// 首頁地址不想指定的話就不用改，默認指向docs下面的README.md
      { text: '博文', link: '/blog/' },// 默認指向blog下的README.md
      { text: 'GitHub', link: 'https://github.com/UAERNAME' }
    ],
    lastUpdated: '上次更新時間'// 頁面最下方的最後更新時間戳
  }
};

參考資料：github

2.`palette.styl`

$accentColor = #87cefa // 主題色
$textColor = #000 // 文字顏色
$borderColor = #eaecef // 邊框顏色
$codeBgColor = #282c34 // 代碼背景顏色

這是全局樣式文件，能夠本身設置主題色等，另外在寫本身的插件或頁面時，這些樣式能夠繼承使用。shell

3.`package.json`

在package.json的"scripts"裏面添加以下代碼：npm

{
  ...
  "scripts": {
    "dev": "vuepress dev docs",// 開發環境運行
    "build": "vuepress build docs"// 打包生成部署環境的文件
  }
  ...
}

也能夠不添加，直接用vuepress dev docs和vuepress build docs，macOS下請在命令前加sudo。json

接下來就能夠跑一下試試了 => npm run dev。windows

這部分有會遇到一些比較常見的錯誤/問題，參見第三部分瀏覽器

2、部署

部署這裏須要使用GitHub來託管代碼，使用GitHub Pages搭建靜態站點，有的用就好了，要啥自行車。bash

1.新建一個部署用倉庫

在GitHub中新建一個倉庫，該倉庫將被用來存放打包生成好的用來部署的文件（就是npm run build/vuepress build docs命令生成的存放在docs/.vuepress裏面的dist文件夾）。

⚠️注意：該倉庫必須具備如下特徵：

1.倉庫名必須爲USERNAME.github.io，注意這是用戶名而不是暱稱。該倉庫不用克隆至本地。
用戶名能夠從GitHub地址中看出來 -> 紅圈內容，可不分大小寫。
2.需在設置中將GitHub Pages開啓。
步驟：進入倉庫->點擊選項卡中的Setting->GitHub Pages中選擇master branch。

2.另外新建一個源代碼倉庫

上面的倉庫用來存放部署項目編譯後生成的文件，本倉庫用來存放博客項目的源代碼，就是my-blog文件夾。

3.部署自動化`deploy.sh`

在項目根目錄建立deploy.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 -

在package.json的scripts中添加命令：

{
  ...
  "scripts": {
    "dev": "vuepress dev docs",// 開發環境運行
    "build": "vuepress build docs",// 打包生成部署環境的文件
    // 自動執行deploy.sh腳本，執行自動編譯並將dist上傳至USERNAME.github.io倉庫
    "deploy": "sudo bash deploy.sh",
  }
  ...
}

這裏前面加了一個sudo是由於macOS中執行須要管理員權限，windows下就不用加了，另外windows下執行的話須要在powershell中執行，cmd是不認得這個bash的。

差很少一個博客項目就搭建完了，另外還搭建了自動化部署的一整套流程。