hexo&github个人博客搭建(小白教程)

前言

1.本文旨在教大家从0基础开始搭建自己的博客,博客相当于搭建在github上,所以不需要租用服务器或者域名,需要的也可以自己购买配置。
2.本文教程仅适用于Windows版本。
3.有遗漏或者错误的地方欢迎发邮箱给我指正,有不懂的可以问我,不过我也有可能不会,大家一起学习探讨。
4.打开文中的网页推荐使用谷歌浏览器,可以翻译网页。

部署到本地

下载Node

进入网址:https://nodejs.org/en/download/ 下载Node,选择自己电脑适配的版本。
此处我选择的是 Windows Installer(.msi) 64-bit。

在这里插入图片描述

(下载页面)

安装NODE
下载完成后打开安装包开始安装,一路next安装下去就可以了。
在这里插入图片描述

最后finish,就安装成功了。

下载git

网址:https://git-scm.com/download/win 复制粘贴到浏览器就会自动下载
在这里插入图片描述
下载完成后打开文件,开始安装。
在这里插入图片描述
同样是一直点击next安装。
在这里插入图片描述
点击finish 就安装完成哒。

最后我们检查一下 node 和 git 是否安装好了
wiondow+R 打开cmd
在这里插入图片描述
在cmd中依次输入以下命令,如果出现版本号就说明安装好了。

git --version
node --version

在这里插入图片描述
如图,说明已经安装好了。

安装hexo

安装前找一个你喜欢的目录(随意),我选的是E盘。在E盘内新建文件夹Text(名称自取 英文),然后右键点击此文件夹,点击“GIT Bash Here”
在这里插入图片描述

依次输入两个命令,下载hexo以及安装hexo对于git的部署工具。

npm install hexo-cli -g
npm install hexo-deployer-git --save

在这里插入图片描述

响应如图,没有报错的话,我们就可以继续下一步。
打开Text ,在里面新建一个文件夹 Hexo,右键 Hexo “GIT Bash Here”
输入以下命令:

hexo init

在这里插入图片描述

在这里插入图片描述

这个过程会很慢,耐心等待。
最后出现 INFO Start blogging with Hexo!就说明成功了,如果没有可以重新执行一遍。(我当初执行这一步的时候有很多报错,但是我第二天重新执行就顺利结束了,中间什么也没做)
命令成功执行之后打开 Hexo文件夹,里面有很多文件夹和文件。

本地查看博客

输入以下命令,有报错先检查上面的步骤是否正确,一定要按着步骤来。

hexo generate
hexo server

在这里插入图片描述

出现最后一行“INFO Hexo is running at http://localhost4000. Press ctrl-c to stop"。就说明可以本地博客搭建成功啦,在浏览器输入:http://localhost:4000 就可以在本地查看了。


大概就是这个样子了。但是这时候还只是在本地,只有自己的电脑才能查看,我们还要部署到github上,别人才能看到。

部署到github

创建存储库

这一步需要自己注册一个github的账号,参考教程网上很多,自行百度,用户名取得简单一点,因为可能会是你的网址的一部分。
在这里插入图片描述
点击右上角的+ 号”New repository“ 创建新的存储库。
在这里插入图片描述
如图,存储库的名字格式:你的用户名.github.io
比如说我的用户名是duoduomei,我的Repository name就要在后面填:duoduomei.github.io

配置SSH Key

在/Text/Hexo 右键”GIT Bash Here“ 输入

ssh-keygen -t rsa -C “你的邮箱”

一路回车就行了,最后会出现一个图表一样的东西(如图)。

在这里插入图片描述

在C盘的用户目录里找到 .ssh 文件夹,点开
右键用记事本或Notepad++ 打开id_rsa.pub文件(推荐Notepad++,记事本有时候会乱码)
ctrl+a全选,复制
在这里插入图片描述

回到github网站,点击右上角
在这里插入图片描述
点击setting
在这里插入图片描述
点击SSH and GPG keys
在这里插入图片描述
点击红圈这个 New SSH key

在这里插入图片描述

这里的title 可以随便取个名字,把刚刚复制的内容粘贴到 下面这个 Key 的框框里。

验证设置

输入命令

ssh -T git@github.com

在这里插入图片描述
输入 yes 后回车
在这里插入图片描述

最后会出现一句话:Hi your name.You’re successfully… 就说明设置OK了。

配置个人信息

输入命令

git config --global user.name “github用户名”
git config --global user.email “注册邮箱”

这两个命令忘了截图哈,没关系,只要没报错就OK。
然后回到你的github个人页面,点击右上角Your repositories
在这里插入图片描述
进入自己的存储库在这里插入图片描述

然后先点Clone or download
再点第②个红圈 一键复制

在这里插入图片描述

在 Test/ Hexo/ 目录下,右键用 Notepad++ 打开文件 _config.yml

在这里插入图片描述
找到最下面的代码
这里有三个地方需要改动,注意每个值前面都有一个空格,这里一定要好好检查!!不然后面会报错!!

type: git
repository: #这里填写我们刚才复制的https链接
branch: master

在这里插入图片描述
到这里我们就快大功告成了,还差最后一步就OK了!

在这里插入图片描述
在这里插入图片描述
这就说明已经OK啦!
这里有可能会出现报错,如果报错的话我们运行一下这个命令

npm install hexo-deployer-git --save

在这里插入图片描述
然后再重新运行以下命令:

hexo g -d

完成

这个时候别人就可以访问你的网站啦!
博客地址就是 http://用户名.github.io

博客的个人配置和美化网上有教程,可以自己去配,有空的时候再出一篇美化博客的教程。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值