个人静态网页博客部署记录

👀 写在最前,从来没想过会有什么时候自己会需要写前端,大一的时候采访一个15年就毕业的做前端的学长,从他的博客里感受到前端好像是个不那么受待见、在大众眼里没什么技术性、薪资不是很高但其实又很重要的岗位,后来上的课也是没有一门与前端相关的,于是对前端的了解大概也就止步于此了。之前倒是经常看着同专业的人秉持着兴趣在做网页,佩服别人的同时却没有一点儿自己要动手尝试的想法,但是现在,为了完成第四讲开源作业,还是迫不得已上路了。

✨ 没想到的是,在了解SSG框架的过程中,一边欣赏别人的主题一边学习框架的基础命令一边自己点开各种前端文件看个究竟,慢慢地觉得前端好有意思,可以根据自己的审美去设计网站结构,记录自己想要记录的东西,对于我这样一个啰哩叭嗦的人来说,一个静态网页博客真的可以作为一片用于记录和分享所有包括学习、生活中各种事情的自留地🌷,所以这次提交的网址不会是我的最终版本,这个网址在ddl之前是我的作业成果,在ddl之后就是属于我自己的blog啦~

📝 因为是完全从零开始,所以会每一步的尝试和问题都仔细记录,下面就是我的动手实践全记录了。

实践步骤

一、选择SSG框架

虽然助教建议先选择主题再选择框架,但在参考网上各类教程后我决定直接采用Hexo框架。由于之前没有接触过前端的内容,所以先学习了Hexo的基础操作,此处推荐Youtube上的Hexo教程Hexo-Static Site Generator 以及官方文档Documentation | Hexo

下载安装 Node.jsGit 后就可以通过在终端输入命令$ npm install -g hexo-cli安装Hexo,可以输入hexo -v 查看是否安装成功。

二、选择主题

Themes | Hexo 挑选喜欢的主题,在精挑细选后,我挑选了一款个人觉得还不错的主题(也就是很多人都在用的)hexo-theme-fluid

通过npm install --save hexo-theme-fluid可以直接安装最新版本的fluid,新建_cpmfoh.fluid.yml文件,复制主题的_config,yml中的内容到该文件中并在博客目录中的_config.yml 中设置theme的值为fluid即可。

选择主题后就可以对网站进行个性化设计了~

三、个性化设计

创建关于页

hexo new page about添加about页面,创建成功后修改 /source/about/index.md,添加 layout 属性。然后可以自定义头像、个性签名以及自我介绍,设置GitHub、Steam主页链接及微信二维码等。

更改banner/slogan/favicon等

_config.fluid.yml中修改banner、favicon的图片和slogan的文本内容,同时在相应文件夹上传需要显示的图片文件,实现个人喜欢的风格呈现。

上传个人文件

将想要上传的.md文件放入_posts文件夹中,在img文件夹下放入相关的图片,设置文件的tag、categories等实现不同文档的归档和标签设置,便于查找相关文件。

四、增加功能

置顶博客

通过设置该页Front-matter中sticky的值将该部署记录置顶

统计访问次数/浏览量

采用无需注册即可使用的不蒜子,通过将_config.fluid.yml中的footerstatisticsenable值设为True,如下所示添加pv_formatuv_format两行实现总访客数和总访问量的统计。

五、部署网站

根据相关的通过GitHub部署hexo静态网站的教程,实现网站从本地仓库上传到GitHub仓库。 首先将git与GitHub账号绑定,配置用户名和邮箱

1
2
git config --global user.name "Yukiho1028"
git config --global user.email "1479303796@qq.com"

然后生成ssh密钥

1
ssh-keygen -t rsa -C "1479303796@qq.com"

将生成的.ssh文件夹中的id_rsa.pub密钥的内容复制,在GitHub新建SSH key,title任意,key的内容即为复制的内容,粘贴后Add SSH key生成密钥。

安装hexo-deployer-git:

1
npm install hexo-deployer-git --save

然后在命令行依次输入以下指令生成网站、预览网站、部署网站即可。

1
2
3
hexo g
hexo s
hexo d

然后就可以成功访问我的blog啦~

六、未来规划

  1. 目前论文笔记中的公式渲染还存在部分问题没有解决,之后有时间再研究问题所在。

  2. 如果有朋友愿意的话,可以添加友链🔗。

  3. 开拓更多的categories,并在上面做一些笔记分享和生活记录。

  4. 添加更多的功能,e.g.添加评论功能。

问题记录

💭问题一:hexo server时报错 YAMLException: duplicated mapping key

解决方式:报错显示出现重复的键值对,发现在_config.yml中写了两次theme: hexo-theme-fluid,删除其中一行即可。

💭问题二:在部署网站到github时出现所有内容都被提交到master分支而不是main的问题(下图所示),网站未能正常显示。

解决方式:发现问题在于参考的教程中写把branch的值设成master而应该要推送main,所以如下图所示更改branch的值为main,重新部署即可解决。

💭问题三:如下图所示,论文笔记中的公式都无法正常渲染。

解决方式:参考Hexo配置指南-Latex公式,在_config.yml中设置math下的enablespecific为true,并在所有需要显示公式的.md文档的Front-matter中添加math:true,然后输入以下指令更换渲染器,最后安装Pandoc,输入hexo clean即可正常显示公式。

1
2
npm uninstall hexo-renderer-marked --save
npm install hexo-renderer-pandoc --save

💭问题四:如下图所示,更改渲染器后发现图片无法正常显示(本人写代码的日常,改了这个错那个)

解决方式:参考hexo无法显示markdown图片解决方法,设置_confi.yml中的post_asset_folder的值为true,并通过npm install https://github.com/7ym0n/hexo-asset-image --save安装图片路径转换插件,之后每次新建文档hexo new filename都会同时生成一个filename的文件夹,在其中放入图片,在博文中以![](filename/img_name.png)格式引用图片,即可正常显示。

参考链接

搭建个人博客-hexo+github详细完整步骤 - 简书 (jianshu.com)

hexo教程(四)——更改hexo主题 - 月如霜 - 博客园 (cnblogs.com)

配置指南 | Hexo Fluid 用户手册 (fluid-dev.com)

超详细 Hexo + Github Pages 博客搭建教程


个人静态网页博客部署记录
http://example.com/2023/03/31/个人静态网页博客部署记录/
作者
Yukiho
发布于
2023年3月31日
许可协议