从零开始建立一个Blog网站
首先请自行注册Github账号,点这里
参考资料
- 从零开始搭建个人博客(超详细)—— 枫叶,该答主写得非常详细,跟着走完全程应该没什么问题,可能有些步骤由于版本更替和个人配置会稍有差异
- butterfly官方指北,安装好之后的一些关于该主题的配置,介绍比较全面,可以配合Hexo初阶入门教程萌新必备手摸手教学食用更佳
- 评论系统为Vercel上部署的Twikoo,可参阅Twikoo指南
- 经过以上步骤基本可以建好一个初步的博客网站了,进一步个性化配置主题,可以多搜索参考大佬们的
申请好github账号之后可以按照下面的步骤进行操作,出现问题可以将错误信息复制粘贴到搜索引擎进行搜索,一般都能找到解决方法
Git下载安装
Git下载安装
- git下载地址,根据自己的系统进行下载。我这里选择下载windows 64bit版本的installer。

- 安装目录选择

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















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


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回车后进行查看,出现下面提示,则证明已安装成功,可以直接使用

- 命令
ssh-keygen -t rsa,之后点4次回车,生成密钥
默认生成文件地址
windows:
/c/Users/你的用户名/.ssh/mac和linux:
~/.ssh

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

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

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

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

- 验证连接,输入
ssh -T [email protected]
第一次连接会进行一次确认,填yes即可

至此我们就完成了本地Git和Github的连接设定,下面我们将进行本地修改仓库文件,如何对Github仓库提交文件,同步更新
向Github提交文件
Git提交文件
本地没有仓库时,同步远程Github仓库到本地,修改变更再提交给Github,可按照一下步骤进行操作。若本地已有一个Git仓库,想提交到Github远程仓库时,只需进入该本地仓库,输入命令git remote add origin [email protected]:viesuki/test.git就能完成连接,之后的操作下同。
下面我新建一个Github仓库,一次为例进行演示
- 到github主页点击Respositories,点击New新建仓库
test

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


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

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

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

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

- Git Bush使用
cd命令进入本地test仓库,输入git status查看仓库状态
可以看到新增的文件需要被提交,是红色状态

- 使用命令
git add .将文件变更先添加到临时文件缓冲区
此时新文件已被提交到临时缓冲区,变为绿色状态

- 使用命令
git commit -m "提交信息",将更改提交到本地仓库
第一次提交会弹出以下提示

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

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

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

安装Node.js
安装node
设置npm环境变量
如果不设置的话,安装模块的时候就会把模块装到C盘,占用C盘的空间
- 在上一步安装后的 nodejs 文件夹中新建两个空文件夹 node_cache、node_global

- 在windows命令行输入以下命令(记得换成自己nodejs路径)
npm config set prefix “D:\normalexe\nodejs\node_global”
npm config set cache “D:\normalexe\nodejs\node_cache”

- 打开控制面板,搜索"环境变量",点击编辑系统环境变量,新建下列系统变量
变量:NODE_PATH
值:D:\normalexe\nodejs\node_global\node_modules


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


最后都点击确定,退出该界面。
- 测试是否成功,在windows命令行输命令
npm install webpack -g。然后你会发现你失败了,并且出现了以下错误

因为用户没有 nodejs 文件的修改权限,解决办法有两个
- 以管理员身份运行上一条命令(并非一劳永逸,以后非管理员使用 npm 命令还是会报错)
- 更改nodejs文件夹权限,右键属性–>安全–>编辑–>勾选允许 修改–>应用–>应用
再次运行上一条命令,成功!再看看webpack的安装位置,正确!一般情况下 npm 不是最新版本,大家可自行更新,更新的 npm 文件也会出现在设定位置。


创建个人Blog网站
本地Hexo站点
这是中文官方教程
本地hexo建站
建立一个空白文件夹 /myblog ,右键进入Git Bash
- 安装Hexo:
npm install -g hexo-cli

- 初始化:
hexo init

- 部署生成:
hexo g

- 本地查看:
hexo s

- 按住 Ctrl ,点击生成的链接 http://localhost:4000,浏览器就会打开你的网站
部署到Github上
部署到Github
打开上一步 /myblog 文件夹中生成的 _config.yml 文件

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

我这里以Github上一个名为 viesuki.github.io 空白仓库为例,将本地hexo网站部署到Github Pages上
username.github.io 是一个特殊的仓库名称,网页部署成功后的域名也是这个。建议不太清楚Github Pages的同学,请直接用此仓库名称作为部署仓库,避免出问题。

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

- 部署:分别运行以下命令
hexo cl、hexo d
第一次会让你进行一次Github登录验证,自行验证就好

- 完成标志

- 在Github上发布

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

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

现在你可以分享给别人你的网站了~
网站个性化
经过以上几个步骤,你已经初步掌握了如何将本地编写的网站代码通过Git工具发布到Github上,并进行部署。下面进行网站个性化设计和内容编写
-
Hexo提供了很多优质的主题,详情可阅Hexo主题,选择一个作为模板,查看对应官方指南进行设置
-
本站采用了 Butterfly 主题,作者制作了详细的教程,本文不再赘述,跟着Butterfly官方指南一步步来就可以了
