最新hexo+github搭建个人博客详细教程

最新推荐文章于 2024-06-11 02:45:00 发布

Tor小黑

最新推荐文章于 2024-06-11 02:45:00 发布

阅读量551

点赞数 1

分类专栏： GitHub hexo 文章标签： github git

本文链接：https://blog.csdn.net/qq_44730315/article/details/105890653

版权

GitHub 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

hexo

1 篇文章 0 订阅

订阅专栏

最新hexo+github搭建个人博客详细教程

这是作者自己利用hexo+github搭建博客的完整过程，对自己搭建过程中踩过的坑做一个简单记录。
本人博客最终展示效果：https://huanyaya.github.io/

一，准备工作

本人所使用的环境： windows10 、 git-2.17.0 、node.js-12.16.3

1. 注册Github账号及新建仓库

GitHub官网：https://github.com/
登录账号后，然后点击GitHub右上角的New repository 来创建一个新仓库。格式为：your_username.github.io，比如说，如果你的github用户名是huanyaya，那么你就新建名为huanyaya.github.io的仓库（必须是你的用户名，其它名称无效），将来你的博客访问地址就是 http://huanyaya.github.io
1====

注：每一个github账户最多只能创建一个这样可以直接使用域名访问的仓库。

2. 安装Git及配置

Git的安装：

下载地址：https://gitforwindows.org/
下载之后，双击安装，直接next默认安装就可以了。
2====

安装完Git后，在命令行输入git --version，如果出现版本号就说明安装成功了。

配置Git参数：

我们首先要需要配置本地Git的参数，任意位置鼠标右击，然后选择Git Bash，打开Bash窗口，然后我们来设置Git的用户名和邮箱：
3=====
输入以下命令：

git config --global user.name "huanyaya"// 引号里填写你的github用户名，非昵称
git config --global user.email "xxx@qq.com"// 引号里填写填写你的github注册邮箱

添加SSH Key：

为了把本地的仓库中的内容传输到GitHub上，需要配置ssh key，无论是上传自己的博客还是上传其他的仓库都需要连接Github，ssh key是一个token，作用是身份验证。
在Bash窗口输入以下命令：

cd ~/.ssh/    【如果没有对应的文件夹，则执行  mkdir  ./.ssh】
ssh-keygen -t rsa -C "你的github注册邮箱"

回车（中间可能会遇到输入yes就可以了），最终会在用户目录下生成一个文件，打开用户目录，找到.ssh\id_rsa.pub文件，记事本打开并复制里面的内容：
4====

然后打开你的github主页，进入个人设置 -> SSH and GPG keys -> New SSH key：
5====

将刚才复制的内容粘贴进去，title随便填
SSH key添加之后，就可以在本机git bash中进行测试，输入ssh -T git@github.com（直接复制就可以了，邮箱地址不用改）进行测试，返回Hi username ！You’ve successfully …说明你已经成功啦！

3. 安装node.js

node.js下载地址：https://nodejs.org/en/
下载之后，双击安装，直接默认安装就可以了。

二，本地博客的配置

1. 安装hexo

首先要注意，此后的所有操作应该是在git bash中进行的，上文中也有一些是在git bash中执行。
在电脑的随意磁盘下新建文件夹，点击鼠标右键，再点击git bash，然后输入：

npm install -g hexo

这是hexo的安装文件夹。大家可以输入：hexo -v ，如果出现版本号就是安装成功。
注：如果hexo配置出错，可通过命令提示符输入以下命令卸载重装：

npm uninstall hexo-cli -g
npm uninstall hexo -g

2. hexo的初始化

在电脑新建一个名为blog的文件夹（名字可以随便取），由于这个文件夹将来就作为你存放代码的地方，所以最好不要随便放。
然后进入文件夹，打开Bash窗口，输入：

hexo init

hexo会自动下载一些文件到这个目录，包括node_modules，目录结构如下图：
6==========

注意：
如果在初始化过程中非常慢，甚至卡住。看以下解决办法：
只需要在windos下利用cmd,ping github.com。只要收到github站点的反馈，重启git bash，再进行hexo init就可以顺利进行。
如果你的丢包100%可以尝试以下解决办法：
http://www.jianshu.com/p/6a7df3a75673
初始化结束以后，我们输入：

hexo g # 生成
hexo s # 启动服务

hexo s是开启本地预览服务，打开浏览器访问 http://localhost:4000 即可看到内容，很多人会碰到浏览器一直在转圈但是就是加载不出来的问题，一般情况下是因为4000端口被占用的缘故，解决方法：
我们切换一个新的空闲的端口，输入命令：

hexo server -p 8888

8888这个端口号可以根据个人情况切换

如果没有报错，那么打开浏览器，输入：http://localhost:4000 会出现如下界面，说明我们的本地hexo服务端基本配置已经完成了。如要停止项目，可根据提示按ctrl+c停止服务。
7=====

注意：访问本地页面的时候hexo server 不可以按ctrl+c停止服务，否则会报404

三，部署到github上

1、修改配置文件，建立与Github连接

在项目根目录下找到_congif.yml文件，找到 deploy 字段并填写完整：
8====

10 ====

查找repository地址方式如下：
9=====

2、安装推送工具

接下来，我们需要额外的一个工具来帮助我们把项目推到仓库里，那就是 hexo-deployer-git搞它！通过以下命令安装：

npm install hexo-deployer-git --save

基本的流程到这里快要结束了

3、项目推送到GitHub仓库

最后执行:

hexo clean
hexo g
hexo d

你就可以通过浏览器访问你的仓库名作为域名，本例即 https://huanyaya.github.io/ 看到你的博客了，手机也可以哟！

注：同时，后期每更新一篇博文也需要通过以上三条命令重新部署到GitHub上哦！

万事俱备，只欠东南风！阳光明媚，一杯温暖的咖啡，一束倾斜的阳光，惬意地抿一口咖啡，就可以开始你的博客之旅啦！

四、常见hexo命令

hexo new post +文章名字 #新建文章
hexo generate #生成静态页面至public目录
hexo server #开启预览访问端口（默认端口4000，'ctrl + c'关闭server）
hexo deploy #部署到GitHub
hexo help  # 查看帮助
hexo version  #查看Hexo的版本
缩写：
hexo n == hexo new
hexo g == hexo generate
hexo s == hexo server
hexo d == hexo deploy
组合命令：
hexo s -g #生成并本地预览
hexo d -g #生成并部署到GitHub

搭建到现在预览效果可以看到，hexo原始主题界面很简单，关注下篇文章进行hexo的主题修改，个性化设置。
传送门：