docusaurus部署Github Pages搭建个人博客

docusaurus部署Github Pages搭建个人博客

起因是这样的,一次偶然,我发现了博客的魅力,以及各种大佬的炫酷博客,我被深深地震撼到了,一直以来,因为这样那样的事没能开始搭建博客的道路(啊我…是了,是我拖延)身边朋友给我推荐了ducusaurus,说比较简单,容易上手,成功部署后,确实深感操作简单,容易上手,值得推荐

预备工作

首先需要有如下必要以及非必要软件,在此贴上官方下载网址

鉴于贴上相关教程不一定跟上最新版本,具体下载及其配置教程就自行搜索吧(没错我懒,就没贴,狗头保命

  1. 下载node.js

  2. 下载vscode(非必须)

  3. 下载git

  4. 安装yarn

    命令1:yarn:npm install -g yarn --registry=https://registry.npm.taobao.org

  5. 配置yarn源

    命令1:yarn config set registry https://registry.npm.taobao.org -g

    命令2:yarn config set sass_binary_site http://cdn.npm.taobao.org/dist/node-sass -g

  6. git命令备忘清单(非必须)

  7. Pro Git v2中文版(学习使用git,非必须)

  8. github官方使用说明(非必须)

关于docusaurus

docusaurus是基于React框架的静态站点生成器,可快速生成一个文档网站,可用于打造自己的博客等

项目结构如下:

docusaurus部署Github Pages搭建个人博客_第1张图片

关于详细介绍也可参考官网指南点击这里

安装docusaurus

也可参考官网指南:docusaurus官网指南

  1. 创建新的 Docusaurus 站点:

命令1:npx create-docusaurus@latest my-website classic

my-website是创建名,可随意更改,如我设置为cz-blog

classic是经典主题,我未更改,如有所需,可参考官网指南

  1. 运行网站:

命令1:cd my-website

命令2:npm run startyarn run start

退出快捷键:ctrl+c

默认情况浏览器会自动打开新窗口 http://localhost:3000 页面如下docusaurus部署Github Pages搭建个人博客_第2张图片

  1. 构建站点

命令1:npm run buildyarn run build

  1. 更新docusaurus(非必须)

命令1:npm installyarn installyarn upgrade @docusaurus/core@latest @docusaurus/preset-classic@latest

  1. 检测版本(非必须)

命令1:npx docusaurus --version

部署github pages

  1. github创建USERNAME.github.io仓库

    docusaurus部署Github Pages搭建个人博客_第3张图片

  2. github中git命令创建仓库

创建新仓库

git init
git add README.md
git commit -m "first commit"
git branch -M master
git remote add origin [email protected]:u8d5e/u8d5e.github.io.git
git push -u origin master
  1. github新建分支gh-pages

docusaurus部署Github Pages搭建个人博客_第4张图片

  1. github设置部署分支docusaurus部署Github Pages搭建个人博客_第5张图片

  2. 本地测试构建(非必须)

命令1:npm run serve或yarn run serve

站点默认为部署在 http://localhost:3000/

修改docusaurus相关文档

  1. 跳转到创建文档的目录,打开项目代码docusaurus部署Github Pages搭建个人博客_第6张图片

命令1:code .

会自动打开 vscode (或自己常用IDE)展示代码

  1. docusaurus.config.js设置
    docusaurus部署Github Pages搭建个人博客_第7张图片
  title: 'cz-blog', // The title of the website
  tagline: 'show me your code', // A word on the front page
  url: 'https://u8d5e.github.io/', // Your website URL
  baseUrl: '/',
  onBrokenLinks: 'throw',
  onBrokenMarkdownLinks: 'warn',
  favicon: 'img/cat4.png',

  // GitHub pages deployment config.
  // If you aren't using GitHub pages, you don't need these.
  organizationName: 'u8d5e', // Usually your GitHub org/user name.
  projectName: 'u8d5e.github.io', // Usually your repo name.
  deploymentBranch: 'gh-pages',
  trailingSlash: false,

注意:u8d5e是我的用户名,请自行更改

yarn命令部署

命令:yarn deploy

最终如下图所示即成功部署docusaurus部署Github Pages搭建个人博客_第8张图片

等那么一会会(一般1-2min),浏览器输入https://用户名.github.io/网址就可以看到效果了,如我的网址:Hello from cz-blog

bug小结

我起先用vscode自带终端,报错不断,问题连连,用window的cmd运行一步到位,一错未有,目前还未深究这两者造成不同效果的区别,如有大佬指点,在此不甚感激!

2023.10.26更新:
突然想起了这篇文章(oh没错,好久没来看快忘了(滑稽)),前阵子使用vscode终端写命令行,突然反应过来,vscode自带终端安装报错应该是权限不够,以管理员身份运行vscode就没问题
解决方案是,用浏览器搜索 管理员身份运行vscode ,或者直接把软件默认运行方式该为管理员模式,同理百度搜索 vscode设置为管理员启动
这次点击可以直接跳转都搜索链接,不用谢(假装好心hhhh)

问题如下

OpenSSL SSL_read: Connection was aborted, errno 10053

修改默认存储大小git config --global http.postBuffer 524288000

又报新错,出现下一个问题

Failed to connect to github.com port 443 after 21114 ms: Timed out

关闭(没用)

全局设置、取消全局设置(没用)

网上查阅的解决办法解决后又报上一个错(被bug玩弄于股掌之中既视感)

重新设置代理模式(http远程地址改用了git的,有用了一半,部署中终止,出现下一个问题)docusaurus部署Github Pages搭建个人博客_第9张图片

非快进问题non-fast-forward

img

git fetch origin
git merge origin BANCH_NAME
git pull origin BANCH_NAME
git push origin BANCH_NAME

查阅官网提供以上方法,出现下一个问题

本地与远程不匹配faild to push some refs to xxx

img

设置上游分支:git branch --set-upstream-to=origin/<远程分支> <本地分支>

取消上游分支:git branch --unset-upstream

查看上游分支:git statusgit checkout <分支>git branch -vv

感觉弄明白bug源头了,但是未解决

删库重来N次(~~只要重来的次数够多,bug就能解决完,~~bushi)跟朋友交流后我决定用纯命令来部署,没想到,一次成功了,流下了充(bu)满(xue)技(wu)术的泪水

成功后,修改docusaurus默认文档中blog文档后,再次yarn deploy出现了新的问题

FATAL ERROR: Zone Allocation failed - process out of memory # error Command failed with exit code 3221225725.

关闭(解决)

这个问题搜索出来各种回答不适用,我结合自己小飞机不断突然断掉,又出现过关闭能解决问题的回答(上面第二个bug搜索出来过这个解决办法),尝试了关闭再部署,成功了

最终效果

blog网址:Hello from cz-blog

会继续学习前端,丰富自己的blog的~~

2023.10.26更新:
果然,这么久了还是这个模样,属于是没救了,难怪没工作,下次一定(狗头)

docusaurus部署Github Pages搭建个人博客_第10张图片docusaurus部署Github Pages搭建个人博客_第11张图片

你可能感兴趣的:(Blog搭建,github,git,node.js)