搭建Hexo博客+部署到Github

前言

本文章灵感来源于B站up主codesheep,以及视频评论区里的课代表的博客。为了学习总结经验,经过一定修改和总结后写下了这篇文章,感谢他们的指导。


以下操作均在windows10 64位 系统下演示

一、准备工作(安装Node.js 和 Git)


1、安装Node.js

进入 Node.js 官网

https://node.js.org/

点击下载左边的较稳定版本。下载完之后安装,一直下一步即可。在这里插入图片描述

2. 安装 Git

进入 Git 官网

https://git-scm.com/downloads

在这里插入图片描述
在这里插入图片描述
也是一样下载完后安装,一直下一步就行了。

二、安装Hexo


首先,创建一个文件夹(这个文件夹将是你的Hexo博客的一些相关文件放置的地方)
然后,打开进入文件夹,点击右键选择 Git Bash here 相当于从这里进入终端窗口

分别输入

node -v
npm -v

查看 node和npm的版本,检测node是否安装成功。

在这里插入图片描述
接下来,我们要安装cnpm

在终端窗口输入

npm install -g cnpm --registry=https://registry.npm.taobao.org

等待片刻,安装完后输入 cnpm 进行测试。

然后安装Hexo

cnpm install -g hexo-cli

输入 hexo -v 检验
在这里插入图片描述
最后输入

hexo init

表示把整个项目建立在当前文件夹中

打开我们刚刚新建立的文件夹,里面含有以下文件即表示博客搭建成功。
在这里插入图片描述

三、运行测试Hexo


1、常用命令

	#三连:
	 hexo clean          
	 hexo g             
	 hexo s
hexo clean 	#清理缓存文件
hexo g     	#生成文件
hexo s     	#运行本地服务器
hexo d     	#推送到服务器

创建文章命令:

hexo n "我的博客文章"

然后就会在文件夹/source/_posts里生成一个对应的md文件,用文本编辑器打开他就可以写文章了,注意最好用Markdown格式书写。

写完之后在终端窗口输入一波三连即可。

2、运行博客

hexo s

打开浏览器,输入:localohost:4000

在这里插入图片描述

上图是我个人自己设置过主题后的效果

你们刚搭建完的Hexo博客可能不长这样,那是Hexo默认给你设置的主题。

四、将Hexo博客部署到Github上


可能大家觉得每次想打开博客都要先打开终端然后输入hexo s有点麻烦
那么,部署到Github上后将会舒服很多

具体的如何创建一个Github账号在这里就不讲了

当然,如果你嫌Github运行慢的话,也可以部署到国内的Coding上(具体你们也可以看这位课代表的博客)Hexo学习(二),在这里就不演示了

1、创建Github仓库

先打开Github官网,登录上我们的账号,然后创建一个仓库,这个仓库将是你在终端把文件推送到Github上储存文件的地方。

注意:这里的仓库名一定要是 你的Github帐户名.github.io
这也是你以后打开博客的网址
在这里插入图片描述

2、推送到服务器

首先,我们回到我们之前创建的那个放置博客的文件夹,再次进入终端。
然后输入 cnpm install --save hexo-deployer-git 等待安装。

然后我们回到那个文件夹,用记事本或者其他文本编辑器打开 _config.yml 文件。
拉到下面会看见 deploy:

接下来我们输入以下信息并保存:在这里插入图片描述
最后我们返回终端窗口
输入以下代码:

git config --global user.name "你的Github用户名"
git config --global user.email "你注册Github时用的邮箱 xxx@xxx"

最后我们输入:

hexo d

然后会跳出登陆Github账号密码的窗口,输入完之后等待片刻。

这样就大功告成啦!!!!
打开浏览器输入你的Github仓库名(xxx.github.io)就能打开博客了!!!


这是我第一次写博客,有点不顺手,没经验,有什么不合理的地方请大家多多包涵。

往后我会不定期写一些总结学习知识点的文章与大家一起学习,至于Hexo主题的优化方面,我自己也在斟酌,往后可能也会写一下经验。

谢谢观看

发布了4 篇原创文章 · 获赞 8 · 访问量 728
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 数字20 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览