抱歉,您的浏览器无法访问本站
本页面需要浏览器支持(启用)JavaScript
了解详情 >

博主从 22 年年初开始陆续折腾建站的相关事情,包括 Github Pages 配置、Hexo 安装与配置、主题安装与美化、Git 配置和网址域名解析等众多步骤,本系列共计三篇,基本上记录了我在折腾过程中所进行的所有步骤和遇到的目前能想起来的各种坑和错误,以为记录。本篇为系列第三篇,记录了建站后期部署以及博主在美化过程遇到的值得记录的一些坑和解决方法。

博主从 22 年年初开始陆续折腾建站的相关事情,包括 Github Pages 配置、Hexo 安装与配置、主题安装与美化、Git 配置和网址域名解析等众多步骤,本系列共计三篇,基本上记录了我在折腾过程中所进行的所有步骤和遇到的目前能想起来的各种坑和错误,以为记录。本篇为系列第三篇,记录了建站后期部署以及博主在美化过程遇到的值得记录的一些坑和解决方法。

经过了前面《建站指南与美化历程(一)(二)》的两篇博客的介绍,现在你已经可以在本地运行初始化的 Hexo 主题的网页,同时在浏览器输入购买的域名也可以打开 Github Pages 默认的主题网页,那么最后的一步便是将本地的网页源码部署到 Github 上并运行起来,之后就开始进行细致的主题美化踩坑的工作了。

Github pages 部署

在博客(一)中我们下载并安装了 Git 和 Nodejs,现在我们需要进一步配置 Git,Windows 系统在桌面右键点击Git Bash Here弹出终端对话框,MacOS 系统直接打开终端即可(这里强烈推荐第三方终端 iterm2,用过的都说好!)。分别在终端中输入以下两个命令并回车:

1
2
3
git config --global user.name "此处填写你注册时的用户名"
git config --global user.email "此处填写你注册时的邮箱"
# 如为报错,即可进行下一步

从本地成功提交代码到 Github 上的前提肯定要本地端和远程 Github 端连接成功,此时需要用到 ssh key 来解决本地与远程服务器的连接问题。首先,还是在终端先创建一个 ssh 密钥:

1
2
cd ~/.ssh  # 首先检查是否之前已创建过ssh密钥,如以创建则自动跳转到.ssh目录下
sh-keygen -t rsa -C "填写注册Github的邮箱" # 如果上一步检查没有创建,则输入命令进行创建

然后无需修改直接敲击 enter 三次,直到生成了两个文件id_rsaid_rsa.pub,Macos 系统存放在users/用户名下,可以直接通过终端 cd 命令进入,然后输入命令通过 vim 工具打开查看 ssh keys:

1
vim id_rsa.pub

此时进入 Github 首页,选中个人头像在下拉菜单中选择 Settings 进入设置页面,在 Access 中点击 SSH and GPG keys 进入页面,点击 New SSH keys,标题位置随便填写名称,建议填入 myblog 以此明确该 SSH keys 的用途。复制id_rsa.pub文件中这段以 ssh-rsa 开头,注册 Github 的邮箱结束的一串字母数字组合并粘贴到 Key 一栏下,点击 Add SSH key。

接下来用 vscode 打开 myblog 文件夹下的_config.yml的 Hexo 配置文件,在代码末尾有 deploy 一栏,修改成如下代码所示:

1
2
3
4
deploy:
type: git
repo: git@github.com:username/username.github.io.git
branch: main

最后一步进入博客文件夹内(例如 myblog)打开终端依次输入以下命令进行博客在 Github Pages 上的部署:

1
2
3
hexo cl  # hexo clean 清除本地项目文件残留,确保没有问题产生
hexo g # hexo generate 重新生成本地项目的文件
hexo d # hexo deploy 将本地项目文件上传并部署在Github上

运行完毕后稍等片刻即可在浏览器搜索框中输入购买的域名进入初始化的主题网页了!

主题美化踩坑

顺利的在购买的域名上呈现出初始化的相关主题网页之后,建站工作基本上也就告一段落了。接下来博主以 Volantis 主题为例,将/myblog/node_modules/hexo-theme-volantis文件夹下的_config.yml配置文件改名为_config.volantis.yml并且复制一份到 myblog 文件根目录下。这样,根目录下就存在两个配置文件_config.yml_config.volantis.yml,前者是 Hexo 的全局配置文件,主要用于网站整体的配置;后者是 Volantis 主题的配置文件,主要用于网站具体的细节美化配置。后续主要修改以上两个文件来达成网站持续美化的目标了。

(未完待续)

评论