利用github page和hexo搭建个人博客

需要的环境

  1. git

  2. node

    请提前下载

Github

github邮箱创建

这里就不加多言了,没什么好说的。

创建github Pages

创建仓库

点击右上角的加号,点击New Repository,在Repository的name里面填入,username.github.io,username就是你的github的用户名,注意不是邮箱名,是你的用户名,这个以github.io结尾的地址就是你之后的域名。

设置SSH

SSH的目的就是更加安全的免密登录。

生成ssh秘钥
ssh-keygen -t rsa -C "你的邮箱"

然后就是一路Enter,这时打开你的C盘,在用户/你的用户名文件夹下,有个.ssh文件夹,注意前面带.的文件夹都需要把文件的隐藏给先打开。

然后有个.hub后缀的文件,这是公钥可以给别人看的,还有一个没有后缀的文件,这个是私钥,不能给比人看。

我们要用的就是这个.hub文件,选择用记事本打开,全选,复制。

配置GitHub

打开你的github,现在点击你的头像,然后点击Settings,在access中找到SSH And GPG keys,点击New SSH key,title随便命个名字,Key这一栏,粘贴之前复制的.hub文件里面的内容,最后点击Add SSH key

打开GitHub Pages

这一部分我也忘了,不过挺简单的,我之所以忘记就是因为这一部分不难,没卡到我,直接看github的官方文档就行:Pages文档

这时候点击上方的Visit Site,你就可以看看是否成功了,可以点进去没有404就说明成功了。

Hexo

安装Hexo

找一个空的文件夹来存放Hexo的程序文件,打开文件夹,右键,选择Git Bash here(前提是你得先安装过git,并对git进行配置),使用npm一键安装Hexo程序

npm install -g hexo-cli

因为网络问题,会很慢,如果能够科学上网,那会快非常多。

安装完成后,初始化hexo

hexo init      # 初始化
npm install    # 安装组件

完成后依然在git控制台中输入以下指令:

hexo g   # 生成页面
hexo s   # 启动预览

访问 http://localhost:4000,出现 Hexo 默认页面,本地博客安装成功!

如果页面加载不出来,可能是端口被占用了,Ctrl+C关闭服务器,输入:

hexo server -p port # port是你电脑中空闲的端口号 

Hexo文件夹的目录如下:

_config.yml  # 网站的配置信息
package.json # 应用程序的信息
scaffolds    # 模板文件夹
source       # 存放用户资源,Md文件
	_posts   # 放md文件的地方,算是最常打开的文件夹了
themes    	 # 主题文件夹
public     	 # 网站文件

部署Hexo到GitHub Pages上

刚刚的是部署到了本地,如果要让别人也能看到,就要部署到服务器上,Github Pages免费可用,所以我们部署到这上面。

安装hexo-deployer-git

npm install hexo-deployer-git --save

然后修改 _config.yml 文件末尾的 Deployment 部分,修改成如下:

deploy:
  type: git
  repository: git@github.com:用户名/用户名.github.io.git
  branch: main

然后git控制台,输入:

hexo d # d就是指deploy,部署

完成!

这时访问我们的 GitHub 域名 https://用户名.github.io 就可以看到 Hexo 网站了。

绑定域名

可能用用户名.github.io来登录不是很好看,所以可以买个域名,用域名来登录,显得更专业一些,这里面不少的坑,花费了不少时间才一个又一个解决了问题。

购买域名

首先要购买域名, 作为一名穷学生, 当然是要买最便宜的域名, 在网上发现有个网站卖的域名还挺便宜的, namesilo,先注册账号,之后找到个合适的域名, 进行购买, 之所以选择这个网站还是因为这个网站购买服务器可以用支付宝支付, 非常方便.

一刀就能拿下一个域名.

买完后, 点击右上角的用户图标, 点击My Account, 进入后点击Domain Manager, 这可能需要你先填写一下身份信息, 这些信息我都是随便填的, 好像是没太大的影响, 之后在你购买的域名左边, 点击那个蓝色小球Manage DNS for this domain, 删除里面的所有默认.

进入下一步.

与Git联系

进入你的github, 点击右上角用户图标, 选择settings, 进入后点击Pages, Add a domain, 之后填写你购买的域名, 切记, 不要加入www, 然后就一路next就行, 会生成两个txt信息, 复制一下, 一会得用.

进入namesilo, 回到Manage DNS for this domain界面, 选择添加txt, 把git中生成的第一行粘到第一个格子里, 第二行粘到第二个格子里. OK!

然后win+R, 输入cmd进入控制台, ping一下你的github pages, 复制一下ipv4地址, 继续在刚才的界面, 选择添加A, 第一个格子不用填, 第二个格子填入ip地址.

之后添加CNAME, 第一个格子www, 第二个格子添加你的github pages网址.

对了, 以上三条的ttl都是3600, 也就是十分钟.

然后返回github, 回到pages, 点击verify, 等待验证, 这可能需要一些时间, 你或许要等个一小时? 我是等了半小时大约, 才行.

然后到你的.io仓库中, settings->pages, 往下翻, 到Custom domain, 输入你的域名, 不加www, 点击sava, 等待验证, 可能又是需要一些时间, 我在这里卡了非常多的时间, 因为我最开始没有去验证我的域名, 就是我先进行的这一步, 没有进行上面的过程, 所以一直失败. 需要一步一步来, 才能最后成功.

等验证成功后, 选择enforce https, 不然你是用的是http协议, 会显示不安全, 挺难受的. 我是一个强迫症

OK, 大功告成! 现在你可以用你的域名来登陆了.

Hexo 常用指令

Hexo clean # 清除缓存,方便后续部署

Hexo new "文件名字" # 创建一个新的文件 直接生成一个md文件加入_post好像不太行
Hexo s      # 预览效果
Hexo g     	# 生成
Hexo d 	    # 部署

主题

我们可以对hexo进行优化, 用其他人的主题来美化自己的网站, 让其更加好看.

这里就不加赘述了,大家可以在网上找一些自己喜欢的主题,详见 hexo主题

笔者的话

好像没什么说的了。话休絮烦。

  • 24
    点赞
  • 27
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值