子哥工作室

文章 分类 评论
27 1 6

站点介绍

这里是子哥的博客,会不定时的发一些VPS冷知识、建站技巧以及各种白嫖小妙招哦~

Github Pages+Hexo搭建静态博客并自定义域名

子哥科技 2022-07-16 84 0条评论 默认分类

首页 / 正文
请浏览本站的朋友们遵守当地的法律法规!

发布于2022-07-19

本文讲述的Hexo博客搭建主要是配合GitHub来进行部署,不需要购买任何服务器。
搭建大致分为三个流程:准备工作、安装Hexo以及部署在GitHub,下面介绍详细流程。

(PS:本博客就是使用Hexo+GitHub的方法搭建的)

一:准备工作

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 即可看到刚刚生成的网页
 title=
以下为配置完成后的样子,可能和你生成的页面不同,如果想配置和我一样的hexo可以继续阅读我的其他post。

三、配置到Github Pages

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

  • 首先,打开博客目录下的 _config.yml 文件
     title=
  • 使用 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的值(也就是上文你注册过的仓库的名字),
     title=
  • 最后一步,在你本地 /source 文件夹下添加一个名为CNAME的文件(注意,此文件没有后缀),在文件中里面写上你的域名即可。
    CNAME文件填写
  • 再次执行deploy
 hexo g 
 hexo d
  • 稍等几分钟,你就可以用自己的域名访问你的网站啦!
    我的博客

最后的最后

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

评论(0)

最新评论

  • Anna

    Hi I am Anna, We collaborate with startups, SMBs, and new domain owners to provide Website design - re-design and development services at modest rate. We have a dedicated team of 45 professional designers and developers with over 8 plus years of experience and we thrive on the idea that design makes a difference. Our services at a glance: - Website Designing/Re-Designing #E-commerce development (Magento, Shopify, Woo Commerce etc.) #Graphic Designing #WordPress Theme Design & Customization #Custom themes, Plugins & Widget Development #Custom Templates, Modules, Plugins Design & Development Please share your REQUIREMENT with your phone number (With Country Code) /Skype and suitable time (Meeting) to talk to you, So we can discuss and understand in detail. I’m waiting for your reply. Kinds Regards, Anna (Web Solution Manager)

  • 子哥科技

    不错啊,以后就可以存直播回放卖课啦[[呲牙]]

  • 苏陌染

    个人感觉,三丰云服务器就是属于那种中低端的吧

  • 不发财我就火烧豹王

    j=看起来还不错[[呲牙]]

  • 子哥科技

    额,workers.dev被墙了

  • 老狼

    请问无法使用怎么办呢?

日历

2022年10月

      1
2345678
9101112131415
16171819202122
23242526272829
3031     

友情链接

文章目录

站点公告
请浏览本站的朋友们遵守当地的法律法规!
点击小铃铛关闭