从零开始搭建一个博客部署上线自定义域名 vuepress+github+vercel

最新推荐文章于 2024-07-02 10:07:14 发布

林梧桐

最新推荐文章于 2024-07-02 10:07:14 发布

阅读量4k

点赞数 2

分类专栏： something 文章标签： github

本文链接：https://blog.csdn.net/weixin_43126036/article/details/109245643

版权

本文介绍了从零开始使用VuePress搭建博客的详细步骤，包括VuePress的全局安装、项目文件创建、内容编写、部署到GitHub Pages以及通过Vercel加速和自定义域名。同时，还详述了如何美化博客，添加各种插件如看板娘、彩带背景、音乐播放器等，并讨论了加密功能和评论插件的配置。

摘要由CSDN通过智能技术生成

全局安装VuePress

npm install -g vuepress

创建项目文件夹

mkdir vuepreeeBlogDemo
cd vuepreeeBlogDemo
npm init -y

新建文件，构成目录结构如下：

vuepressBlogDemo
├─── docs
│   ├── README.md
│   └── .vuepress
│       ├── public
│       └── config.js
└── package.json

文件内容编写

config.js:

module.exports = {
  title: 'Lynn\'s blog',
  description: '我的个人网站',
  head: [ // 注入到当前页面的 HTML <head> 中的标签
    ['link', { rel: 'icon', href: '/logo.jpg' }], // 增加一个自定义的 favicon(网页标签的图标)
  ],
  base: '/', // 这是部署到github相关的配置
  markdown: {
    lineNumbers: false // 代码块显示行号
  },
  themeConfig: {
    nav:[ // 导航栏配置
      {text: '前端基础', link: '/accumulate/' },
      {text: '算法题库', link: '/algorithm/'},
      {text: '微博', link: 'https://baidu.com'}      
    ],
    sidebar: 'auto', // 侧边栏配置
    sidebarDepth: 2, // 侧边栏显示2级
  }
};

图片存放在docs/.vuepress/public/logo.jpg下，直接使用‘/’可以引入

package.json:

<!--添加：-->
"scripts": {
  "dev": "vuepress dev docs",
  "build": "vuepress build docs"
}

部署上线

方式1：买个服务器，阿里云，腾讯云。。。
方式2：Github Pages：Github 提供的、用于搭建个人网站的静态站点托管服务。

新建仓库一

USERNAME.github.io

USERNAME 应该为github账户的用户名
不用克隆到本地

新建仓库二

自定义名称
克隆到本地
此仓库是用来开发博客，以后只需更改这个项目

新建deploy.sh文件

#!/usr/bin/env sh

# 确保脚本抛出遇到的错误
set -e

# 生成静态文件
npm run build

# 进入生成的文件夹
cd docs/.vuepress/dist

# 如果是发布到自定义域名
# echo 'www.yourwebsite.com' > CNAME

git init
git add -A
git commit -m 'deploy'

# 如果你想要部署到 https://USERNAME.github.io
git push -f git@github.com:CathleenLynn/CathleenLynn.github.io.git master

# 如果发布到 https://