VuePress 从零开始搭建自己的博客网站 |
您所在的位置：网站首页 › 从零开始搭建网站 › VuePress 从零开始搭建自己的博客网站 |
VuePress 从零开始搭建自己的博客网站
|
1、前言
俗话说的好：好记性不如烂笔头。做技术的，有自己的一个博客网站，不仅可以记录自己的学习笔记，分享自己的技术文章，还可以和志同道合的开发者交流，何乐而不为呢？ 那么如何简单高效diy一个自己的博客网站呢？VuePress 就是一款非常优秀的静态网站生成器，它基于 Vue 构建，以 Markdown 为中心的项目结构，以最少的配置帮助你专注于写作。 简单来说，只要你配置好项目后，就可以直接写Markdown文档，然后生成静态网站，部署到Github、Gitee、Coding等静态网站托管平台，就可以直接访问了。 2、技术选型这个是VuePress的官方文档，有兴趣深挖VuePress配置信息的同学可以过一遍文档。官方也给出了选择VuePress，而不是Nuxt、VitePress、GitBook等其他工具的理由。 另外，如果是使用VuePress的默认主题的话，可能还是会让博客看起来比较单调，所以这里推荐使用vuepress-theme-reco，一个基于 VuePress 2.x 的主题，这个主题插件看起来还是挺好看的，今天就以这个主题为例，来手把手教大家如何搭建一个属于自己的博客网站。 3、安装配置 快速开始安装vuepress-theme-reco，官方给出了三种方式： npx # 初始化，并选择 2.x npx @vuepress-reco/theme-cli initnpm # 初始化，并选择 2.x npm install @vuepress-reco/[email protected] -g theme-cli inityarn # 初始化，并选择 2.x yarn global add @vuepress-reco/[email protected] theme-cli init这里我选择第一种方式 先新建一个文件夹命名vuepress。 进入vuepress文件夹，执行命令 npx @vuepress-reco/theme-cli init 选择2.x版本。 用vscode打开项目， npm install安装依赖，然后 npm run dev启动项目，可以看到，项目是用vite来构建的。 项目的文件目录如下： README.md是首页,这边可以修改成自己的信息 --- home: true modules: - BannerBrand - Blog - MdContent - Footer bannerBrand: bgImage: '/bg.svg' title: 码无止境の世界 description: Code is Life tagline: 在无止境的编程代码世界里遨游，用代码改变我们的生活。 buttons: - { text: 进入, link: '/categories/qianduan/1/' } - { text: 公众号, link: '/docs/wechat', type: plain } socialLinks: - { icon: LogoGithub , link: 'https://github.com/lighting5' } blog: socialLinks: - { icon: LogoGithub , link: 'https://github.com/lighting5' } - { icon: LogoWechat , link: '/docs/wechat' } isShowTitleInHome: true actionText: About actionLink: /views/other/about ---首页效果如下： config.ts配置修改 import { defineUserConfig } from "vuepress"; import recoTheme from "vuepress-theme-reco"; export default defineUserConfig({ title: "码无止境 Code is Life", description: "在无止境的编程代码世界里遨游，用代码改变我们的生活", theme: recoTheme({ style: "@vuepress-reco/style-default", logo: "/logo.png", author: "码无止境", authorAvatar: "/logo.png", lastUpdatedText: "", navbar: [ { text: "首页", link: "/" }, { text: "前端", link: "/categories/qianduan/1/" }, // { text: "后端", link: "/categories/houduan/1/" }, // { text: "游戏", link: "/categories/youxi/1/" }, { text: "工具", link: "/categories/tools/1/" }, ], }), });开始写文章啦~~ 首先在blogs目录下创建你自己分类的文件夹 我这边按类别向下按日期分类文章 文章中用到的图片，只需要截图后粘贴进markdown文档中，会自动将图片放置到同级目录的image文件夹下。 另外，在vscode中写markdown文档，用下面这些vscode扩展就可以更加愉快高效地写作。
每篇文章的开头都是以—和—包裹的文章头，其中tags定义好后，vuepress会自动根据你的tag进行文章标签分类，categories则会根据类别整理文章。 这边如果分类名称是中文的话，在config.ts中定义link时候就是按照中文拼音来定义的，可以看上面的config配置☝️ 文章分类页面如下
至于怎么写好Markdown文档，可以参考VuePress官网关于Markdown的介绍 基本上我们的博客已经搭建完成了，接下来就是部署上线了，可以使用Github Pages，免费让我们的博客上线。 首先，在Github上创建一个仓库，仓库名用你的用户名+github.io: .github.io
如果你访问github很慢的话，可以参考这里Github访问速度太慢？一个小工具就够了！ 然后，将你的仓库克隆到本地，再将你的vuepress项目拷贝到仓库根目录下，然后将仓库推送到github的master主分支上。另外还需要创建另一个分支gh-pages用来发布博客静态页面，可以在你的项目根目录下新建deploy.sh脚本，内容如下： # 确保脚本抛出遇到的错误 set -e # 生成静态文件 npm run build # 进入生成的文件夹 cd .vuepress/dist git init git add -A git commit -m 'deploy' # 如果发布到 https://.github.io # git push -f [email protected]:/.github.io.git master # 如果发布到 https://.github.io/ # git push -f [email protected]:/.github.io.git master:gh-pages # 我的配置如下 git push -f https://github.com/lighting5/lighting5.github.io.git master:gh-pages cd -打开项目文件位置，右键用git bash执行deploy脚本，将本地项目推送到github的gh-pages分支。
这样每次执行deploy脚本后，github的Actions会自动执行部署工作流，你的博客页面就会自动更新了。 我的已经成功上线了，欢迎围观！😃 https://lighting5.github.io/ 完结撒花 🎉🎉🎉 |
【本文地址】