多個GithubPages+VuePress+二級域名配置

時間：2023-02-08 00:20:01 | 來源：建站知識

時間：2023-02-08 00:20:01 來源：建站知識

前言

配置完小站以后嗅到了一絲不對。

咦，我怎么學(xué)習記錄的東西這么多，這樣放一塊兒實在不好看也不適合梳理。

在語雀和Vuepress中選擇了UI更簡潔清爽，同時界面關(guān)鍵內(nèi)容較為突出的Vuepress。

此文記錄了如何創(chuàng)建第二個GithubPages（多個也類似）+Vuepress基礎(chǔ)配置學(xué)習+綁定二級域名（可以看到這個域名是http://record.giriawsh.com也是我主站域名的二級域名）










在我的blog中點擊個人學(xué)習系列，即可跳轉(zhuǎn)至用vuepress搭建的學(xué)習記錄站點。

創(chuàng)建項目

我們只能為每個 GitHub 帳戶創(chuàng)建一個用戶或組織站點；而項目站點沒有限制。

只能擁有一個的，是個人站點，也就是名為 <user>.github.io 的倉庫。想要創(chuàng)建更多的GitHub Pages頁面，可以通過創(chuàng)建項目站點實現(xiàn)。項目站點的數(shù)量沒有限制。

詳情可見GitHub Pages 站點的類型——官方文檔

1. 創(chuàng)建GithubPages

1. 新建一個倉庫，名稱隨意。
2. 進入倉庫主頁，點擊右面的Settings，找到GitHub Pages部分，選擇一個主題，之后可以再改，不選擇的話頁面可能會無法加載
3. 建議勾選 Enforce HTTPS，否則訪問時會出現(xiàn)安全警告。
4. 沒有出錯的話，一個項目主頁就建立完成了，可以通過<username>.github.io/<projectname>訪問到了

2. 創(chuàng)建Vuepress項目

參照官方文檔

1. 創(chuàng)建并進入一個新目錄
   mkdir vuepress-starter && cd vuepress-starter
2. 使用你喜歡的包管理器進行初始化（聽我的，用yarn，如果你不想出現(xiàn)奇怪的bug的話）
   yarn init # npm init
3. 將 VuePress 安裝為本地依賴
   我們已經(jīng)不再推薦全局安裝 VuePress
   yarn add -D vuepress # npm install -D vuepress
4. 創(chuàng)建你的第一篇文檔
   mkdir docs && echo '# Hello VuePress' > docs/README.md
5. 在 package.json 中添加一些 scripts
   這一步驟是可選的，但我們推薦你完成它。在下文中，我們會默認這些 scripts 已經(jīng)被添加。
   {
   "scripts": {
   "docs:dev": "vuepress dev docs",
   "docs:build": "vuepress build docs"
   }
   }
6. 在本地啟動服務(wù)器
   yarn docs:dev # npm run docs:dev
   VuePress 會在 http://localhost:8080 啟動一個熱重載的開發(fā)服務(wù)器。

Vuepress配置

首頁

這塊可參考官方文檔主題模塊。

在/docs文件夾下創(chuàng)建README.md文件，這是我的個人配置（把logo.jpg放在/docs/.vuepress/public 文件夾中）：

---home: trueheroImage: /logo.jpgheroText: Giria's learning recordtagline: 個人前端學(xué)習記錄actionText: 一起梳理 →actionLink: /source/element/sidebar: falsefeatures:- title: 源碼學(xué)習 details: Element UI + Vue 源碼- title: 書籍學(xué)習 details: 記錄相關(guān)書籍的學(xué)習路徑- title: 前端相關(guān) details: 各代碼庫的學(xué)習，包括不限于NodeJS、NuxtJS、多種視圖組件庫等footer: MIT Licensed | Copyright ? 2020-present Giria---::: tip 更多博客文章可移步[Giria's Blog](https://www.giriawsh.com):::

導(dǎo)航欄

基本配置

修改/docs/config.js文件

module.exports = { themeConfig: { sidebarDepth: 2, // e'b將同時提取markdown中h2 和 h3 標題，顯示在側(cè)邊欄上。 lastUpdated: 'Last Updated',// 文檔更新時間：每個文件git最后提交的時間 searchMaxSuggestions: 10, nav: [ {text: '主頁', link: '/'}, { text: '源碼學(xué)習', items: [ {text: "Element UI", link: '/source/element/'}, {text: "Vue", link: '/source/vue/'} ], }, { text: '書籍學(xué)習', items: [ {text: "JavaScript權(quán)威指南", link: '/books/theDefinitiveGuideToJavaScript/'} ], }, { text: '前端相關(guān)', items: [ {text: "Node.js", link: '/fe/nodejs/'}, {text: "Vue.js", link: '/fe/vuejs/'}, {text: "SVG.js", link: '/fe/svgjs/'}, {text: "Nuxt框架", link: '/fe/nuxtjs/'}, ], }, {text: '博客文章', link: 'https://www.giriawsh.com'},//外鏈，可進行跳轉(zhuǎn) ], }}目錄組織結(jié)構(gòu)如下：







產(chǎn)生效果如下：

導(dǎo)航欄分組配置

如果想要進行導(dǎo)航欄分組可這樣寫：

// .vuepress/config.jsmodule.exports = { themeConfig: { nav: [ { text: '前端相關(guān)', items: [ { text: "JS庫相關(guān)", items: [ {text: "Node.js", link: '/fe/nodejs/'}, {text: "Vue.js", link: '/fe/vuejs/'}, {text: "SVG.js", link: '/fe/svgjs/'}, ] }, { text: "框架相關(guān)", items: [ {text: "Nuxt框架", link: '/fe/nuxtjs/'}, ] }, ], }, ] }}效果如下：

導(dǎo)航欄LOGO

可以通過 themeConfig.logo 增加導(dǎo)航欄 Logo ，Logo 可以被放置在公共文件目錄：

// .vuepress/config.jsmodule.exports = { themeConfig: { logo: '/assets/img/logo.png', }}

側(cè)邊欄

側(cè)邊欄這里我查了很久，很少有清楚的demo，我這里做個demo記錄。

目錄結(jié)構(gòu)如下：







在/docs/.vuepress/config.js中進行如下配置：

module.exports = { themeConfig: { sidebarDepth: 2, // e'b將同時提取markdown中h2 和 h3 標題，顯示在側(cè)邊欄上。 lastUpdated: 'Last Updated',// 文檔更新時間：每個文件git最后提交的時間 sidebar: { '/source/element/': [ { title: 'Element源碼分析', collapsable: false, children: [ '/source/element/1', '/source/element/2',]//這里的順序決定了在側(cè)邊欄中從上到下顯示的順序 } ], '/source/vue/': [ { title: 'Vue源碼分析', collapsable: false, children: [] } ], '/books/theDefinitiveGuideToJavaScript/': [ { title: 'JavaScript權(quán)威指南', collapsable: false, children: [ '/books/theDefinitiveGuideToJavaScript/1', '/books/theDefinitiveGuideToJavaScript/2', '/books/theDefinitiveGuideToJavaScript/3', '/books/theDefinitiveGuideToJavaScript/4', '/books/theDefinitiveGuideToJavaScript/5', ], } ], '/fe/nodejs/': [ { title: 'NodeJS初學(xué)', collapsable: false, children: [ '/fe/nodejs/start/1', '/fe/nodejs/start/2', '/fe/nodejs/start/3', '/fe/nodejs/start/4', ] }, { title: 'NodeJS深入學(xué)習', collapsable: false, children: [ '/fe/nodejs/second/test' ] } ], '/fe/svgjs/': [ { title: 'SVG學(xué)習記錄', collapsable: false, children: [ '/fe/svgjs/1', '/fe/svgjs/2', '/fe/svgjs/3', ] }, ] } },?};如果想要達到如下多個分組的效果，可查看上面代碼中的'/fe/nodejs/'部分，進行多個對象的配置。（上面代碼為了直觀省略了文件名）

踩坑

1. 記得給每個新創(chuàng)建的文件夾下增加一個README.md隨便寫點啥，不然有一定概率會跳轉(zhuǎn)到404
2. 文件名譬如1.md在路徑中可以省略.md（.html也是可以的）

網(wǎng)頁LOGO

將logo文件放置到/docs/.vuepress/public文件夾下，然后在config.js文件中增加：

module.exports = { // 注入到當前頁面的 HTML <head> 中的標簽 head: [ ['link', {rel: 'icon', href: '/pencil.png'}], // 增加一個自定義的 favicon(網(wǎng)頁標簽的圖標) ],}

樣式修改

在/docs/.vuepress文件夾中新建styles文件夾，創(chuàng)建palette.styl文件。

$accentColor = #e6be00//默認主題顏色$textColor = red//默認字體顏色$borderColor = #eaecef//默認邊框顏色$codeBgColor = #282c34//默認背景顏色?示例修改相關(guān)樣式f12找到需要修改的地方找到對應(yīng)class類拿過來直接用就行了.sidebar-group.is-sub-group > .sidebar-heading:not(.clickable){ opacity :1}更多可參考：

• vuepress主題改造-主題的繼承(1)
• 如何創(chuàng)建自定義 VuePress 主題
• Vuepress 主題改造指南 --》 追加了黑色模式，而且博客主題風格我很喜歡
• 一款簡潔而優(yōu)雅的 vuepress 博客 & 文檔 主題

部署

1. 在 docs/.vuepress/config.js 中設(shè)置正確的 base。
   如果你打算發(fā)布到 https://<USERNAME>.github.io/，則可以省略這一步，因為 base 默認即是 "/"。
   如果你打算發(fā)布到 https://<USERNAME>.github.io/<REPO>/（也就是說你的倉庫在 https://github.com/<USERNAME>/<REPO>），則將 base 設(shè)置為 "/<REPO>/"。
   module.exports = {
   title: "Girecord",
   description: 'Giria的學(xué)習記錄',
   base: '/<REPO>/',//如果要綁定子域名的話這里需要改成/
   }
   
2. 在你的項目中，創(chuàng)建一個如下的 deploy.sh 文件（請自行判斷去掉高亮行的注釋）放置到根目錄中:

#!/usr/bin/env sh?# 確保腳本拋出遇到的錯誤set -e?# 生成靜態(tài)文件npm run docs:build?# 進入生成的文件夾cd docs/.vuepress/dist?# 如果是發(fā)布到自定義域名# echo 'www.example.com' > CNAME# 后續(xù)這里我們會發(fā)布到二級域名，像我的就需要像下面這么寫：echo 'record.giriawsh.com' > CNAME?git initgit add -Agit commit -m 'deploy'?# 如果發(fā)布到 https://<USERNAME>.github.io# git push -f git@github.com:<USERNAME>/<USERNAME>.github.io.git master?# 如果發(fā)布到 https://<USERNAME>.github.io/<REPO># git push -f git@github.com:<USERNAME>/<REPO>.git master:gh-pages?cd -這樣我們之后每次修改后只需要點擊這個腳本進行運行即可部署。

至此我們已經(jīng)可以通過訪問https://<USERNAME>.github.io/<REPO>訪問到部署后的頁面了

綁定子域名

我是在Godaddy上購買的網(wǎng)址，來到DNS配置，添加一條CNAME記錄

如果是參照了我之前的配置方案，這里不用寫成http://record.giriawsh.com，因為它會自己映射添加，寫二級子域名名稱record即可

參考網(wǎng)站

如何擁有多個GitHub Pages

vuepress 使用與主題自定義樣式修改

配置GithubPage二級域名