从零开始：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: docs

on:
  # 每当 push 到 main 分支时触发部署
  push:
    branches: [main]
  # 手动触发部署
  workflow_dispatch:

jobs:
  docs:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v4
        with:
          # “最近更新时间” 等 git 日志相关信息，需要拉取全部提交记录
          fetch-depth: 0

      - name: Setup pnpm
        uses: pnpm/action-setup@v2
        with:
          # 选择要使用的 pnpm 版本
          version: 8
          # 使用 pnpm 安装依赖
          run_install: true

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          # 选择要使用的 node 版本
          node-version: 18
          # 缓存 pnpm 依赖
          cache: pnpm

      # 运行构建脚本
      - name: Build VuePress site
        run: pnpm docs:build

      # 查看 workflow 的文档来获取更多信息
      # @see https://github.com/crazy-max/ghaction-github-pages
      - name: Deploy to GitHub Pages
        uses: crazy-max/ghaction-github-pages@v4
        with:
          # 部署到 gh-pages 分支
          target_branch: gh-pages
          # 部署目录为 VuePress 的默认输出目录
          build_dir: docs/.vuepress/dist
        env:
          # @see https://docs.github.com/cn/actions/reference/authentication-in-a-workflow#about-the-github_token-secret
          GITHUB_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.git
  git 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.git
  git push -u origin main

看下效果，成功了：

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

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

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

【C语言：动态内存管理】

【C语言：动态内存管理】

文章目录 前言1.malloc2.free3.calloc4.realloc5.动态内存常见错误6.动态内存经典笔试题分析7.柔性数组8.C/C中的内存区域划分 前言 文章的标题是动态内存管理&#xff0c;那什么是动态内存管理&#xff1f;为什么有动态内存管理呢&#xff1f; 回顾一下以前学的知识&#xff…
阅读更多...
Linux_Ubuntu 系统入门

Linux_Ubuntu 系统入门

Ubuntu 系统是和 Windows 系统一样的大型桌面操作系统&#xff0c;因此功能非常强大。 本节的目的是掌握后续嵌入式开发所需的 Ubuntu 基本技能&#xff0c;比如系统的基本设置、常用的 shell 命令、vim 编译器的基本操作等等…… Ubuntu 的图形化界面操作和 Windows 下基本一致…
阅读更多...
Proxmox创建Windows虚拟机

Proxmox创建Windows虚拟机

文章目录 下载ISO安装文件上传 下载ISO安装文件 下载地址&#xff1a;https://www.xitongzhijia.net/ 也可去官网进行下载 上传 将下载的ISO文件上传到Proxmox 选择ISO文件进行上传 上传后再ISO镜像中可以看到安装文件 点击创建虚拟机 填写名称&#xff0c;不能填写中文 镜…
阅读更多...
程序员的养生之道：延寿健康的十大秘诀（下）

程序员的养生之道：延寿健康的十大秘诀（下）

程序员的养生之道&#xff1a;延寿健康的十大秘诀&#xff08;上&#xff09;-CSDN博客 目录 6. 心理调节&#xff0c;减轻压力 6.1 程序员常见的心理问题 6.2 压力管理的重要性 6.3 放松技巧与应对策略 6.4 积极心态与心理健康 7. 正确坐姿&#xff0c;保护颈椎腰椎 …
阅读更多...
SpringBoot之实体参数的详细解析

SpringBoot之实体参数的详细解析

1.3 实体参数 在使用简单参数做为数据传递方式时&#xff0c;前端传递了多少个请求参数&#xff0c;后端controller方法中的形参就要书写多少个。如果请求参数比较多&#xff0c;通过上述的方式一个参数一个参数的接收&#xff0c;会比较繁琐。 此时&#xff0c;我们可以考虑…
阅读更多...
ActiveMQ使用指南

ActiveMQ使用指南

介绍 ActiveMQ是Apache开源组织旗下的一个项目&#xff0c;是一个流行的开源消息中间件。它完全支持JMS1.1和J2EE1.4规范的JMS Provider实现&#xff0c;并且是纯Java开发的产品。ActiveMQ支持多种语言编写客户端&#xff0c;包括C,C,C#,Perl,PHP,Ruby,Ajax等&#xff0c;同时…
阅读更多...
K8S（四）—pod详解

K8S（四）—pod详解

目录 pod介绍Pod的概念&#xff1a;Pod的特性&#xff1a;Pod的配置&#xff1a;Pod的控制&#xff1a;示例 YAML 文件&#xff1a; pod启动流程问题 两种方式启动镜像的升级和回滚更新 Deployment&#xff1a;回滚检查 Deployment 历史版本回滚到之前的修订版本缩放 Deploymen…
阅读更多...
【C语言宝库】- 操作符|详解进制转换|计算机小白必备技能（上）

【C语言宝库】- 操作符|详解进制转换|计算机小白必备技能（上）

&#x1f308;个人主页: Aileen_0v0 &#x1f525;系列专栏:C语言学习 &#x1f4ab;个人格言:"没有罗马,那就自己创造罗马~" 目录 进制 定义 基本原理 转换方式 常见的进制转换 二进制和进制的转换 二进制转十进制 十进制转二进制 &#xff08;1&#xf…
阅读更多...
Nginx核心策略配置详解（反向代理、轮询配置、动静分离）

Nginx核心策略配置详解（反向代理、轮询配置、动静分离）

Nginx反向代理配置 上图需求二配置方式&#xff1a; 1.配置好JDk 2.部署tomcat&#xff0c;需要复制tomcat 修改server.xml文件等。 保持默认监听8080&#xff0c;8081端⼝ 3.修改nginx配置&#xff0c;并重新加载 nginx 安装有两种方式一种是联网一键下载&#xff0c;Nginx…
阅读更多...
C++初阶（十五）Stack和Queue

C++初阶（十五）Stack和Queue

文章目录 一、Stack的模拟实现二、Queue的模拟实现三、容器适配器1、什么是容器适配器2、STL标准库中stack和queue的底层结构3、 deque的简单介绍(了解)1、deque的原理介绍2、deque的缺陷 4、为什么选择deque作为stack和queue的底层默认容器 一、Stack的模拟实现 #include<…
阅读更多...
静态SOCKS5：了解基本概念和协议

静态SOCKS5：了解基本概念和协议

SOCKS5是一种网络协议&#xff0c;是SOCKS协议的第五个版本&#xff0c;它提供了一种安全的、加密的网络连接&#xff0c;可以帮助用户在互联网上保护自己的隐私和安全。静态SOCKS5是指使用静态IP地址和端口的SOCKS5代理服务器&#xff0c;这种代理服务器可以提供更稳定、更快速…
阅读更多...
idea SpringBoot target 不自动更新,不自动生成问题

idea SpringBoot target 不自动更新,不自动生成问题

如题,为什么不自动更新? 我使用Maven中的insert命令生成了target文件夹,但是,修改了代码重新启动还是不会自动更新,检查了文件,发现了resources文件夹是一个普通文件夹,没有标记为项目资源文件夹,所以idea不会给你自动生成的
阅读更多...
css 纯样式实现绘出进度条

css 纯样式实现绘出进度条

效果&#xff1a; css代码&#xff1a; .bar{height: 14px;width: 100%;font-size: 10px;margin-top: 5px;background-color: #f5f5f5;}.bar::before{display: block;counter-reset: progress var(--precent); content: ;width: calc(1% * var(--precent));color: #fff;height:…
阅读更多...
大数据机器学习深度解读决策树算法：技术全解与案例实战

大数据机器学习深度解读决策树算法：技术全解与案例实战

大数据机器学习深度解读决策树算法&#xff1a;技术全解与案例实战 本文深入探讨了机器学习中的决策树算法&#xff0c;从基础概念到高级研究进展&#xff0c;再到实战案例应用&#xff0c;全面解析了决策树的理论及其在现实世界问题中的实际效能。通过技术细节和案例实践&…
阅读更多...
JavaEE之多线程编程：2.创建线程及Thread类常见方法（超全！！！）

JavaEE之多线程编程：2.创建线程及Thread类常见方法（超全！！！）

一、创建线程 Java中创建线程的写法有很多种&#xff01;&#xff01;&#xff01;这里介绍其中5种。 方法1&#xff1a;继承Thread类&#xff0c;重写run 创建一个类&#xff0c;让这个类继承自Thread父类&#xff0c;再重写我们的run方法就可以了。 使用Thread类&#xff…
阅读更多...
[已解决]diffusers加载的模型都被放在哪里了

[已解决]diffusers加载的模型都被放在哪里了

1 模型位置 /root/.cache/huggingface/hub ~/.cache/huggingface/hub 2 unet位置 值得注意的是需要进入这个目录才可以看到unet文件 /root/.cache/huggingface/hub/models--nota-ai--bk-sdm-base-2m/snapshots/e8b5597155c5b2c77585570b99113f1c77b97338
阅读更多...
java方法引用语法规则以及简单案例

java方法引用语法规则以及简单案例

目录 一、方法引用1.1 什么是方法引用1.2 方法引用的语法规则1.3 构造器引用1.4 方法引用的简单案例 参考资料 一、方法引用 1.1 什么是方法引用 方法引用是 Lambda 表达式的一种简写形式&#xff0c;用于表示已有方法的直接引用。 类似于lambda表达式&#xff0c;方法引用也…
阅读更多...
echarts自定义tooltip位置和内容

echarts自定义tooltip位置和内容

tooltip: {trigger: item,backgroundColor: none,position: function (pos, params, dom, rect, size) {//我这个是每次显示30条数据 所以这么判断var obj params.dataIndex < 15 ? "right" : "left"return obj;},formatter: (params) > {//收入和…
阅读更多...
Spring Boot--Freemarker渲染技术+实际案例

Spring Boot--Freemarker渲染技术+实际案例

目录 Freemarker 1.1.什么是Freemarker 1.2.Freemarker模板组成部分 1.3.优点 FreeMarker常见的方法&#xff1a; 2.2.2.数值 2.2.3.布尔值 2.2.4.日期 2.3.常见指令 2.3.1.处理不存在的值 assign 2.3.4.list 2.3.5.include SpringBoot整合Freemarker Freemarker…
阅读更多...
MYsql第三次作业

MYsql第三次作业

目录 问题&#xff1a; 解答 1.查询student表的所有记录 2.查询student表的第2条到4条记录 3.从student表查询所有学生的学号&#xff08;id&#xff09;、姓名&#xff08;name&#xff09;和院系&#xff08;department&#xff09;的信息 4.从student表中查询计算机系和…
阅读更多...
最新文章

Copyright @ 2022~2023