完全小白的搭建Hexo指引,顺带安利Fluid主题

前言

Hexo个人博客是基于 Github Pages的解决方案,基本优势除了省了服务器费用外,还可以拥有免费域名,这就省下很多事;而相比Hexo以外的博客系统,因为我个人了解不深,所以如果需要了解更多内容,可以自行google。那么这里就直接开始。

注:本指引在 win 10上完成,其他操作系统中可能部分步骤并不适用。

搭建部分

创建 GitHub Pages 仓库

在GitHub创建名称为 yourname.github.io 的 repository(需要指定为 public),此处的 yourname 需要与你的 GitHub ID一致(大小写),其他诸如项目描述等不重要信息可随意填写,创建完成后即可v有如下仓库,个人图片示例

创建完成示例

添加本地SSH Key到GitHub

执行此步骤前,请确认电脑上已经安装Git,若不能确定是否安装,可直接命令行运行 git --version,若正常输出Git 版本信息如下则已正确安装,若无则请安装Git并确认环境变量。

C:\Users\paco>git --version
git version 2.22.0.windows.1

使用命令行,或直接使用 Git bash,使用如下命令:

git config --global user.name <your user name>
git config --global user.email <your email>
ssh-keygen -t rsa -C "<your email>"

使用你的GitHub ID替换命令中的<your user name>,使用你的邮箱(注册GitHub的那个)替换命令中的 <your email>,最后一条命令执行后会有一些确认选项,若无特殊需求,直接全部 enter,让它自己使用默认项。

默认将生成的Key文件存储在用户目录下,也就是 C:\Users\paco\.ssh\ 文件夹中,其中的 id_rsa.pub 文件就为我们需要的文件。

登录 GitHub,点击自己的头像,选择 Settings,在设置页面内选择 SSH and GPG keys,再点击 New SSH Key 进行新建,将刚才得到的 id_rsa.pub 文件内容全部复制,粘贴在 Key 输入框内, Title 框为此 Key 的名称,可自己随意命名。完成后点击 Add SSH Key 完成添加。

添加完成后,可在命令行执行命令: ssh -T git@github.com,若出现类似如下输出,则此步骤完成。

C:\Users\paco>ssh -T git@github.com
Hi RookiePC! You've successfully authenticated, but GitHub does not provide shell access.

安装 Hexo

安装 Hexo 之前,需要先在电脑上安装 Node.js,进入官网进行下载安装,在我个人的搭建中,我下载了 Node.js 12.13.1版本(因为它是一个LTS版本,不仅较为稳定,用户数也稍多,出现问题进行搜索时容易寻找到解决方案),下载解压至需要安装的路径(因为其直接在解压后的文件夹进行安装,所以建议不要丢在桌面),双击使用其中的install_tools.bat,根据提示安装。

安装完成后,推荐将其加入环境变量,方便后面使用 npm 命令。

使用如下命令安装 Hexo :npm install -g hexo-cli
安装完成后使用如下命令确认安装结果: hexo -v,若输出各组件版本情况则成功安装,若提示找不到命令 hexo,请查看安装过程中的提示信息进行重装。

创建博客系统文件

安装完成后,需要生成博客系统的文件,打开命令行,切换到想要保存博客相关文件的目录中,使用以下命令

hexo init <folder>
cd <folder>
npm install
  • 其中第一条命令为创建博客系统文件,第一条及第二条命令中 <folder> 为想要存放博客系统文件的目录名

所有命令执行完成后,执行如下命令生成博客系统静态文件(即要托管到 GitHub Pages中的文件)并启动本地服务以进行预览:

hexo generate
hexo server
  • Hexo 命令可以简写,参数仅填写参数首字母即可,即上述命令分别可以 hexo ghexo s 代替

启动本地服务后,命令行会输出本地运行的端口,可通过浏览器进行预览。

将博客文件部署到 GitHub Pages中

根据提示关闭 本地预览服务,编辑博客根目录下的 _config.yml 文件(此为博客系统的配置文件),在文件中找到 deploy设置项,将其中设置内容更改为下述:

deploy:
	tpye: git
	repository: git@github.com:<user name>/<user name>.github.io.git
	branch: master

其中 <user name> 为你的 GitHub ID, 注意大小写

配置完成后,在命令行中(需要切换工作路径到 博客根目录下)执行命令:npm install hexo-deployer-git --save 以安装部署插件 hexo-deployer-git

安装完成后,执行命令 hexo g 以生成静态文件,再执行 hexo d 将系统文件部署到GitHub,命令执行完成后即可完成部署。

在访问前需要在博客仓库的设置中,GitHub Pages项内设置 Theme,此项并不会修改博客系统的主题,但是若不设置,则访问个人博客始终404,选择之后,保存,稍等一段时间即可通过浏览器访问 <user name>.github.com 访问你的个人博客系统(此时可以不用管大小写)。

修改域名部分

如果想使用自己的域名,需要在博客仓库的设置中,填入自己的域名(需要事先购买,国内域名也需要实名注册)的地址,在 GitHub Pages项中的 Custom domain 中填入域名,并点击保存,保存完成后项目中将多出 CNAME 文件,其中就为我们保存的域名。

然后将博客的ip地址添加到域名解析中,博客的ip地址可通过命令行 ping 博客地址获得,如下输出:

C:\Users\paco>ping rookiepc.github.io

Pinging rookiepc.github.io [185.199.110.153] with 32 bytes of data:
Reply from 185.199.110.153: bytes=32 time=8ms TTL=51
Reply from 185.199.110.153: bytes=32 time=7ms TTL=51
Reply from 185.199.110.153: bytes=32 time=8ms TTL=51
Reply from 185.199.110.153: bytes=32 time=8ms TTL=51

Ping statistics for 185.199.110.153:
    Packets: Sent = 4, Received = 4, Lost = 0 (0% loss),
Approximate round trip times in milli-seconds:
    Minimum = 7ms, Maximum = 8ms, Average = 7ms

添加解析完毕后等待一段时间就可以从你的域名访问博客了。

美化部分

美化的理由

Hexo 默认的主题说不上难看,但是也很难说它漂亮。

这里推荐 Fluid,里面也有提供两个示例的博客可以访问,可以先预览再决定是否使用。

Fluid预览

前言

以下对配置文件的修改,只有在重新生成静态文件、并将其部署到GitHub Pages才能生效。

使用Fluid主题

参考 Fluid–快速开始 进行初始配置(依照快速开始小节所有内容配置完成就可以完成配置工作)

定制博客页面顶部图片

参考 Fluid–首页大图 进行设置,自己寻找图片素材就行。

顶部菜单汉化

参考Fluid–顶部菜单

博客名称设置

参考Fluid–博客标题

首页展示语句

参考Fluid–Slogan

更换数学公式渲染引擎(根据需要)

参考Fluid–KaTex数学公式

接入Gitalk评论插件

简单介绍

Hexo 博客系统需要通过插件形式才能引入评论系统,而Gitalk则是通过项目issue的方式来保存评论信息,比其他的第三方托管我觉得稍微好一丢丢,毕竟博客系统也在GitHub上嘛

Register Application

首先在 GitHub 上注册新应用,点击这里,如下图所示,填写 Application nameHomepage URLAuthorization callback URL,其中注意后两项,请直接填写博客的github链接,如https://<yourname>.github.io,不要遗漏https

register_application_sample

填写完成后,点击注册,即跳转到如下页面,其中 Client IDClient Secret后面都会用到。

application_client_id_sample

然后编辑 Fluid 主题的 _config.yml 文件,编辑如下:

post:
	comments:
		enable: true
		type: gitalk

再找到如下关键字部分,填入clientIDclientSecretrepoownadmin,其中需要注意 admin 字段填写需要写入字符串数组,比如 ['RookiePC'],不要填入双引号

gitalk:
  clientID:                     # GitHub Application Client ID
  clientSecret:                 # GitHub Application Client Secret
  repo:                         # The repo to store comments
  owner:                        # GitHub repository owner. Can be personal user or organization.
  admin:                       # GitHub repo owner and collaborators, only these guys can initialize github issues, should be like "['admin']" or "['admin1','admin2']"

完成配置文件编辑后保存,重新生成静态文件,再配置到GitHub Pages即可完成Gitalk评论插件的导入。



Hexo      搭建教程

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