首页 > 其他分享 >【从0到1】用Github Pages和VuePress搭建博客

【从0到1】用Github Pages和VuePress搭建博客

时间:2023-09-01 13:57:01浏览次数:50  
标签:yarn git 更新 Github 博客 页面 Pages VuePress

写在前面

优点:

  • 免费
  • 简单,上手快
  • 相比博客园和CSDN自定义程度高

缺点:

  • 静态页面,缺少一些交互功能

我选择了它是因为只是想用博客做记录,不想花时间自己写前端~

Github Pages

在GitHub里新建一个Repository,命名为 [your_github_name].github.io,博客的网址就是这个啦~

eg. 这是我的博客网址 https://starlightlmy.github.io/

注意:进入网页后默认显示的页面的名字是index.html,可以在setting里修改默认的页面(也可以是docs文件夹下的index.html页面)

VuePress

它是“Vue驱动的静态网站生成器”

官方中文文档:

https://vuepress.vuejs.org/zh/guide/

下载、配置都可以参考官方文档,注意目录结构要和文档里一致

具体地,我在 vscode 里新建了一个项目,然后在 terminal 里用 yarn 包处理的(亲测 yarn 比 npm 好用)

注意:在安装过程中可能会出现 error:03000086:digital envelope routines::initialization error 错误,这是因为node.js版本过高,这时只需要在命令行输入 $env:NODE_OPTIONS="--openssl-legacy-provider" 便可继续往下执行

Git

在上传新博文的过程中,需要用到 Git 这个版本管理工具。

具体地,先 clone 刚才创建的Repository的网址,然后cd进入这个.git的文件夹下更新文件,再上传

git操作

  1. git add [file_name] 或者 git add . 表示将更新信息存入暂存区
  2. git commit -m "备注的更新信息(啥都行,写给自己看)",提交一次更新
  3. git push 把所有更新信息都从本地push到网上

更新博客

先在本地写好,然后使用 yarn build 命令,编译生成静态文件,它会更新到 /dist 下,然后push到网上即可

标签:yarn,git,更新,Github,博客,页面,Pages,VuePress
From: https://www.cnblogs.com/re0acm/p/17671669.html

相关文章

  • 这可能是Github上最全面的Flutter教程,带你玩转Flutter
    Flutter是什么来头?Flutter是一款开源UI工具包,可利用单一代码库构建本地编译的移动、Web和桌面应用程序。Flutter由谷歌牵头开发,允许开发者构建出具有良好表现力、灵活设计、样式美观且运行迅速的应用程序。Flutter的核心语言为Dart,这是一种现代多范式语言,能够面向多个平台......
  • How to install a npm package from the GitHub repository All In One
    HowtoinstallanpmpackagefromtheGitHubrepositoryAllInOnegitrepo$git+https://github.com/xgqfrms/wcui.git$git+ssh://[email protected]/xgqfrms/wcui.git$npminstallhttps://github.com/xgqfrms/wcui/tree/[email protected]:x......
  • Steam++加速github,会导致github图床上传失败
    PicGo日志报错信息"message":"unabletoverifythefirstcertificate",原因软件:PIcGO图床:github加速器:Steam++(又称:WattToolkit)由于Steam++安全证书问题,会导致unabletoverifythefirstcertificate,无法验证第一证书问题。关闭加速器即可解决......
  • 如何在github或gitlab中将upstream项目中的新分支添加到fork后的origin项目中?
    1、问题:在gitlab或github中,将某项目进行了fork,fork后在自己的项目空间中就有了自己的origin项目,之后如果在源项目(upstream项目)中添加了新的分支,但是在自己的origin项目中不会被同步添加上,这就需要自己去添加这个分支(假如分支名为:new)。2、解决:要将新的分支添加到自己的origin项......
  • github.com/mitchellh/mapstructure 教程
    官网链接:github.com/mitchellh/mapstructure本文只是简单的记录下mapstructure库的简单使用,想更加详细的学习,点击Godoc学习吧。文中内容基本都是来自后面的参考链接。github.com/mitchellh/mapstructure是一个用于将通用的map值解码为结构体(struct)并进行错误处理的Go......
  • github.com/json-iterator/go 详细教程
    最近接触到了github.com/json-iterator/go,是由滴滴开源的第三方json编码库,它同时提供Go和Java两个版本。文中大量内容来自github上的wiki文档,有兴趣的朋友可以直接点击Home跳转到官方文档查阅。本文加了些自己的思考以及相关的详细学习例子,废话不多说了,冲!!!1、基础介......
  • [转]vcpkg+opencv4(sfm+vtk)+openMVS+SFM算法-github代下载(http://gitd.cc/)
    1、vcpkg+opencv4(sfm+vtk)+openMVS+SFM算法-github代下载(http://gitd.cc/)2、OpenMVS详细安装教程(ubuntu18.04)3、ubuntu18.04安装openMVS......
  • 利用GitHub 的Actions自动同步gitee仓库,并Gitee Pages 自动部署项目
    Gitee同步GitHub仓库GitHub有时候访问速度慢,加载不了图片等问题。过程记录GitHub的Actions会处理.github下的工作流文件夹workflows。只要在g项目根目录下创建.github/workflows/,在这个文件夹里再创建Sync.yml文件,填入以下代码。当产生push操作就会自动同步gitee<divid="......
  • github中文社区
    GitHub是世界上最大的代码托管平台,超7千万开发者正在使用。GitHub中文社区是一个致力于分享和传播GitHub上优质开源项目的中文社区平台。 原来的githubs.cn打不开了,换地址了https://github-zh.comGitHub中文社区|GitHub中文网(github-zh.com)......
  • Typora+PicGo 上传图片至GitHub仓库
    提前准备好Github账号、PicGo、Typora创建Github账号地址:https://github.com/下载PicGo地址:https://github.com/Molunerfinn/PicGo/releases/下载Typora地址:https://typora.yjjxx.cn/index.html1.创建Github仓库 点击new新建仓库输入Repositoryname(PicGo中要用到),选择Public......