Ec3o

Appearance

VitePress建站教程 ​

小E使用VitePress建立了自己的第一个网站。网上的视频教程很多，纷繁复杂，小E打算从头梳理一个简明的教程，对自己以后书写博客也有好处。

1.本地配置环境 ​

Yarn是一个常见的包管理工具，安装Node环境后使用npm命令或者安装yarn

yarn全局安装命令：

npm i yarn -g

如果不知道如何安装Yarn，可以参考一下这篇文章

安装 | Yarn 中文网 (nodejs.cn)

2.创建文件夹，搭建脚手架 ​

2.1 项目初始化 ​

本地创建一个文件夹Blog，在VS code中使用终端执行，配置项跳过即可

shell
yarn init

初始化仓库

2.2 安装VitePress包 ​

shell
yarn add --dev vitepress vue

2.3 编辑package.json包添加脚本 ​

点击调试按钮可直接启动项目调试，或直接输入命令执行

shell
yarn docs:dev

2.4 新建docs文件夹 开始构建网页 ​

在根目录创建docs文件夹，docs文件夹里面存放 index.md文件和 .vitepress文件夹，.vitePress文件夹里面放config.js文件

index.md文件控制了主页的内容

markdown
---
layout: home
 
hero:
  name: 名称
  text: 文本
  tagline: 标语
  actions:
    - theme: brand
      text: 开始
      link: /guide/what-is-vitepress
    - theme: alt
      text: View on GitHub
      link: https://github.com/vuejs/vitepress
 
features:
  - icon: ⚡️
    title: Vite, The DX that can't be beat
    details: Lorem ipsum...
  - icon: 🖖
    title: Power of Vue meets Markdown
    details: Lorem ipsum...
  - icon: 🛠️
    title: Simple and minimal, always
    details: Lorem ipsum...
---
<style>
    :root {
  --vp-home-hero-name-color: transparent;
  --vp-home-hero-name-background: -webkit-linear-gradient(120deg, #bd34fe, #41d1ff);
}
</style>

config.js控制了整个文档的实现和配置

javascript
module.exports = {
    title: '标题',
    description: 'Just playing around.',
    themeConfig: {
        nav: [
            {
                text: '关于',
                items: [
                    { text: '关于页面1', link: '/about/about1' },
                    { text: '关于页面2', link: '/about/about2/' }
                ]
            }
        ],
        // sideber以对象的形式配置的话每个sidebar都是独立的 如果以数组的形式配置那么侧边栏是公共的 进入其他子页面都可以看到
        sidebar: {
            '/about/': [
                {
                    text: '关于侧边栏',
                    items: [
                        { text: '关于1', link: '/about/about1/' },
                        { text: '关于2', link: '/about/about2/' }
                    ]
                },
 
            ]
        }
    }
}

终端执行

shell
yarn doc:dev

具体网页构建请参见

https://vitepress.dev/

你可以通过修改config.js，添加主页CSS样式，修改主页index.md文件来制作一个优美的网站.你现在应该在我的博客看到了它的实现，如果你感兴趣，也可以访问github仓库看看是怎么实现的:)

博客使用markdown进行书写，图片建议使用PicGo+OSS进行外链图床，可以给用户极致的体验.

3.Github Pages 部署 ​

3.0 在GitHub建立一个<username>.github.io的仓库 ​

下面是部署好的仓库Repo，欢迎大家来点个Star

https://github.com/Ec3o/Ec3o.github.io

3.1 制作deploy.sh自动部署脚本 ​

bash
#!/usr/bin/env sh
 
# 忽略错误
set -e  #有错误抛出错误
 
# 构建
yarn run docs:build  #然后执行打包命令
 
# 进入待发布的目录
cd docs/.vitepress/dist  #进到dist目录
 
git init  #执行这些git命令
git add -A
git commit -m 'deploy'
 
git push -f https://github.com/Ec3o/Ec3o.github.io.git master:gh-pages  #提交到这个分支
 
cd -
 
rm -rf docs/.vitepress/dist  #删除dist文件夹

3.2 更新package.json增加部署功能 ​

json
{
  "name": "blog",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "deploy":"bash deploy.sh",
    "docs:dev": "vitepress dev docs",
    "docs:build": "vitepress build docs",
    "docs:serve": "vitepress serve docs"
  },
  "devDependencies": {
    "vitepress": "^1.0.2",
    "vue": "^3.4.21"
  }
}

3.3 部署 ​

shell
yarn run deploy

优雅，无需多言

3.4 Pages&域名Binding ​

打开Settings-Pages界面-Build and Deployment找到部署界面

可以按照上图进行配置，也可以自定义域名进行访问（可选）

以上，一次简单的博客部署就完成了，感谢观看！