在當今快節奏的數字時代，擁有一個條理清晰、具有視覺吸引力的文件或部落格網站，對於吸引受眾的注意力並保持他們的參與度至關重要。但是，如何才能在不花費大量時間進行網頁開發的情況下實現這一目標呢？
本文將介紹如何使用簡約而強大的靜態網站生成器（SSG）VuePress 建立和定製一個快速的文件和部落格網站。
VuePress 文件和部落格演示
什麼是 VuePress？
VuePress 是一個開源框架，專門用於生成靜態網站，主要面向文件和部落格。它是由 Vue.js 背後的天才 Evan You 建立的，體現了 Vue.js 著名的簡單易用的理念。
以下是一些令人信服的理由，說明為什麼 VuePress 可能是您的最佳選擇。
- Markdown 簡潔性：VuePress 使用 Markdown 簡化了內容建立，無需複雜的格式即可輕鬆編寫和組織內容。
- Vue.js 整合：VuePress 無縫整合了 Vue.js，支援互動式動態網頁元素，帶來引人入勝的使用者體驗。
- 效能和定製：VuePress 效能卓越，可快速載入靜態網站，並提供豐富的自定義選項，以滿足您的風格和需求。
VuePress 入門
在深入學習 VuePress 之前，請確保您的計算機上安裝了 Node.js 或 Yarn Classic。開始使用 VuePress 有兩種方法，一種是使用 create-vuepress-site 生成器，它會為你搭建 VuePress 網站的基本結構；另一種是手動安裝。
在本文中，讓我們使用手動安裝方法。
- 建立新目錄並更改：
mkdir vuepress-starter && cd vuepress-starter
- 使用你喜歡的軟體包管理器進行初始化。本文使用 Yarn：
yarn init
- 將 VuePress 作為開發人員依賴項安裝到您的專案中：
yarn add -D vuepress
- 建立一個 docs 資料夾來存放所有程式碼，然後建立一個 README.md 檔案，作為專案的索引檔案，類似於 index.html：
mkdir docs && echo '# Hello VuePress' > docs/README.md
- 在程式碼編輯器中開啟你的專案，在 package.json 檔案中新增以下指令碼，這樣你就可以服務和構建你的網站了：
"scripts": {
"dev": "vuepress dev docs",
"build": "vuepress build docs"
},
現在，您可以執行 yarn dev 命令來為您的網站提供服務。VuePress 將在 http://localhost:8080 啟動你的開發伺服器。
手動安裝 VuePress 的預設主題。
現在您已經建立了一個文件網站。您會發現，VuePress 提供了一個簡潔、極簡的預設主題。不過，它的可定製性很高，讓您可以自由發揮創意，為自己的網站打造獨特的外觀和感覺。
建立文件頁面
VuePress 採用簡單明瞭的目錄結構來組織文件。在你的專案資料夾中，你會發現我們建立的 docs 目錄，在這裡你可以為你的文件頁面建立 Markdown（ .md ）檔案。
例如，你可以建立 getting-started.md、usage.md 和 troubleshooting.md 等檔案。導航到 http://localhost:8080/getting-started、http://localhost:8080/usage 和 http://localhost:8080/troubleshooting 時，這些檔案會自動成為可訪問的路徑。
為了加強文件的組織，可以為相關文件頁面建立專用資料夾。例如，可以建立一個名為 guide 的資料夾，並將其與特定指南（如 using-kinsta-stsh.md）放在一起。採用這種結構後，using-kinsta-stsh.md 中的內容就可以通過 http://localhost:8080/guide/using-kinsta-stsh 這樣的 URL 訪問。
您還可以在指南資料夾的根級建立一個 README.md 或 index.md 檔案。該檔案將作為索引頁，允許使用者導航至 http://localhost:8080/guide/，並通過側邊欄方便地訪問內容，您將在下一節學習如何配置側邊欄。
在這個 VuePress 示例資源庫中，你會發現所有這些檔案都已建立，而且每個檔案都新增了一些標記內容。你可以根據自己的喜好建立檔案，既可以從頭開始建立以滿足你的特定需求，也可以從資源庫中的內容中汲取靈感。
自定義 VuePress 外觀
一旦您建立了包含內容的文件網站，您可能會發現導航很有難度，尤其是當您有許多檔案需要管理時。不過，VuePress 允許您自定義網站的導航結構，使其更加友好和有序。
要自定義網站的外觀和導航，請在專案根目錄下建立一個 .vuepress 資料夾。該資料夾將存放與 VuePress 網站相關的配置檔案和資產。
導航配置
在 .vuepress 資料夾中建立一個 config.js 檔案。您也可以使用 YAML (.yml) 、TOML (.toml) 或 TypeScript (.ts) 等其他檔案格式進行配置。
在 config.js 檔案中，你可以使用 themeConfig 物件定義網站的導航結構。下面是一個配置示例：
module.exports = {
title: 'Kinsta Vuepress',
description: 'A VuePress QuickStart for Kinsta',
themeConfig: {
nav: [
{
text: 'Guide',
link: '/guide/',
},
{
text: 'Static Site Hosting',
link: 'https://kinsta.com/static-site-hosting/',
},
],
sidebar: {
'/guide/': [
{
title: 'Guide',
collapsable: false,
children: ['', 'using-kinsta-stsh'],
},
],
},
},
};
在本例中，我們將配置網站的 title 和 description，定義導航連結，併為 /guide/ 部分設定側邊欄。
nav 陣列指定網站頂部的導航連結。側邊欄物件定義特定部分的側邊欄結構。在本例中，它是為 /guide/ 部分配置的。
有關導航欄配置的更多資訊，請參閱 VuePress 文件。
樣式
VuePress 允許您通過樣式自定義網站的外觀。您可以使用一些已定義的變數覆蓋預設樣式，也可以定義自己的樣式。要做到這兩點，請在 .vuepress 資料夾中建立一個 styles 資料夾。
要對預設預設的樣式進行簡單的覆蓋或定義一些變數供以後使用，可以在 .vuepress/styles 中建立一個 palette.styl 檔案。這些是你可以調整的一些預定義變數：
// colors $accentColor = #5333ED $textColor = #2c3e50 $borderColor = #eaecef $codeBgColor = #282c34 $arrowBgColor = #ccc $badgeTipColor = #42b983 $badgeWarningColor = darken(#ffe564, 35%) $badgeErrorColor = #DA5961 // layout $navbarHeight = 3.6rem $sidebarWidth = 20rem $contentWidth = 740px $homePageWidth = 960px // responsive breakpoints $MQNarrow = 959px $MQMobile = 719px $MQMobileNarrow = 419px
這些變數可用於在整個網站中保持一致的樣式。VuePress 還提供了新增額外樣式的便捷方法。您可以在 .vuepress/styles 資料夾中建立一個 index.styl 檔案，並在其中使用正常的 CSS 語法：
.content {
font-size 30px
}
請在官方文件中閱讀有關 VuePress 樣式的更多資訊。
使用元件
VuePress 支援使用元件來增強頁面的功能和外觀。您可以建立 Vue 元件並將其包含在您的 Markdown 檔案中。在 .vuepres 下建立一個元件資料夾，然後在 .vuepress/components 中找到的任何 *.vue 檔案都會自動註冊為全域性元件。
例如，考慮建立兩個元件：HomeOptions.vue 和 HostingBanner.vue：
. └─ .vuepress └─ components ├─ HomeOptions.vue └─ HostingBanner.vue
在這些 vue.js 元件檔案中，您可以新增 CSS 程式碼。讓我們在 HomeOptions.vue 和 HostingBanner.vue 元件中新增程式碼。
在 HomeOptions.vue 中新增以下程式碼：
<template>
<div class="options">
<div class="option">
<a
href="https://kinsta.com/docs/static-site-hosting/static-site-quick-start-examples/"
target="_blank"
>
<h3>Quick Start Examples</h3>
</a>
<p>Explore quick start examples for setting up static sites.</p>
</div>
<div class="option">
<a
href="https://kinsta.com/docs/static-site-hosting/getting-started-static-site-hosting/"
target="_blank"
>
<h3>Getting Started</h3>
</a>
<p>Learn how to get started with static site hosting.</p>
</div>
<div class="option">
<a
href="https://kinsta.com/docs/static-site-hosting/manage-static-sites/"
target="_blank"
>
<h3>Manage Static Sites</h3>
</a>
<p>Discover how to efficiently manage your static sites.</p>
</div>
</div>
</template>
<style scoped>
a {
color: #2c3e50;
}
a:hover {
color: #5333ed;
}
.options {
display: flex;
gap: 10px;
margin: 40px 0;
}
.option {
border: 2px solid #eaecef;
border-radius: 5px;
padding: 10px;
}
</style>
另外，將下面的程式碼新增到 HostingBanner.vue 中：
<template>
<div class="banner">
<p>Host Your Static Site With Kinsta for Free!</p>
<a
href="https://kinsta.com/docs/static-site-hosting/"
target="_blank"
class="btn"
>Read More</a
>
</div>
</template>
<style> scoped>
.banner {
background: rgb(156, 85, 34);
background: linear-gradient(
90deg,
rgba(156, 85, 34, 1) 0%,
rgba(32, 50, 103, 1) 42%,
rgba(13, 18, 25, 1) 69%,
rgba(22, 47, 60, 1) 100%
);
color: #fff;
padding: 20px;
border-radius: 5px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.banner p {
width: 600px;
font-size: 40px;
font-weight: bold;
text-align: center;
line-height: 50px;
}
.banner .btn {
border-radius: 5px;
padding: 15px;
color: #1f1f1f;
font-weight: bold;
background: #fff;
display: inline-block;
margin-bottom: 10px;
}
.banner .btn:hover {
background: #111319;
color: #fff;
}
</style>
在任何 Markdown 檔案中，您都可以直接使用這些元件（根據檔名推斷名稱）：
<HomeOptions/> <HostingBanner/>
請在文件中閱讀有關 VuePress 元件的更多資訊。
自定義主頁
在 VuePress 中，預設主題提供了一個預先設計好的主頁佈局，您可以利用它為您的網站建立一個引人入勝、資訊豐富的起點。要使用這種主頁佈局，您需要指定 home: true ，並在根 README.md 檔案的 YAML frontmatter 中包含一些額外的後設資料。
下面是 YAML frontmatter 的示例：
--- home: true heroImage: /hero.png heroText: Hero Title tagline: Hero subtitle actionText: Get Started → actionLink: /guide/ features: - title: Simplicity First details: Minimal setup with markdown-centered project structure helps you focus on writing. - title: Vue-Powered details: Enjoy the dev experience of Vue + webpack, use Vue components in markdown, and develop custom themes with Vue. - title: Performant details: VuePress generates pre-rendered static HTML for each page, and runs as an SPA once a page is loaded. footer: MIT Licensed | Copyright © 2018-present Evan You ---
所有這些配置將使您的文件主頁看起來像這樣：
VuePress 預設首頁
值得注意的是，如果你喜歡更簡單的佈局或不包含這些內容，可以通過將相應欄位設為 null 來禁用 heroText 和 tagline 或任何其他值。在 YAML 前置事項（即後設資料部分）之後包含的任何內容都將被視為常規 Markdown，並在功能部分之後呈現。
如果您想要完全自定義的主頁佈局，VuePress 也支援自定義佈局。此外，您還可以使用 Markdown Slot Syntax 建立富文字頁尾，從而更靈活地顯示頁尾內容。下面是一個如何設定富文字頁尾的示例：
--- home: true --- ::: slot footer Made with ❤️ by Kinsta. [Static Site Hosting](https://kinsta.com/static-site-hosting/) :::
在這種情況下， ::: slot footer 部分的內容允許您在主頁頁尾區域新增連結和其他資訊。
現在您已瞭解如何執行上述自定義操作，請將之前建立的元件新增到主頁，並移除一些選項，使主頁看起來更美觀：
--- home: true tagline: A VuePress QuickStart for Kinsta actionText: Quick Start → actionLink: /guide/ --- <HomeOptions/> <HostingBanner/> ::: slot footer Made with ❤️ by Kinsta. [Static Site Hosting](https://kinsta.com/static-site-hosting/) :::
在 VuePress 主頁上使用元件。
通過遵循這些 VuePress 定製技術，您可以建立一個文件網站，它不僅能提供有價值的內容，還能通過有序的導航和吸引人的樣式提供出色的使用者體驗。
您可以在文件中閱讀有關自定義預設主題的更多資訊。
使用 VuePress 建立部落格版塊
在您的 VuePress 站點中新增部落格部分輕而易舉，因為 VuePress 允許您編寫可插入任何 Markdown 檔案的自定義 Vue 元件。讓我們建立一個元件來呈現部落格文章列表。
在 components 資料夾中建立一個 BlogIndex.vue 檔案，並新增以下程式碼：
<template>
<div>
<div v-for="post in posts" v-bind:key="post.path">
<h2>
<router-link> :to="post.path">{{ post.frontmatter.title }}</router-link>
</h2>
<p>{{ post.frontmatter.description }}</p>
<p><router-link> :to="post.path">Read more</router-link></p>
</div>
</div>
</template>
<script>>
export default {
computed: {
posts() {
return this.$site.pages
.filter(
(x) => x.path.startsWith('/blog/') && !x.frontmatter.blog_index
)
.sort(
(a, b) =>
new Date(b.frontmatter.date) - new Date(a.frontmatter.date)
);
},
},
};
</script>
在提供的程式碼片段中，您定義了一個 Vue 模板，該模板使用 v-for 迴圈瀏覽部落格文章，顯示文章標題、描述以及每篇文章的 “Read more” 連結。
指令碼部分匯出一個 Vue 元件，用於計算和檢索部落格文章。這些文章會根據其路徑（以 /blog/ 開頭）和是否沒有 blog_index frontmatter 屬性進行過濾。然後按日期降序排序，首先顯示最新的博文。
建立新博文時，需要指定博文日期作為 frontmatter 資訊的一部分。這將有助於對博文進行排序，使最新的博文出現在最前面。
要儲存部落格文章，請在專案根目錄下建立一個名為 blog 的資料夾。在該資料夾中，新增一個 README.md 檔案。這將是部落格索引，你將在其中包含 BlogIndex 元件，以列出所有部落格文章。
--- blog_index: true --- # Blog Welcome To Our Blog <BlogIndex />
確保新增 blog_index frontmatter 屬性，因為該屬性有助於確保部落格索引本身不在單個部落格文章中列出。在 BlogIndex.vue 元件的 posts 計算屬性中篩選文章時，將使用該屬性。
接下來，在專案根目錄下建立一個部落格資料夾，用於儲存所有部落格文章並建立每個文章。例如，建立 first-post.md 檔案並新增以下標記內容：
--- title: "My Exciting VuePress Blog Journey" date: 2023-09-28 description: "Exploring VuePress, a versatile static site generator, and sharing my experiences along the way." --- # My Exciting VuePress Blog Journey In this inaugural blog post, I embark on an exciting journey with VuePress, a powerful static site generator that's perfect for creating documentation, blogs, and more. As I delve into the world of VuePress, I'll be sharing my experiences, insights, and tips on making the most out of this fantastic tool.
對於每篇博文，請確保您定義了重要的前置設定，如博文標題、日期和其他相關後設資料。這種細緻的組織方式可確保博文的連貫性，併為受眾提供引人入勝的閱讀體驗。
為 VuePress 新增部落格。
最後，您可以在 .vuepress/config.js 檔案中將部落格導航新增到導航欄中：
nav: [
{
text: 'Guide',
link: '/guide/',
},
{ text: 'Blog', link: '/blog/' },
{
text: 'Static Site Hosting',
link: 'https://kinsta.com/static-site-hosting/',
},
],
使用 VuePress，您還可以做很多事情，比如新增外掛、使用單獨的主題，甚至建立自己的主題。
將 VuePress 靜態網站部署到 Kinsta
您可以將程式碼推送到您喜歡的 Git 提供商（Bitbucket、GitHub 或 GitLab），然後部署到 Kinsta。
在向任何 Git 提供商推送檔案之前，請在專案根目錄下建立 .gitignore 檔案，指定推送程式碼時 Git 應忽略的檔案和資料夾：
# dependencies /node_modules # build directory ./docs/.vuepress/dist /public
提醒：您可以在 .vuepress/config.js 中使用 dest （例如， dest: 'public' ）新增一個目標，從而配置 VuePress SSG 的另一個構建位置。
在本指南中，我們使用 GitHub。在 GitHub 上建立一個倉庫來推送原始碼。倉庫準備就緒後，按照以下步驟將靜態網站部署到 Kinsta：
- 登入或建立賬戶，檢視 MyKinsta 面板。
- 通過 Git 提供商授權 Kinsta。
- 單擊左側邊欄上的 “Static Sites“，然後單擊 “Add site“。
- 選擇要部署的版本庫和分支。
- 為網站指定一個唯一的名稱。
- 按以下格式新增構建設定：
- 構建命令:
npm run build - 節點版本:
16.20.0 - 釋出目錄:
./docs/.vuepress/dist或public
- 構建命令:
- 最後，點選 Create site。
就是這樣！現在，您只需幾秒鐘就能擁有一個已部署的網站。系統會提供一個連結，用於訪問已部署的網站版本。之後，您可以根據需要新增自定義域名和 SSL 證書。
小結
VuePress 是一款多功能、功能強大的工具，可用於快速建立文件和部落格網站。憑藉其簡單的設定、可定製的主題和外掛，您可以為受眾建立一個資訊豐富、視覺效果極佳的平臺。
評論留言