首先请自行注册Github账号,点这里

参考资料
  1. 从零开始搭建个人博客(超详细)—— 枫叶,该答主写得非常详细,跟着走完全程应该没什么问题,可能有些步骤由于版本更替和个人配置会稍有差异
  2. butterfly官方指北,安装好之后的一些关于该主题的配置,介绍比较全面,可以配合Hexo初阶入门教程萌新必备手摸手教学食用更佳
  3. 评论系统为Vercel上部署的Twikoo,可参阅Twikoo指南
  4. 经过以上步骤基本可以建好一个初步的博客网站了,进一步个性化配置主题,可以多搜索参考大佬们的

申请好github账号之后可以按照下面的步骤进行操作,出现问题可以将错误信息复制粘贴到搜索引擎进行搜索,一般都能找到解决方法

Git下载安装

Git下载安装
  • git下载地址,根据自己的系统进行下载。我这里选择下载windows 64bit版本的installer。

git下载界面

  • 安装目录选择

git目录

  • 以下几个步骤可根据自身情况配置(使用默认设置也可)

git3

git4

git5

git6

git7

git8

git9

git10

git11

git12

git13

git14

git15

git16

git17

安装完成,在桌面右键,可以看到出现了git bush选项,点击后就可以使用git了!

git18

git19

Git与Github连接

使用ssh协议连接github,进行本地提交修改仓库文件。

  • SSH协议是一种在不安全网络上用于安全远程登录和其他安全网络服务的协议,由三个层次组成:传输层协议、用户认证协议和连接协议。SSH协议可以防止中间人攻击,即攻击者冒充服务器或客户端进行数据截获或篡改的攻击。SSH协议通过使用公钥私钥对进行身份验证,以及使用会话标识符来标识SSH连接来实现安全性。由于SSH提供了更高的安全性和可靠性,它已经成为了远程管理和操作的首选方式,被广泛应用于Linux、Unix、macOS和Windows等操作系统中。

绑定Github

绑定Github

用git上传文件到GitHub首先得利用SSH登录远程主机,而登录方式有两种:一种是口令登录;另一种是公钥登录。口令登录每次都要输入密码十分麻烦,所以我们一般会选择公钥授权。在上一步安装过程中,我们选择安装了Git自带的OpenSSH,可以打开GitBush进行以下操作。

复制命令:Ctrl+Insert

粘贴命令:Shift+Insert

  • 输入ssh回车后进行查看,出现下面提示,则证明已安装成功,可以直接使用

link1

  • 命令ssh-keygen -t rsa,之后点4次回车,生成密钥

默认生成文件地址

windows:/c/Users/你的用户名/.ssh/

mac和linux:~/.ssh

link2

  • 找到公钥文件id_rsa.pub,以文本形式打开,复制所有内容到剪贴板

link3

  • 点击GitHub主页,进入settings界面

link4

  • 进入界面后,选择SSH and GPG keys,再点击New SSH key

link5

  • 把复制的公钥文件id_rsa.pub内容,粘贴到key框里,(Title部分非必填),再点击Add SSH key

link6

第一次连接会进行一次确认,填yes即可

link7

至此我们就完成了本地Git和Github的连接设定,下面我们将进行本地修改仓库文件,如何对Github仓库提交文件,同步更新

向Github提交文件

Git提交文件

本地没有仓库时,同步远程Github仓库到本地,修改变更再提交给Github,可按照一下步骤进行操作。若本地已有一个Git仓库,想提交到Github远程仓库时,只需进入该本地仓库,输入命令git remote add origin [email protected]:viesuki/test.git就能完成连接,之后的操作下同。

下面我新建一个Github仓库,一次为例进行演示

  • 到github主页点击Respositories,点击New新建仓库test

link8

  • 点击添加仓库后便得到了一个仓库

link9

lin10

  • 点击右上角code,copy仓库SSH地址(HTTPS不太稳定)

link11

  • 进入想要克隆到本地的项目文件夹,输入:git clone [email protected]:viesuki/test.git

link12

  • 然后就可以在本地文件夹里看到克隆的仓库test了,其中.git文件夹是隐藏文件,需要打开文件管理器显示隐藏文件功能才能看到

link13

  • 下面对本地仓库进行修改,我们在本地仓库新增一个文件test.txt

link14

  • Git Bush使用cd命令进入本地test仓库,输入git status查看仓库状态

可以看到新增的文件需要被提交,是红色状态

link15

  • 使用命令git add .将文件变更先添加到临时文件缓冲区

此时新文件已被提交到临时缓冲区,变为绿色状态

link16

  • 使用命令git commit -m "提交信息",将更改提交到本地仓库

第一次提交会弹出以下提示

link17

运行红框内的两行命令,把双引号内的信息改成注册Github的邮箱和用户名,再次提交到本地仓库,显示如下信息,则表示成功

link18

  • 使用命令git push origin main,将变更提交到远程Github仓库

link19

最后刷新一下Github的test仓库,会发现test.txt文件已成功被提交!

link20

安装Node.js

安装node

下载地址,可自行下载对应平台即可,安装时自行选择安装位置,本次选择安装在D盘,其他选项默认。

  • 安装完成后在windows命令行输入node -vnpm -v查看版本信息,检查安装是否正常

node1

设置npm环境变量

如果不设置的话,安装模块的时候就会把模块装到C盘,占用C盘的空间

  • 在上一步安装后的 nodejs 文件夹中新建两个空文件夹 node_cache、node_global

node2

  • 在windows命令行输入以下命令(记得换成自己nodejs路径)

npm config set prefix “D:\normalexe\nodejs\node_global”

npm config set cache “D:\normalexe\nodejs\node_cache”

node3

  • 打开控制面板,搜索"环境变量",点击编辑系统环境变量,新建下列系统变量

变量:NODE_PATH

值:D:\normalexe\nodejs\node_global\node_modules

node4

node5

  • 编辑Path,将npm路径改为 D:\normalexe\nodejs\node_global (注意填自己对应的路径)

node6

node7

最后都点击确定,退出该界面。

  • 测试是否成功,在windows命令行输命令npm install webpack -g。然后你会发现你失败了,并且出现了以下错误

node8

因为用户没有 nodejs 文件的修改权限,解决办法有两个

  1. 以管理员身份运行上一条命令(并非一劳永逸,以后非管理员使用 npm 命令还是会报错)
  2. 更改nodejs文件夹权限,右键属性–>安全–>编辑–>勾选允许 修改–>应用–>应用

再次运行上一条命令,成功!再看看webpack的安装位置,正确!一般情况下 npm 不是最新版本,大家可自行更新,更新的 npm 文件也会出现在设定位置。

node9

node10

创建个人Blog网站

本地Hexo站点

这是中文官方教程

本地hexo建站

建立一个空白文件夹 /myblog ,右键进入Git Bash

  • 安装Hexo:npm install -g hexo-cli

node11

  • 初始化:hexo init

node12

  • 部署生成:hexo g

node13

  • 本地查看:hexo s

node14

部署到Github上

部署到Github

打开上一步 /myblog 文件夹中生成的 _config.yml 文件

node16

  • 找到最后一段,将 deploy 那段改成如下形式

node17

我这里以Github上一个名为 viesuki.github.io 空白仓库为例,将本地hexo网站部署到Github Pages上

username.github.io 是一个特殊的仓库名称,网页部署成功后的域名也是这个。建议不太清楚Github Pages的同学,请直接用此仓库名称作为部署仓库,避免出问题。

node18

1
2
repo: https://github.com/viesuki/viesuki.github.io.git
branch: main
  • 安装Git部署插件:npm install hexo-deployer-git --save

node19

  • 部署:分别运行以下命令 hexo clhexo d

第一次会让你进行一次Github登录验证,自行验证就好

node20

  • 完成标志

node21

  • 在Github上发布

node22

按照上图选择后,点击 Save,等待Github部署,大概需要两三分钟,可以不时刷新界面看看是否出现下图

node23

  • 点击 Visit site 欢迎来到你的网站!!!

node24

现在你可以分享给别人你的网站了~

网站个性化

经过以上几个步骤,你已经初步掌握了如何将本地编写的网站代码通过Git工具发布到Github上,并进行部署。下面进行网站个性化设计和内容编写

  • Hexo提供了很多优质的主题,详情可阅Hexo主题,选择一个作为模板,查看对应官方指南进行设置

  • 本站采用了 Butterfly 主题,作者制作了详细的教程,本文不再赘述,跟着Butterfly官方指南一步步来就可以了

评论区部署