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

这篇具有很好参考价值的文章主要介绍了从零开始:VuePress2 + GitHub Pages 搭建你的第一个免费博客网站。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

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

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

安装 Node.js

首先去Node.js官方下载安装包安装: https://nodejs.org/en
从零开始:VuePress2 + GitHub Pages 搭建你的第一个免费博客网站,VuePress2,GitHub,GitHub Pages,博客

安装pnpm

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

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

执行命令:

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

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

从零开始:VuePress2 + GitHub Pages 搭建你的第一个免费博客网站,VuePress2,GitHub,GitHub Pages,博客
将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的内容:

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

步骤 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

从零开始:VuePress2 + GitHub Pages 搭建你的第一个免费博客网站,VuePress2,GitHub,GitHub Pages,博客
VuePress 会在 http://localhost:8080 启动一个热重载的开发服务器。当你修改你的 Markdown 文件时,浏览器中的内容也会自动更新。

从零开始:VuePress2 + GitHub Pages 搭建你的第一个免费博客网站,VuePress2,GitHub,GitHub Pages,博客
到了这里VuePress就安装完成了,下面我们来看下配置。

配置 VuePress

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

新建config.js

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

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

输入以下内容:

import { defineUserConfig } from 'vuepress'

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

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

重启下服务,可以看到多了个标题:

从零开始:VuePress2 + GitHub Pages 搭建你的第一个免费博客网站,VuePress2,GitHub,GitHub Pages,博客
说明配置生效了。

导航栏配置

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

修改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 字段是二级导航的路径

效果就是这样的:

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

侧边栏配置

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

我们先来看下配置好的页面,首页是这样的:
从零开始:VuePress2 + GitHub Pages 搭建你的第一个免费博客网站,VuePress2,GitHub,GitHub Pages,博客

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

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

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

从零开始:VuePress2 + GitHub Pages 搭建你的第一个免费博客网站,VuePress2,GitHub,GitHub Pages,博客
我们先来看一下配置文件:

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 文件夹:
从零开始:VuePress2 + GitHub Pages 搭建你的第一个免费博客网站,VuePress2,GitHub,GitHub Pages,博客

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

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

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

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

注意:每个目录下面要有个 README.md 文件,用来存放子目录的首页:
从零开始:VuePress2 + GitHub Pages 搭建你的第一个免费博客网站,VuePress2,GitHub,GitHub Pages,博客

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

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

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

发布 VuePress

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

新建 Github 仓库

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

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

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

添加 base 路径配置

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

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

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

创建 GitHub Actions 配置文件

在你的项目根目录下,创建 .github/workflows 文件夹,然后创建 .github/workflows/docs.yml 文件来配置工作流。
从零开始:VuePress2 + GitHub Pages 搭建你的第一个免费博客网站,VuePress2,GitHub,GitHub Pages,博客

把以下内容复制到 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下面的信息,看看是否成功了。

额,出错了:

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

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

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

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

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

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

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

打开Settings->Actions->General:

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

修改 Workflow permissions 为 Read and write permissions :

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

再手动执行一下Actions:

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

终于成功了:

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

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

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

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

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

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

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

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

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

答案是肯定的。

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

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

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

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

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

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

在命令行依次执行以下代码,提交到新的仓库就行了,注意 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

看下效果,成功了:

从零开始:VuePress2 + GitHub Pages 搭建你的第一个免费博客网站,VuePress2,GitHub,GitHub Pages,博客
以上操作都是我亲测有效的,你也来试试吧。

参考资料:https://v2.vuepress.vuejs.org/文章来源地址https://www.toymoban.com/news/detail-759056.html

到了这里,关于从零开始:VuePress2 + GitHub Pages 搭建你的第一个免费博客网站的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【实操】基于 GitHub Pages + Hexo 搭建个人博客

    《开发工具系列》 相信很多学习技术的读者朋友们,都梦想能创建一个属于自己的个人博客。现在,这将不是梦想,下面跟着 Huazie 一起利用 GitHub Pages + Hexo 搭建一个属于自己的个人博客吧。 Node.js 官方下载地址 注意: Hexo 官方建议使用 Node.js 12.0 及以上版本 笔者本地下载的

    2024年01月19日
    浏览(70)
  • 基于Hexo在GitHub Pages上搭建博客的方法

    或许说这是本站从无到有搭建的记录更为准确。 本站?什么本站?总不能是CSDN吧?这里指的是我的个人博客网站 Karubon.moe ,这篇博客基于搭建这个网站时得到的经验教训编写。喜欢这篇博客的话不妨去我的网站看看呀。 在寒假的中期,百般聊赖之下,终于是打算拥有一个自

    2024年02月22日
    浏览(43)
  • 如何使用Jekyll在GitHub Pages上搭建网站(个人博客)

    本文很长,建议使用侧边栏进行跳转。 Jekyll 是一个基于 Ruby 语言的,用于搭建静态网站的生成器,主要用于搭建博客网站(官方自己的介绍为:Jekyll is a blog-aware, static site generator in Ruby)。但是虽然是静态网站,但是可以实现一些使用数据库的动态网站的效果和功能,是很不

    2024年02月06日
    浏览(81)
  • Jekyll(一).使用Jekyll+Github Pages搭建自己的博客

    Jekyll 是一个静态站点生成器,内置 GitHub Pages 支持和简化的构建过程。 Jekyll 使用 Markdown 和 HTML 文件,并根据您选择的布局创建完整静态网站。 Jekyll 支持 Markdown 和 Lick,这是一种可在网站上加载动态内容的模板语言。所以在Github Pages上使用Jekyll很合适,其他有关介绍请参考

    2024年02月11日
    浏览(51)
  • 如何零基础零费用的在30分钟内用hugo+github pages创建一个专属于你的个人博客 - 简单快捷到建议人手一个

    写这篇文章的原因是在网上看了很多的教程,踩了不少的坑,更多的白费了很多功夫,也没找到一篇从头到尾完整有效的个人建站方法。 有些教程年代久远,有些教程极为繁琐,有些教程压根跑不通。 为了方便自己,做个记录,也方便大家,在这个人人都可以发声的时代,

    2024年01月22日
    浏览(56)
  • 一步步在 github pages 上用 jekyll 搭建属于自己的博客

    我的专业与互联网没有太大关系,接触博客还是工作以后的事情。随着工作的经验增加,总想将自己的所思所得记录下来,毕竟,好记性不如烂笔头。 开始是将自己的总结在本地保存,但是本地有一个劣势,就是不能随时随地的查看,最重要的是,不能随时随地的装X,所以

    2024年01月20日
    浏览(56)
  • 杂货铺 | 使用 Github Pages 和 Hexo 搭建自己的独立博客

    node.js安装,在安装时会自动安装npm。 Git安装,点击此处访问官网,按需下载对应版本,默认安装即可。 检验安装是否成功: Win + R 打开运行窗口,输入 cmd ,输入如下命令,有相应版本信息显示则安装成功。 若不正确可以卸载软件重新安装,此外若安装成功,在桌面右键鼠

    2024年04月27日
    浏览(34)
  • 从零开始配置franka机器人,让你的franka动起来

    实验室新搬来一个franka机器人,下面记录环境配置过程 将网线通过机器人控制器连接到电脑,并打开控制器电源开关,刚开始机器人黄灯闪烁,等待大概30s,转为黄灯常亮,代表启动成功,处于抱闸状态 环境:Ubuntu20.04 ROS Noetic版本 franka机械臂默认ip为172.16.0.2,若直连机械臂

    2024年01月18日
    浏览(54)
  • 从零用VitePress搭建博客教程(7) -– 如何用Github Actions自动化部署到Github Pages?

    接上一节: 从零用VitePress搭建博客教程(6) -– 第三方组件库的使用和VitePress搭建组件库文档  我们搭建完成vitePress后,那么接下来就是如何部署到线上服务器,这里使用Github Pages,免得自己购买服务器,当然你也可以自己购买服务器来部署(比如阿里云服务器)。 在部署之

    2024年02月08日
    浏览(69)
  • 小程序开发:如何从零开始建立你的第一个小程序

    你可能有一个小程序的想法,但它仍然是一个想法。对于开发人员来说,这是一项艰巨的任务,因为你必须确保你有足够的时间来开发你的第一个小程序。如果你决定使用小程序,那就有很多事情要做。创建一个小程序可能是一件非常耗时的事情。除了创建一个自己的小程序

    2024年02月10日
    浏览(73)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包