从零开始：VuePress2 + GitHub Pages 搭建你的第一个免费博客网站

可能你也想拥有一个属于自己的博客网站，但是自己搭个博客网站不知道从何下手，而且还需要租个云服务器，虽然一个月只需几十块钱，但是我们的博客网站是要长期维护的，日积月累也要不少钱呢。

现在我就教你用 VuePress2 + GitHub Pages 搭建个人博客网站，不用服务器，完全免费哦，亲测有效~

你只要跟着我一步步操作就行了，让我们现在就开始吧。

安装 Node.js

首先去Node.js官方下载安装包安装： https://nodejs.org/en
在这里插入图片描述

安装pnpm

同时按 win+R键，在弹出的运行对话框中输入cmd，打开Windows的命令行：

在这里插入图片描述

执行命令：

npm install pnpm -g

安装 VuePress

步骤 1: 创建并进入一个新目录

在命令行中进入存放项目的目录，新建一个文件夹，然后进入文件夹，文件夹的名字随便取。

mkdir zhanyd-blog
cd zhanyd-blog

这里用命令行来新建文件夹，当然你手动建也行。

步骤 2: 初始化项目

git init # 这一步可以先跳过，放到后面一起执行
pnpm init

步骤 3: 将 VuePress 安装为本地依赖

pnpm add -D vuepress@next @vuepress/client@next vue

如果出现了网络连不上的问题：

在这里插入图片描述
将pnpm的仓库源设置为淘宝镜像，再试一试：

pnpm config set registry https://registry.npm.taobao.org

步骤 4: 在 package.json 中添加一些 scripts

{"scripts": {"docs:dev": "vuepress dev docs","docs:build": "vuepress build docs"}
}

打开package.json文件，修改下scripts的内容：

在这里插入图片描述

步骤 5: 将默认的临时目录和缓存目录添加到 .gitignore 文件中

echo node_modules >> .gitignore
echo .temp >> .gitignore
echo .cache >> .gitignore

以上命令会自动在文件夹下添加.gitignore文件，并往文件中写入以下内容：

node_modules
.temp
.cache

这样，项目上传到github的时候就会忽略文件夹中的node_modules目录和.temp、.cache文件。

步骤 6: 创建你的第一篇文档

mkdir docs
echo '# Hello VuePress' > docs/README.md

以上命令会创建docs文件夹，并自动在文件夹下添加README.md文件，并往文件中写入以下内容：

# Hello VuePress

docs/README.md 文件中的内容就是网站首页的内容。

步骤 7: 在本地启动服务器来开发你的文档网站

pnpm docs:dev

在这里插入图片描述
VuePress 会在 http://localhost:8080 启动一个热重载的开发服务器。当你修改你的 Markdown 文件时，浏览器中的内容也会自动更新。

在这里插入图片描述
到了这里VuePress就安装完成了，下面我们来看下配置。

配置 VuePress

VuePress的配置都是通过config.js来进行的，所以第一步就是要新建config.js文件。

新建config.js

在\docs.vuepress目录下新建config.js文件：

在这里插入图片描述

输入以下内容：

import { defineUserConfig } from 'vuepress'export default defineUserConfig({lang: 'zh-CN',title: '你好， VuePress ！',description: '这是我的第一个 VuePress 站点',
})

请注意，首次添加config.js文件需要重启服务才能被刷新。

重启下服务，可以看到多了个标题：

在这里插入图片描述
说明配置生效了。

导航栏配置

下面我们来配置下导航栏。

修改config.js文件，添加navbar元素：

import { defaultTheme } from 'vuepress'export default {lang: 'zh-CN',title: 'zhanyd的博客',description: '欢迎来到zhanyd的博客',theme: defaultTheme({// 在这里进行配置navbar: [// NavbarItem{text: '首页',link: '/',},// NavbarGroup{text: '技术文档',children: ['/group/foo.md', '/group/bar.md'],},],}),
}
  • NavbarItem 对象的 text 字段就是导航栏的名字；link 字段就是页面的路径
  • NavbarGroup 对象的 text 字段就是导航栏的名字； children 字段是二级导航的路径

效果就是这样的：

在这里插入图片描述

侧边栏配置

接下来我们要把网站改造成自己喜欢的样子，我的博客有两个系列：网络和设计模式，接下来我们配置一下侧边栏和导航栏。

我们先来看下配置好的页面，首页是这样的：
在这里插入图片描述

点击右上角的“网络”按钮，出来网络侧边栏：

在这里插入图片描述

点击右上角的“设计模式”按钮，出来设计模式侧边栏：

在这里插入图片描述
我们先来看一下配置文件：

import { defaultTheme } from 'vuepress'export default {lang: 'zh-CN',title: 'zhanyd的博客',description: '欢迎来到zhanyd的博客',theme: defaultTheme({// 在这里进行配置navbar: [// NavbarItem{text: '首页',link: '/',},{text: '网络',link: '/network/',},{text: '设计模式',link: '/designPatterns/',},],// 侧边栏对象// 不同子路径下的页面会使用不同的侧边栏sidebar: {'/network/': [{text: '网络',children: [{text: '一张图帮你看懂，在浏览器输入网址回车后，都发生了什么？',link: '/network/一张图帮你看懂，在浏览器输入网址回车后，都发生了什么？.md',},{text: '在Jekyll中创建一个新的列表页面',link: '/network/在Jekyll中创建一个新的列表页面.md',}],},],'/designPatterns/': [{text: '设计模式',collapsible: true,children: [{text: '单例模式--我的机器人女友',link: '/designPatterns/单例模式--我的机器人女友.md',}],},],},    }),
}

分组侧边栏的原理是以文件夹的名字为 key，value 为侧边栏对象数组，如果侧边栏对象里有 children 字段说明这是个二级侧边栏，children 数组里对应的是具体的文档路径。

  • Key 为路径前缀。
  • Value 为侧边栏对象数组 。

我们先在 docs 目录下新建 designPatterns 和 network 文件夹：
在这里插入图片描述

designPatterns 目录下面放设计模式相关的文章：

在这里插入图片描述

network 目录下面放网络相关的文章：

在这里插入图片描述

注意：每个目录下面要有个 README.md 文件，用来存放子目录的首页：
在这里插入图片描述

我们要新增一篇文档的时候就把对应的文档放到对应的目录，然后在 config.js 中把文档的路径加上就行了。

点击文章标题，文章就出来了，效果还不错，接下去我们就来发布我们的网站。

在这里插入图片描述

发布 VuePress

如果你还没有 Github 的账号，就先去注册一个。

新建 Github 仓库

我们先在 Github 上新建一个仓库，我的仓库就叫：blog。

（注意：如果你的博客地址不想要有二级目录（blog），仓库名就叫 <你的用户名>.github.io，具体请看文章最后一段。 ）

在这里插入图片描述
在这里插入图片描述

添加 base 路径配置

然后，我们需要在 config.js 添加 base 路径配置：

// 将 base 设置为 "/<REPO>/"
base: "/blog/",

在这里插入图片描述

创建 GitHub Actions 配置文件

在你的项目根目录下，创建 .github/workflows 文件夹，然后创建 .github/workflows/docs.yml 文件来配置工作流。
在这里插入图片描述

把以下内容复制到 docs.yml 文件中：

name: docson:# 每当 push 到 main 分支时触发部署push:branches: [main]# 手动触发部署workflow_dispatch:jobs:docs:runs-on: ubuntu-lateststeps:- uses: actions/checkout@v4with:# “最近更新时间” 等 git 日志相关信息，需要拉取全部提交记录fetch-depth: 0- name: Setup pnpmuses: pnpm/action-setup@v2with:# 选择要使用的 pnpm 版本version: 8# 使用 pnpm 安装依赖run_install: true- name: Setup Node.jsuses: actions/setup-node@v4with:# 选择要使用的 node 版本node-version: 18# 缓存 pnpm 依赖cache: pnpm# 运行构建脚本- name: Build VuePress siterun: pnpm docs:build# 查看 workflow 的文档来获取更多信息# @see https://github.com/crazy-max/ghaction-github-pages- name: Deploy to GitHub Pagesuses: crazy-max/ghaction-github-pages@v4with:# 部署到 gh-pages 分支target_branch: gh-pages# 部署目录为 VuePress 的默认输出目录build_dir: docs/.vuepress/distenv:# @see https://docs.github.com/cn/actions/reference/authentication-in-a-workflow#about-the-github_token-secretGITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

提交项目到 github 仓库

在命令行依次执行以下代码，注意 git remote add origin 后面的地址要改成你自己的仓库地址：

  # git init 如果前面执行过，就不用执行了git init git add .git commit -m "first commit"git branch -M main#把 git@github.com:zhanyd/blog.git 改成你自己的仓库地址git remote add origin git@github.com:zhanyd/blog.gitgit push -u origin main

提交完代码之后，在github的仓库中看下Actions下面的信息，看看是否成功了。

额，出错了：

在这里插入图片描述

看了下错误信息，原来是 docs.yml 文件中的 pnpm 的版本和我本地的 pnpm 版本不一样：

在这里插入图片描述

我把docs.yml 文件中 pnpm 版本改成了 7.28.0，这样就和本地的 pnpm 版本一致了：

在这里插入图片描述

重新提交代码到 github，看了下Actions，还是报错，不过错误不一样了，这次是因为权限的问题。

在这里插入图片描述

打开Settings->Actions->General：

在这里插入图片描述

修改 Workflow permissions 为 Read and write permissions ：

在这里插入图片描述

再手动执行一下Actions：

在这里插入图片描述

终于成功了：

在这里插入图片描述

接着在Setting标签页中，选择Pages侧边栏，Source 选择 Deploy from a branch，然后在 Branch 标签下选择 gh-pages 分支和 root 目录，点保存，就可以看到上面的博客地址了：

在这里插入图片描述

如果没有显示博客地址，Source 选择 GitHub Actions 试一下：

在这里插入图片描述

打开地址就可以看到我们的博客了，终于发布成功啦！

在这里插入图片描述

发布到 <你的用户名>.github.io

我的博客的地址是：https://zhanyd.github.io/blog，你可能觉得不要 /blog 二级目录更好，能不能直接发布到地址https://zhanyd.github.io 呢？

答案是肯定的。

首先新建一个仓库，仓库名就是 <你的用户名>.github.io，比如我的Github用户名叫 zhanyd，所以我的仓库名就叫做 zhanyd.github.io ：

在这里插入图片描述

记得要删除 config.js 中的 base: “/blog/”：

在这里插入图片描述

然后把博客的文件复制到另一个文件夹（注意不要复制.git文件，因为这个文件已经和原来的仓库绑定了）

在这里插入图片描述

在命令行依次执行以下代码，提交到新的仓库就行了，注意 git remote add origin 后面的地址要改成你自己的仓库地址：

  # git init 如果前面执行过，就不用执行了git init git add .git commit -m "first commit"git branch -M main#把  git@github.com:zhanyd/zhanyd.github.io.git 改成你自己的仓库地址git remote add origin git@github.com:zhanyd/zhanyd.github.io.gitgit push -u origin main

看下效果，成功了：

在这里插入图片描述
以上操作都是我亲测有效的，你也来试试吧。

参考资料：https://v2.vuepress.vuejs.org/

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/227908.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

JVM-1-运行时数据区

JVM-1-运行时数据区

程序计数器&#xff08;Program Counter Register&#xff09; 是一块较小的内存空间&#xff0c;它可以看作是当前线程所执行的字节码的行号指示器。在Java虚拟机的概念模型里[1]&#xff0c;字节码解释器工作时就是通过改变这个计数器的值来选取下一条需要执行的字节码指令&…
阅读更多...
【ICCV 2022】Masked Autoencoders Are Scalable Vision Learners

【ICCV 2022】Masked Autoencoders Are Scalable Vision Learners

何凯明一作文章&#xff1a;https://arxiv.org/abs/2111.06377 本文的出发点&#xff1a;是BERT的掩码自编码机制&#xff1a;移除一部分数据并对移除的内容进行学习。mask自编码源于CV但盛于NLP&#xff0c;恺明对此提出了疑问&#xff1a;是什么导致了掩码自编码在视觉与语言…
阅读更多...
Apache OfBiz 反序列化命令执行漏洞（CVE-2023-49070）

Apache OfBiz 反序列化命令执行漏洞（CVE-2023-49070）

项目介绍 Apache OFBiz是一个非常著名的电子商务平台&#xff0c;是一个非常著名的开源项目&#xff0c;提供了创建基于最新J2EE/XML规范和技术标准&#xff0c;构建大中型企业级、跨平台、跨数据库、跨应用服务器的多层、分布式电子商务类WEB应用系统的框架。OFBiz最主要的特…
阅读更多...
自定义注解

自定义注解

自定义注解 自定义注解 以实战案例为驱动,快速掌握此怎么自己自定义注解,也好出去自己吹牛逼~哈哈哈 假设我们打车,需要检验验证码,我们需要一个注解字来进行核验,我们怎么操作呢? 大纲总览 ​​ 1.定义注解 可以自己创一个包单门存放自己的注解: 如​constraints​ 包 然后…
阅读更多...
Linux高级系统编程-MySQL数据库基本使用语法

Linux高级系统编程-MySQL数据库基本使用语法

DDL:数据定义语言 作用 : 用于完成对数据库对象&#xff08;数据库、数据表、视图、索引等&#xff09;的创建、删除、修改 数据库操作 查询数据库 - > 显示当前 mysql 中的数据库列表 > show databases; - > 显示指定名称的数据的创建的 SQL 指令 > show c…
阅读更多...
车规MCU应用场景及国产替代进展

车规MCU应用场景及国产替代进展

目录 1.车规MCU应用场景 1.1 车身域 1.2 动力底盘域 1.3 座舱域和智驾域 1.4 网联域 2.国产替代进展 3.小结 前面一篇文章征途漫漫:汽车MCU的国产替代往事-CSDN博客对车规MCU国产替代的背景与一些往事进行了简单叙述&#xff0c;今天来聊聊车规MCU具体会在汽车哪些地方用…
阅读更多...
sql宽字节注入

sql宽字节注入

magic_quotes_gpc&#xff08;魔术引号开关&#xff09; https://www.cnblogs.com/timelesszhuang/p/3726736.html magic_quotes_gpc函数在php中的作用是判断解析用户提交的数据&#xff0c;如包括有&#xff1a;post、get、cookie过来的数据增加转义字符“\”&#xff0c;以…
阅读更多...
PDF如何转换制作成翻页电子书

PDF如何转换制作成翻页电子书

很多朋友想将PDF转换制作成一本翻页电子书&#xff0c;却不知道如何操作。其实&#xff0c;转换翻页电子书的过程并不难&#xff0c;只需要掌握一些基本的技巧和方法就可以了。 基本该怎么操作呢&#xff1f; 1.首先需要一个工具帮助我们成功转换&#xff0c;推荐使用FLBOOK这…
阅读更多...
【LeetCode刷题笔记】155.最小栈

【LeetCode刷题笔记】155.最小栈

创作不易&#xff0c;本篇文章如果帮助到了你&#xff0c;还请点赞 关注支持一下♡>&#x16966;<)!! 主页专栏有更多知识&#xff0c;如有疑问欢迎大家指正讨论&#xff0c;共同进步&#xff01; 更多算法知识专栏&#xff1a;算法分析&#x1f525; 给大家跳段街舞感谢…
阅读更多...
滑动窗口最大值（LeetCode 239）

滑动窗口最大值（LeetCode 239）

文章目录 1.问题描述2.难度等级3.热门指数4.解题思路方法一&#xff1a;暴力法方法二&#xff1a;优先队列方法三&#xff1a;单调队列 参考文献 1.问题描述 给你一个整数数组 nums&#xff0c;有一个大小为 k 的滑动窗口从数组的最左侧移动到数组的最右侧。你只可以看到在滑动…
阅读更多...
【LeetCode刷题-树】--173.二叉搜索树迭代器

【LeetCode刷题-树】--173.二叉搜索树迭代器

173.二叉搜索树迭代器 本题就是实现二叉树的中序遍历&#xff0c;利用数组本身实现迭代器 /*** Definition for a binary tree node.* public class TreeNode {* int val;* TreeNode left;* TreeNode right;* TreeNode() {}* TreeNode(int val) { this.va…
阅读更多...
如何在Docker部署draw.io流程图软件并实现公网远程访问

如何在Docker部署draw.io流程图软件并实现公网远程访问

前言 提到流程图&#xff0c;大家第一时间可能会想到Visio&#xff0c;不可否认&#xff0c;VIsio确实是功能强大&#xff0c;但是软件为收费&#xff0c;并且因为其功能强大&#xff0c;导致安装需要很多的系统内存&#xff0c;并且是不可跨平台使用。所以&#xff0c;今天给…
阅读更多...
牛客小白月赛83 解题报告

牛客小白月赛83 解题报告

题目链接&#xff1a; https://ac.nowcoder.com/acm/contest/72041#question A题 解题思路 签到 代码 #include <bits/stdc.h> using namespace std;int main() {int a, b, c, d, e;cin >> a >> b >> c >> d >> e;int A, B, C, D…
阅读更多...
【人工智能】实验二: 洗衣机模糊推理系统实验与基础知识

【人工智能】实验二: 洗衣机模糊推理系统实验与基础知识

实验二: 洗衣机模糊推理系统实验 实验目的 理解模糊逻辑推理的原理及特点&#xff0c;熟练应用模糊推理。 实验内容 设计洗衣机洗涤时间的模糊控制。 实验要求 已知人的操作经验为&#xff1a; “污泥越多&#xff0c;油脂越多&#xff0c;洗涤时间越长”&#xff1b;“…
阅读更多...
DDD挤水分和强行加异性为好友-UMLChina建模知识竞赛第4赛季第25轮

DDD挤水分和强行加异性为好友-UMLChina建模知识竞赛第4赛季第25轮

DDD领域驱动设计批评文集 做强化自测题获得“软件方法建模师”称号 《软件方法》各章合集 参考潘加宇在《软件方法》和UMLChina公众号文章中发表的内容作答。在本文下留言回答。 只要最先答对前3题&#xff0c;即可获得本轮优胜。第4题为附加题&#xff0c;对错不影响优胜者…
阅读更多...
开源免费图床Lychee本地部署搭建个人云图床并公网访问【内网穿透】

开源免费图床Lychee本地部署搭建个人云图床并公网访问【内网穿透】

文章目录 1.前言2. Lychee网站搭建2.1. Lychee下载和安装2.2 Lychee网页测试2.3 cpolar的安装和注册 3.本地网页发布3.1 Cpolar云端设置3.2 Cpolar本地设置 4.公网访问测试5.结语 1.前言 图床作为图片集中存放的服务网站&#xff0c;可以看做是云存储的一部分&#xff0c;既可…
阅读更多...
作者推荐 |【深入了解系统性能优化】「实战技术专题」全方面带你透彻探索服务优化技术方案（方案分析篇）

作者推荐 |【深入了解系统性能优化】「实战技术专题」全方面带你透彻探索服务优化技术方案（方案分析篇）

全方面带你透彻探索服务优化技术方案 前提背景影响一个系统性能的方方面面代码优化数据库优化网络优化硬件优化 常用的性能评价/测试指标响应时间并发数吞吐量响应时间、并发数和吞吐量之间的关系运作流程关系 性能优化方案的建议避免过早优化进行系统性能测试寻找系统瓶颈&…
阅读更多...
R 语言相关资源分享

R 语言相关资源分享

简介 分享一个 Github 仓库&#xff0c;包含了大量 R 语言教程和资源&#xff0c;旨在帮助各种技能水平和背景的用户深化对 R 的理解。 下面给出一些截图&#xff0c;感兴趣的读者可以自行探索&#xff5e;
阅读更多...
JVM-2-对象

JVM-2-对象

对象创建 当Java虚拟机遇到一条字节码new指令时&#xff0c;首先将去检查这个指令的参数是否能在常量池中定位到一个类的符号引用&#xff0c;并且检查这个符号引用代表的类是否已被加载、解析和初始化过。如果没有&#xff0c;那必须先执行相应的类加载过程。 为对象分配空间…
阅读更多...
003 Windows用户与组管理

003 Windows用户与组管理

Windows用户管理 一、用户账户 1、什么是用户账户 不同用户身份拥有不同的权限每个用户包含了一个名称和一个密码每个用户账户具有唯一的安全标识符查看系统中的用户 net user 安全标识符&#xff08;SID&#xff09; whoami /user 使用注册表查看 打开注册表命令regedi…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023