十分鐘教會你如何使用VitePress搭建及部署個人部落格站點
使用VitePress可以讓我們快速搭建一個靜態部落格網站，這篇文章將帶領大家搭建一個基於VitePress的靜態部落格網站並且部署到GitHub Pages(github提供的靜態網頁服務)
快速上手
- 新建目錄並初始化(我的目錄名為kittydocs)
這裡我們使用pnpm式，當然yarn，npm都是可以的,如果你沒有安裝pnpm可以全局安裝
npm i pnpm -g
然後初始化
pnpm init
- 安裝vitepress
pnpm i vitepress
- package.json添加script
"scripts": {
"docs:dev": "vitepress dev docs",
"docs:build": "vitepress build docs",
"docs:serve": "vitepress serve docs"
}
這三個腳本分別代表啟動本地文檔服務，打包文檔，啟動打包後（dist）服務
- 創建文檔
文檔放在docs目錄下，新建docs/index.md
## hello juejin
此時我們的文件結構為
.
├─ docs
│ └─ index.md
└─ package.json
- 啟動本地服務文檔站點
pnpm run docs:dev
此時便會啟動一個//localhost:3000/ 的服務,默認載入docs/index.md
到這裡一個簡單的站點就完成了，當然這肯定是不夠的，接下來我們看vitepress的配置
配置文件
在docs目錄下創建一個 .vuepress目錄，如下結構
.
├─ docs
│ ├─ .vitepress
│ │ └─ config.js
│ └─ index.md
└─ package.json
config.js導出一個js對象
export default {
title: 'kittyui', //站點標題
description: '一個vue3組件庫',//mate標籤description，多用於搜索引擎抓取摘要
}
此時我們重啟服務便可看到
導航欄
- title和logo
首先看一下title和logo的配置
export default {
themeConfig: {
siteTitle: "Kitty",
logo: "/logo.png",
},
};
其中logo的地址對應的是public下的圖片，目錄結構如下所示
.
├─ docs
│ ├─ .vitepress
│ │ └─ config.js
│ ├─ public
│ │ └─ logo.png
│ └─ index.md
└─ package.json
這裡logo我是用了vue的圖標，此時頁面效果為
- 右側導航
我們可以在themeConfig.nav配置右側導航,並且點擊可以跳轉我們指定頁面。
themeConfig: {
siteTitle: "Kitty",
logo: "/logo.png",
nav: [
{ text: "Guide", link: "/guide/" },
{ text: "GuideTest", link: "/guide/test" },
{ text: "gitee", link: "//gitee.com/geeksdidi" },
],
}
同時我們在docs下新建guide/index.md和test.md
# guild
# test
此時我們頁面即可展示我們打nva並且支援了跳轉本地markdown文件以及外部鏈接
我們還可以這樣嵌套配置，使得導航欄出現下拉選項
themeConfig: {
siteTitle: "Kitty",
logo: "/logo.png",
nav: [
{ text: "Guide", link: "/guide/" },
{ text: "GuideTest", link: "/guide/test" },
{ text: "gitee", link: "//gitee.com/geeksdidi" },
{
text: "Drop Menu",
items: [
{ text: 'Item A', link: '/item-1' },
{ text: 'Item B', link: '/item-2' },
{ text: 'Item C', link: '/item-3' }
]
}
]
}
如果我們想要讓下拉選項分組，即中間有條分割線，我們的nav可以這樣寫
nav: [
{ text: "Guide", link: "/guide/" },
{ text: "GuideTest", link: "/guide/test" },
{ text: "gitee", link: "//gitee.com/geeksdidi" },
{
text: "Drop Menu",
items: [
{
items: [
{ text: "Item A1", link: "/item-A1" },
{ text: "Item A2", link: "/item-A2" },
],
},
{
items: [
{ text: "Item B1", link: "/item-B1" },
{ text: "Item B2", link: "/item-B2" },
],
},
],
},
]
此時效果為
配置社交鏈接socialLinks
使用themeConfig.socialLinks可以配置我們的社交鏈接，目前支援的有
type SocialLinkIcon =
| 'discord'
| 'facebook'
| 'github'
| 'instagram'
| 'linkedin'
| 'slack'
| 'twitter'
| 'youtube'
| { svg: string }
，配置如下
socialLinks: [
{ icon: "github", link: "//gitee.com/geeksdidi" },
{ icon: "twitter", link: "..." },
// You can also add custom icons by passing SVG as string:
{
icon: {
svg: '<svg role="img" viewBox="0 0 24 24" xmlns="//www.w3.org/2000/svg"><title>Dribbble</title><path d="M12...6.38z"/></svg>',
},
link: "...",
},
],
側邊欄Sidebar
側邊欄可以在themeConfig.Sidebar中配置，其實和nav配置差不多
sidebar: [
{
text: "組件庫源碼實現",
items: [
{
text: "組件庫環境搭建",
link: "/articles/組件庫環境搭建",
},
{ text: "gulp的使用", link: "/articles/gulp的使用" },
],
},
{
text: "vue教程",
items: [
{
text: "pina和vuex",
link: "/articles/pina和vuex",
},
],
},
],
這裡我搬運了我掘金上的一些文章放了進去，目錄結構如下圖
頁面展示效果如下
不過我們一般不會使用這種方式配置側邊欄，因為這樣每個頁面都會有側邊欄。我們需要做到僅某些頁面才會出現側邊欄。所以我們可以這樣配置
sidebar: {
"/articles/": [
{
text: "組件庫源碼實現",
items: [
{
text: "組件庫環境搭建",
link: "/articles/組件庫環境搭建",
},
{ text: "gulp的使用", link: "/articles/gulp的使用" },
],
},
{
text: "vue教程",
items: [
{
text: "pina和vuex",
link: "/articles/pina和vuex",
},
],
},
],
},
sideBar值改成一個對象，對象的key是一個路徑，只有包含這個路徑的才會出現側邊欄。所以我們將nav的配置中的guild改成部落格，同時路徑指向我們的articles下的markdown文件
nav: [
{ text: "部落格", link: "/articles/組件庫環境搭建" },
]
此時你會發現進入首頁並不會出現sideBar，只有點擊部落格才會出現側邊欄
配置可摺疊側邊欄
配置可摺疊側邊欄只需將collapsible設置為true即可,默認初始頁面是全部展開頁面，如果你需要關閉狀態只需要將collapsed設置為true
...
{
text: "vue教程",
collapsible: true,
collapsed:true,
items: [
{
text: "pina和vuex",
link: "/articles/pina和vuex",
},
],
},
...
首頁布局
首頁就是進入我們部落格會載入docs/index.md,所以我們需要對其進行一個美化，我們VitePress默認主題提供了一個主頁布局
---
layout: home
hero:
name: 東方小月的部落格
text: 隨便寫點啥.
tagline: 帥氣又迷人的小月
image:
src: /logo.png
alt: Kitty
actions:
- theme: brand
text: 快來快來
link: /articles/組件庫環境搭建
- theme: alt
text: View on Gitee
link: //gitee.com/geeksdidi
features:
- icon: ⚡️
title: 這是一個閃電圖標
details: wawawa
- icon: 🖖
title: 這是一個手掌圖標
details: good...
- icon: 🛠️
title: 這是一個修理圖標
details: cocococo
---
部署到GitHub Pages
既然要部署到GitHub Pages，你得先在github新建一個倉庫，因為要用他的GitHub Pages，所以倉庫命名為username.github.io的形式，username是你github的用戶名。然後點擊設置
選擇pages
這裡設置根目錄/(root),當然也可以選擇其它目錄,點擊保存，如果選擇其它目錄比如docs，config.js就需要配置一個base
export default {
base:'/docs/'
}
最後選擇一個主題(這裡不選擇我發現站點不生效,後面把打包後的程式碼推上來即可,會默認載入index.html)
然後將打包後的dist下的文件推送到你的遠程倉庫。vitepress官網給我們提供了一個腳本文件deploy.sh,我們只需要改下遠程倉庫即可
#!/usr/bin/env sh
# 忽略錯誤
set -e
# 構建
npm run docs:build
# 進入待發布的目錄
cd docs/.vitepress/dist
# 如果是發布到自定義域名
# echo 'www.example.com' > CNAME
git init
git add -A
git commit -m 'deploy'
# 如果部署到 //<USERNAME>.github.io
# git push -f [email protected]:<USERNAME>/<USERNAME>.github.io.git master
# 如果是部署到 //<USERNAME>.github.io/<REPO>
# git push -f [email protected]:<USERNAME>/<REPO>.git master:gh-pages
cd -
直接執行這個腳本文件，我們的打包後的文件就會被推送到我們的倉庫。然後我們就可以直接訪問我們的靜態部落格站點了，比如我的這個示例部落格東方小月.如果你想要自定義其它域名的話,可以創建一個組織然後在組織下新建倉庫名為organization.github.io的形式(organization是你組織名)然後執行同樣的操作即可。具體可以點這裡創建 GitHub Pages 站點
最後程式碼已經推送到kittypage,需要的可以自行獲取
創作不易，你的點贊就是我的動力！如果感覺這篇文章對你有幫助的話就請點個贊吧，謝謝謝！！orz
