hexo + github 搭建博客详细教程

网上有太多hexo + github的教程了,但是我跟着人家的教程,漏洞百出,一堆bug。所以我决定自己搞了。
这篇文章默认你已经具备:

如果不会的话建议点开后边的链接学习,后边的链接写的都想当详细╰(●’◡’●)╮。

1 创建博客

1.1 安装hexo

全局安装hexo-cli
npm install hexo-cli -g
在这里插入图片描述
安装完成就能看到绿框里的东西了。
治愈那两个警告不用管它,因为fsevent是mac osx的,在Windows或者Linux下会有警告,忽略即可。

1.2 创建好博客文件夹

1.创建
有两种方法:

  1. 进入你要建博客的文件夹
    1. 打开命令行工具。
      • 可以使用gitbash,直接在文件夹里右键→git bash here
      • 也可以使用cmd,在文件夹地址栏输入cmd回车
    2. hexo init 文件夹名字你创建并初始化一个存放博客代码的文件夹
      cd 文件夹名字 进入这个文件夹
  2. 进入你要进博客的文件夹
    1. 创建一个放博客代码的文件夹,然后进入文件夹
    2. 打开命令行工具
    3. hexo init初始化

创建完后我回到E盘看一下,已经有hexoblog这个文件夹了。

2.安装依赖
进行这一步的时候要确定你已经进入你创建的文件夹里了。
比如刚才hexo init hexoblog,cd hexoblog ,现在我的命令行显示的地址应该是我在E:\hexoblog里边。
在这里插入图片描述
继续安装一些依赖,不知道依赖是什么没关系,反正装上就好。
npm install

2 新建文章

2.1新建文章
现在先不用管什么花里胡哨换皮肤啊之类的,现在的首要目的是让你能看到你的博客,让你能把它推到github上并且访问到。
hexo new "文章名"
在这里插入图片描述
成功之后会告诉你已经在_post文件夹下创建好了。打开看一下,里边的helloworld是默认就有的,你可以先不用管,不想看可以直接删了。

在这里插入图片描述
打开你新建的文件给它写几句内容。你不想写可以先不写。
在这里插入图片描述
2.2 生成静态页面
hexo generate
你知道你刚才写的文章在文本文件里,这一步就是把你的文本文件解析为网页。
2.3 本地预览
如果你不想在本地看一下是什么效果,可以跳过这一步。
hexo clean
hexo server
在这里插入图片描述
注意不要关闭命令工具,不要按Ctrl + C,在浏览器输入提示你的地址你就可以看到页面了,看完之后不需要了,你可以回到命令工具,按Ctrl + C停止后台服务。

3 部署到github

3.1 下载hexo-deployer-git

使用github的也知道,本地上传文件给远程仓库是需要添加remote,然后自己add commit push等等。但是使用hexo就不用管这些了。hexo可以帮你完成这些繁琐的工作。
首先你要下载一个帮你完成工作的工具:
npm install hexo-deployer-git --save

3.2 github仓库。

确定你的github已经配置好SSH秘钥了。
在github新建一个仓库,取名用户名.github.io,其实你可以不叫这个,随便取一个的。
区别在于,如果你使用用户名.github.io,那你的页面访问的时候就是https://用户名.github.io,你要是随便取一个,那就是https://用户名.github.io/仓库名/
建好仓库之后进去,复制SSH链接,记住是SSH链接不是https链接,否则部署时候会失败。
在这里插入图片描述

3.3 修改_config.yml

回到你的博客文件夹,找到_config.yml文件,对其进行修改。用记事本打开,拉到最底下

deploy:
  type: git
  repo: 你刚才复制的
  branch: master

如果你只推送道github,你就按我给的代码写。如果你想同时部署到多个仓库,那你就按我下图里的写冒号是英文的,冒号后边有一个空格。注意格式否则会部署失败。
在这里插入图片描述

3.4 部署

hexo clean
hexo deploy
如果你部署失败了……那应该是你的node版本太新了……卸载从头再来。
部署完成之后你的github仓库里就有东西啦。
在这里插入图片描述
点右上角的setting,进去之后下拉找到git pages,那个链接就是你的博客链接啦。
在这里插入图片描述

4.更换主题

主题下载官网:https://hexo.io/themes/
一般好的主题作者都会把用法写的很详细,照着做就行了。
如果你更换了,主题。建议你
hexo clean+ hexo deploy
先清除缓存再部署。


╭(●`∀´●)╯鸽了,以后再写!

  • 5
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 14
    评论
评论 14
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Ann's Blog

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值