利用Hexo&GitPages建立自己的博客

Hexo是一款基于Node.js的静态博客框架,依赖少易于安装使用,可以方便的生成静态网页托管在GitHub和Heroku上,是搭建博客的首选框架。

一般而言,建立自己的博客之后,我们会赋予它一个独特的域名。仅仅拥有xxx.github.io的域名,不足以满足大多数人的野心。

在这个不想学习的夜晚,我来整理一下我构建网站的过程,一来记录我的第一次前端(抄作业)项目,二来放松身心,三来给其他同学提供参考。

任务

  • 获得个人域名
  • GitHub创建个人仓库
  • 安装Node.js,Hexo,git
  • 推送网站
  • 绑定域名
  • 发布文章
  • 寻找图床

行动

获得个人域名

为了避免实名认证的费时费力,我选择了NameSilo网站,花了一美元获得了这个域名。事实上,.xyz域名相对价格很低,如果不是很在意的话,可以使用。

在选择域名时,有几个要点需要注意:

  • 填写Primary Address时要勾选Keep my information private,这样可以让保护隐私变为默认选项
  • 除了邮箱,其他的没有必要填真实信息。手机填成真实的也无所谓。
  • 购买域名时,注意选择WHOIS Privacy,让NameSilo替你成为注册人,防止真实信息暴露公网。
  • DNS解析时,可以填写五条解析规则。四条A type的规则指向GitPages的四个IPv4地址,参考GitPages 官方手册;另一条规则CNAME type指向你的GitHub库,具体问题之后详述。

GitHub创建个人仓库

这一步相当简单。只需要在GitHub创建一个用户名.github.io的Repo。

顺带一提,这样做还可以顺便发现一个Special Repository,自己尝试(:

安装Node.js, Hexo, git

安装是一件相当愉快的事情。
先安装Git,一路next即可。
再安装Node.js,也是一路快乐。
最后打开terminal,输入

node -v
npm -v

检查是否正确安装Node.js。之后输入

npm install -g hexo-cli

让它自动安装Hexo即可。

然后我们需要设置一下Git的ssh密钥,便于我们文章的发布。

打开安装好的Git Bash, 输入

git config --global user.name "你的GitHub用户名"
git config --global user.email "你的GitHub注册邮箱"

ssh-keygen -t rsa -C "你的GitHub注册邮箱"

一路回车键,找到自己电脑上的User\你的Windows用户名\.ssh\id_rsa和id_rsa.pub两个文件。把后一个文件里的全部内容复制,粘贴到GitHub个人页面右上角下拉框->Settings->SSH and GPG keys-> SSH Keys -> New SSH keys这个界面中,添加即可。

这里应该有图片的,我之后再传吧。

回到Git Bash,输入

 ssh git@github.com

多输几次,不报错了就好了。(玄学X

推送网站

随便打开一个你想要放置博客的目录,打开terminal,定位到此处,输入

hexo init

hexo就会在该目录下创建博客的基本内容。网络不好就挂代理,我反正下了几遍才下好。

继续输入

hexo new test
hexo generate
hexo server

打开浏览器进入网址localhost:4000,即可看到你的博客——最原始的样子。

这是本地预览,怎么放到网上呢?GitPages就是一个好的部署地点!

在设置之前,需要解释一个概念,在blog根目录里的_config.yml文件称为站点配置文件,进入根目录里的themes文件夹,里面也有个_config.yml文件,这个称为主题配置文件

打开前一个站点配置文件,找到deploy这个单词,填充如下内容:

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

注意repo使用git@才能ssh登录,改成https的话,每次deploy都需要输入密码。
再注意branch 要使用main,因为GitHub整顿后,将新Repo的默认分支从master 改成了main

回到项目根目录,打开terminal,输入

npm install hexo-deployer-git --save

hexo clean
hexo g
hexo d

网络足够好的情况下,可以在网址GitHub用户名.github.io上看到你的博客了。

绑定域名

打开你的GitHub,在博客Repo的Settings里面,找到左侧Pages,点进去,右边找到Custom domain,填入你先前注册的域名,再勾选下面的Enforce HTTPS,就搞定了。

这时候可以回到第一步,把 GitHub用户名.github.io填入先前DNS解析的步骤。Host name填入www, 这样也可以解析www.开头的你的域名。

我觉得需要图片,到时候再说。

假说你博客的根目录是/,现进入/source目录,理论上应该有一个_posts文件夹。在它的旁边创建名为CNAME的文件,输入不带www的你的域名。

这时候打开浏览器在地址栏输入你的个性化域名将会直接进入你自己搭建的网站。如果没有,就deploy几次(莽撞

不需要改动_config.yml里面的内容。

发布文章

在terminal里使用

hexo new 文章名

即可创建一篇文章,位于/source/_posts/目录下的一个.md文件。

用markdown语法写文章即可。

发布?
在terminal里使用

hexo clean
hexo generate
hexo deploy

即可发布到你的GitHub Repo上,从而在你的域名上可见。

建议是先用hexo server在本地预览,给GitHub送去一点善意。

如果发现发布后主页没有变化,可以尝试重新hexo clean再deploy一次。熟悉这样的节奏就好。

寻找图床

图床自己找。我用的是路过图床,虽然有广告,但是它免费(:

总结

虽然本文较为简略,且全程没有图片配备。但是通过参考资料的补充,读者依然可以得到相应的知识来建立自己的博客。

参考资料

吴润-知乎

wangwlj’s Blog

Hexo 官方文档

Fluid 配置文档


本博客所有文章除特别声明外,均采用 CC BY-SA 4.0 协议 ,转载请注明出处!