Hexo+GitHub Pages一条龙

使用Hexo搭建框架

Hexo是一个快速、简洁且高效的博客框架。Hexo使用Markdown(或其他标记语言)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。

在学习使用Hexo搭建博客之前,可以先去Hexo的官方文档上看看,里面有较为详尽的搭建过程。

一、准备环境#

安装Hexo之前需要安装Node.jsGit这两个应用程序。

通过查看版本号的方式来判断相关的应用程序是否安装成功。

查看node.js版本
node -v

查看npm版本
npm -v

使用淘宝镜像源(http://registry.npm.taobao.org%EF%BC%89%EF%BC%8C%E5%85%A8%E5%B1%80%E5%AE%89%E8%A3%85cnpm%E5%8C%85%E5%88%B0%E7%B3%BB%E7%BB%9F%E4%B8%AD%EF%BC%8C%E5%90%8E%E7%BB%AD%E5%8F%AF%E4%BB%A5%E9%80%9A%E8%BF%87cnpm%E6%9D%A5%E5%8A%A0%E9%80%9Fnpm%E5%8C%85%E7%9A%84%E5%AE%89%E8%A3%85%E8%BF%87%E7%A8%8B%E3%80%82
npm install -g cnpm --registry=http://registry.npm.taobao.org

查看cnpm版本
cnpm -v

查看git版本
git -v

二、安装并使用Hexo#

新建一个文件夹用于存放你的博客文件,右击该文件夹点击“Git Bush Here”。

安装Hexo
cnpm install -g hexo-cli

查看hexo版本
hexo -v

生成博客并初始化博客
hexo init

启动本地博客服务
hexo s

按照回显提示在浏览器中打开
http://localhost:4000/
即可在本地访问博客。

Ctrl+C停止服务,至此,你的博客已经在本地搭建完成了!

使用GitHub远端部署

在GitHub建立个人仓库
Repository name一栏中
填写仓库名YourGithubName.github.io(YourGithubName为你的GitHub名称)
点击Create repository创建个人仓库

一、安装部署插件#

在blog目录下打开Git Bush(右击文件夹)进行安装
cnpm install --save hexo-deployer-git

二、配置git身份#

全局配置git身份
git config --global user.name "username"
git config --global user.email "email"

(将username和eamil换成的你的GitHub名称和邮箱)

三、配置本地ssh#

在此使用ssh部署的方法,而不是https部署,避免了每次远端部署都需要输入账号密码的麻烦。

3.1. 配置_config.yml#

配置_config.yml文件中# Deployment项

type: 'git'
repo: git@github.com:YourGithubName/YourGithubName.github.io.git
branch: master

(YourGithubName为你的GitHub名称)

3.2. 生成密钥#

ssh-keygen -t rsa -C "GitHub邮箱"
一路回车,密钥将在C:\Users\用户名\ .ssh 下生成.

四、配置远端ssh#

4.1. 配置密钥#

以下二选一即可。

4.1.1. 全局#

登陆 GitHub ,进入 Settings 页面,选择左边栏的 SSH and GPG keys,点击 New SSH key,添加公钥

Tiltle: 随便
Key: 公钥(id_rsa.pub中的内容)

点击 Add SSH key 完成添加。

4.1.2. 仅博客#

登陆 GitHub ,进入博客仓库的 Settings 页面,选择左边栏的 Deploy keys,点击 Add depoly key,添加公钥,公钥内容如上,要勾选 Allow write access,点击 Add key 完成添加。

4.2. 验证连接#

ssh -T git@github.com
窗口显示 “Are you sure……”
一路回车(Yes).
显示 “Hi xxx! You’ve successfully authenticated……” 即连接成功.

五、hexo三连#

每次部署都需进行hexo三连。
hexo cl && hexo g &&hexo d

还可以编写 windows 脚本减免命令操作,后文远程部署的脚本编写触类旁通即可。

@echo off
cd C:\Blog
hexo cl&&hexo g&&hexo s

六、远程访问博客#

访问 https://YourGithubName.github.io
(YourGithubName为你的GitHub名称)
远端部署完成!

编写文章

博文存放于博客根目录下 source\_posts 文件夹里面。

写博文使用的语言是Markdown语言。

在此推荐的编辑器是Typora

2021年11月,Typora 成为收费软件,法海之路 论坛的大佬对此进行了补丁修复,由于一些原因,法海之路 论坛原文内容已经下架,下面两个链接是镜像站的内容。
Typora - 法海之路 (joytion.cn)
Typora - 法海之路 (mhtsec.com)

更换主题

Themes | Hexo
Hexo 官方的主题库。

更换主题以及配置主题的方法在主题的相关说明文档中会有说明,在此不再进行赘述。

配置域名

一、购买域名#

前往腾讯云注册域名

二、解析域名#

2.1. 添加解析记录#

登入域名控制台选择对应域名点击解析.

点击添加记录添加两条记录.

记录一

主机记录 @
记录类型 CNAME
线路类型 默认
记录值 username.github.io(可访问自己博客的地址)
TTL(秒) 600

记录二

主机记录 www
记录类型 A
线路类型 默认
记录值 xxx.xxx.xxx.xxx(填写自己博客公网ip)
TTL(秒) 600

三、配置域名#

3.1. 仓库配置#

进入对应的github仓库,点击settings,在Custom domain一栏内填写已解析的域名,点击save保存.
勾选强制https(Enforce HTTPS).

3.2. 本地配置#

在博客项目根目录下source文件夹内用记事本打开CNAME(无后缀)文件,填写解析好的域名即可.

还有一些步骤需要跟随腾讯云的指引完成.

配置CDN

在此使用Netlify进行CDN的配置。

一、部署仓库#

进入官网,注册并关联GitHub账号,进入后台管理页面
依次点击Sites-New site from Git-GitHub-Authorize Netlify by Netlify
选择好对应的仓库后进行授权
配置好相关信息后点击Deploy site完成部署
部署完成后,Netlify会自动生成一个随机的二级域名
你可以通过这个域名访问你的博客,也可以在Site Settings进行修改

二、配置域名#

在Netlify控制台进入对应的项目
点击Set up a custom domain添加域名www.xxxxx.xxx
添加好后点击Verify完成验证

在自己购买的域名后台设置域名解析,可以删除之前的解析记录,添加新的两条CNAME记录
第一条 @ 随机的二级域名
第二条 www 随机的二级域名
至此配置完成