Github Pages+Hexo 搭建静态博客

Posted on 2022-07-10-0,4 min read

一:准备工作

1、下载Node.js,并进行安装(详见注意事项)

1.双击打开安装包
2.疯狂点击下一步进行安装

2、下载Git,并进行安装

依旧按照上述步骤进行安装

二、启用Github Pages

申请github账号

这里xxx填写你的github账户名称。如图:
 _config.yml 文件
 _config.yml 文件

创建一个新的仓库

命名为【你的用户名】.github.io
示例
示例

三、安装Hexo

  • 打开Node.js下的command prompt面板,分别输入以下命令(检测软件配置是否安装成功)

输出了版本号,那么证明配置成功
如果没有版本号,请重新安装node.js,检查是否勾选Add to Path,或者手动为node.js添加环境变量

node -v
npm -v
  • 安装hexo和hexo服务器模块
npm install hexo-cli -g
npm install hexo-server --save
  • 生成博客文件夹

直接在自己心仪的路径上右键生成文件夹,名称随意
例如: D:\hexo

  • 切换command prompt的目录到新建的hexo文件路径,命令如下
    cd D:\hexo

  • 执行hexo init命令,进行博客初始化

  • 测试hexo是否安装成功:

hexo new test
hexo clean
hexo s
hexo g
hexo d

其中hexo new test表示新建一篇名为test的博文,hexo g表示生成,是hexo generate的简写,hexo s在本地运行hexo服务器,是hexo server的简写。
成功后会有如下提示,进入 http://localhost:4000 即可看到刚刚生成的网页
Hexo 示例
以下为配置完成后的样子,可能和你生成的页面不同,如果想配置和我一样的hexo可以继续阅读我的其他post。

三、配置到Github Pages

之前的操作只是在本地实现了我们的博客,如何推送到github pages呢?

  • 首先,打开博客目录下的 _config.yml 文件
     _config.yml 文件

  • 使用 ctrl+f 搜索deploy,并添加以下代码。注意!把xxx改为之前在github配置的名字即可。

deploy:
- type: git
 repo: https://github.com/xxx/xxx.github.io.git
 branch: master
  • 接下来,安装hexo-deployer-git插件
    npm install hexo-deployer-git --save

  • 最后就可以推送我们的网页到github啦!

 hexo g 
 hexo d

四、完善

访问网页

如果之前的步骤都是正确的话,那么恭喜你!你已经可以访问你的网页了!

比如我的网页: zigetech.github.io

把zigetech改成你的github用户名即可

绑定你自己的域名(可选)

  • 如果你已经拥有你自己的域名的话那是最好,如果你想购买一个域名,可以去腾讯云,购买。
    如果你不想花钱还想(白嫖)用自定义域名的的话,可以参考我的另一篇博文进行申请。

由于我的域名使用的是Cloudflare,接下来我会演示如何绑定你的github pages到Cloudflare,其他域名商操作应该也是雷同的。

  • 登录你的Cloudflare后台,点击DNS.添加一条CNAME记录,如图:
    DNS解析

  • 其中CNAME的值就填写你的github page的值(也就是上文你注册过的仓库的名字),
    ![DNS解析](https://pic2.zhimg.com/80/v2-214e0d6b077b908c1dd9adc044996505_720w.jpg “DNS解析”)

  • 最后一步,在你本地 /source 文件夹下添加一个名为CNAME的文件(注意,此文件没有后缀),在文件中里面写上你的域名即可。
    CNAME文件填写

  • 再次执行deploy

 hexo g 
 hexo d
  • 稍等几分钟,你就可以用自己的域名访问你的网站啦!
    我的博客

最后的最后

本文介绍了基本的hexo + github page的部署及实现,如果有任何问题,欢迎留言!


下一篇: 这里是子哥の小破站→

loading...