【Github】搬运已有博客主页,建立自己的Github主页github.io(此文为超级错误版本,有空再整)

修改Github主页github.io

    • 前言
    • 参考知乎
    • 参考Vaala.cat大神的butterfly主题
    • 实践
    • 回看警示

前言

不知何时,自己创建了一个博客主页,但特别简陋。在自己的github库里。
本文主要学习对github代码库的pull和push,强调对原有界面的修改。

【Github】搬运已有博客主页,建立自己的Github主页github.io(此文为超级错误版本,有空再整)_第1张图片

【Github】搬运已有博客主页,建立自己的Github主页github.io(此文为超级错误版本,有空再整)_第2张图片

  • 下面我们根据教程,学习已有博客的搬运和搭建

参考知乎

下文可以从0开始搭建,博主本文强调对原有界面的修改。
超详细Hexo+Github博客搭建小白教程
三分钟在GitHub上搭建个人博客

参考Vaala.cat大神的butterfly主题

这边也顺便问为vaala大神引流,欢迎大家访问yyds的vaala!——https://vaala.cat/
Butterfly 安裝文檔(一) 快速開始

实践

Git学习:如何登陆以及创建本地代码仓库、并提交本地代码至Github(最简单方法)

自己的gitbash已经连接上github。
【Github】搬运已有博客主页,建立自己的Github主页github.io(此文为超级错误版本,有空再整)_第3张图片
之后,我们要在本地建立一个代码仓库。装载我们的代码。博主初始化在了E盘。
【Github】搬运已有博客主页,建立自己的Github主页github.io(此文为超级错误版本,有空再整)_第4张图片

cd E:
cd ./songku

【Github】搬运已有博客主页,建立自己的Github主页github.io(此文为超级错误版本,有空再整)_第5张图片
在这个盘下,我们初始化代码仓库。
输入命令:

git init

这样就完成了创建代码仓库的操作,创建完之后会在我们的文件夹下生成一个隐藏的git文件夹,该文件夹用来记录git操作,如图所示:
【Github】搬运已有博客主页,建立自己的Github主页github.io(此文为超级错误版本,有空再整)_第6张图片
【Github】搬运已有博客主页,建立自己的Github主页github.io(此文为超级错误版本,有空再整)_第7张图片
仓库创建完成之后我们可以通过ls -al 命令来查看一下所有的Git操作,如图所示:
【Github】搬运已有博客主页,建立自己的Github主页github.io(此文为超级错误版本,有空再整)_第8张图片
第三步.提交本地代码:
代码仓库创建完成之后就可以提交本地的代码了,首先我们在github上找到和我们自己博客所在的https的链接,找到之后clone and download,如下图所示:
【Github】搬运已有博客主页,建立自己的Github主页github.io(此文为超级错误版本,有空再整)_第9张图片
复制之后我们在git bash上输入代码:

git clone https://github.com/songku/songku.github.io.git

【Github】搬运已有博客主页,建立自己的Github主页github.io(此文为超级错误版本,有空再整)_第10张图片
那么我们就实现了将远程的github上的代码仓库下载到本地的效果。
【Github】搬运已有博客主页,建立自己的Github主页github.io(此文为超级错误版本,有空再整)_第11张图片

下面我们它修改,最后保存修改,push到github上,就实现了我们的搬运。
回到蝴蝶。
https://butterfly.js.org/posts/21cfbf15/
克隆蝴蝶博客代码。

建议先安装hexo,node.js再进行下面的搭建博客。https://hexo.io/zh-cn/docs/#%E5%AE%89%E8%A3%85-Hexo
npm install -g hexo-cli

【Github】搬运已有博客主页,建立自己的Github主页github.io(此文为超级错误版本,有空再整)_第12张图片
提示错误,我们需要在一个空的folder下进行hexo init
在这里插入图片描述

【Github】搬运已有博客主页,建立自己的Github主页github.io(此文为超级错误版本,有空再整)_第13张图片
正常执行效果如图
在这里插入图片描述
【Github】搬运已有博客主页,建立自己的Github主页github.io(此文为超级错误版本,有空再整)_第14张图片

【Github】搬运已有博客主页,建立自己的Github主页github.io(此文为超级错误版本,有空再整)_第15张图片

git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly

【Github】搬运已有博客主页,建立自己的Github主页github.io(此文为超级错误版本,有空再整)_第16张图片
进入到文件夹修改
【Github】搬运已有博客主页,建立自己的Github主页github.io(此文为超级错误版本,有空再整)_第17张图片
theme修改为butterfly
【Github】搬运已有博客主页,建立自己的Github主页github.io(此文为超级错误版本,有空再整)_第18张图片
下面探测了一下目录,并执行了图示命令
【Github】搬运已有博客主页,建立自己的Github主页github.io(此文为超级错误版本,有空再整)_第19张图片
经过胡乱一通操作,把自己的博客主页设置成这样了
【Github】搬运已有博客主页,建立自己的Github主页github.io(此文为超级错误版本,有空再整)_第20张图片

【Github】搬运已有博客主页,建立自己的Github主页github.io(此文为超级错误版本,有空再整)_第21张图片
不过也大致明白了,它把md文件作为了博客页面。以后只要修改md文件,即可修改博客主页。
进行第二弹操作
Butterfly 安裝文檔(二) 主題頁面

在博客根目录下:

npm install hexo-renderer-pug hexo-renderer-stylus

在这里插入图片描述
渲染报错

记录修改变化

git add .

注意add 之后的“.”之前是有一个空格的,没有空格的话这句话是没有任何效用的。此时再把我们的代码同步到git上:

git commit -m "second commit"
git push -u origin master

【Github】搬运已有博客主页,建立自己的Github主页github.io(此文为超级错误版本,有空再整)_第22张图片
在hexo博客所在文件夹下,执行命令,创建静态页面

hexo generate#简写为hexo g

生成静态文件。

选项 描述
-d, --deploy 文件生成后立即部署网站
-w, --watch 监视文件变动
-b, --bail 生成过程中如果发生任何未处理的异常则抛出异常
-f, --force 强制重新生成文件
Hexo 引入了差分机制,如果 public 目录存在,那么 hexo g 只会重新生成改动的文件。
使用该参数的效果接近 hexo clean && hexo generate
-c, --concurrency 最大同时生成文件的数量,默认无限制

可以观察到,我们这里已经获得了butterfly主题
【Github】搬运已有博客主页,建立自己的Github主页github.io(此文为超级错误版本,有空再整)_第23张图片

之后执行命令,在本地服务器查看

hexo server

启动服务器。默认情况下,访问网址为: http://localhost:4000/。

选项 描述
-p, --port 重设端口
-s, --static 只使用静态文件
-l, --log 启动日记记录,使用覆盖记录格式

【Github】搬运已有博客主页,建立自己的Github主页github.io(此文为超级错误版本,有空再整)_第24张图片
笑开花了卧槽!
【Github】搬运已有博客主页,建立自己的Github主页github.io(此文为超级错误版本,有空再整)_第25张图片

//最后三条命令!

#git add .
#git commit -m "second commit"
#git push -u origin master

。。。
被Github邮件回复泼了一盆冷水,说是页面无法加载,后面再整,没时间了

The page build failed for the master branch with the following error:
The value ‘{}’ was passed to a date-related filter that expects valid dates in /_layouts/default.html or one of its layouts. For more information, see https://docs.github.com/github/working-with-github-pages/troubleshooting-jekyll-build-errors-for-github-pages-sites#date-is-not-a-valid-datetime.
For information on troubleshooting Jekyll see:
https://docs.github.com/articles/troubleshooting-jekyll-builds
If you have any questions you can submit a request at https://support.github.com/contact?repo_id=299305209&page_build_id=257501987

回看警示

如上执行完hexo s后手工执行git commit提交为错误的方法。
正确步骤应该是:当执行完hexo s后,执行hexo d

hexo d #借助hexo管理工具部署到个人github仓库

你可能感兴趣的:(教程,git,github)