Po1o's Mind Palace

日月升落,总有黎明 --杨绛

0%

记录搭建博客的那些事

有话要说

​ 现在是大二上学期刚考完物理实验考试的一个下午。搁置了很久的待办终于完成了——搭建一个技术博客。当初看到科协里大家都有属于自己的技术博客,就一直很想搭建一个属于自己的博客。

抛开新鲜感不谈,想搭建博客的原因有很多:

  • 记录大学内的学习历程,记录自己变得越来越好
  • 回顾自己从前的时间点,督促自己要计划好未来的学习历程并设定时间点
  • 找工作面试能给面试官加分
  • 等等

​ 近朱者赤近墨者黑,周围的同学都很优秀,希望大学四年能从他们身上学到很多技术,学到很多人生哲理。希望四年后纵向比较自己,能看得出来自己有变化。

​ 我希望这个博客能经常更新,并且不是为了更新而更新,而是真的学习到了干货而写出的技术博客。初步设想在这个博客里投放技术博客、生活日记(仅对自己可见)、个人感想等文章。现在我还是个博客小白,要学的东西还有很多,比如如何编写出思路清晰、布局美观的博客(这就要慢慢熟悉markdown语法了)

​ 少画饼,少偷懒,多交际,多做事。

我的博客搭建采用的是Hexo+github pages方案,属于不需要租借域名的方案。


学习搭建博客浏览过的有用的教程网站

【基础篇】hexo博客搭建教程 (参考的配置文件教程)PS:属于是从头到尾保姆级教程了,按着它的步骤做,就能搭建成功。

新手上路 | hexo-theme-stun (主题stun的指导教程)PS:我采用的Hexo主题是stun,这里是stun官方提供的教学文档,可以调整自己的博客界面等等,整出更多花样

下面是写博客要查的东西

Markdown 基本语法 | Markdown 官方教程PS:markdown的基本语法(另外还有扩展语法),当作字典使用。常用的为标题列表图片超链接代码块功能。

Typora入门:全网最全教程 | typora中文网PS:Typora的快捷键字典,用CtrlF搜索关键词

搭建时碰到的新领域

新领域 描述
Hexo Hexo 是一个快速、简洁且高效的博客框架。
Github 一个开源代码社区,可以分享自己的作品
CSS 用来指定文档如何通过HTML展示给用户的一门语言

关于Hexo

​ Hexo 是一个快速、简洁且高效的博客框架。官网:Hexo。上文提到的搭建博客教程内阐述了如何安装以及使用Hexo框架,在这里就不再赘述。它可以建立一个离线博客,即在本地运行hexo配置的文件(git bash内用hexo s命令),用http://localhost:4000即可登录(注意这只是本地网址,只有自己的电脑可以访问)。

基于hexo建立的博客文件概览

image-20211219154727502

  • .github文件夹:自己用SSH绑定的GitHub的一个配置文件夹,可以将本文件夹(blog)与github库链接起来

  • source文件夹:里面存放md文件,是你更新上博客的文档

  • _config.yml文件:博客的配置文档,用IDE打开编辑即可(我用的时notepad++)


搭建博客出现的问题

1. 网页加载不出CCS

问题如下:将离线博客与github pages结合后,打开的是没有画面的博客。

QQ图片20211219155304

​ 请教了于哥,他一句“CSS没上来”让我豁然开朗。于是我了解了CSS是什么,我个人理解为网页前端的一个界面可视化代码。我便搜了下“hexo博客CSS丢失”找到了一篇解决文档:hexo部署博客没有样式等问题_青空的博客-CSDN博客_hexo没有样式原来是config文件内url没有于自己博客的域名绑定,更改后如下:

image-20211219155705942

​ 随后在gitbash内hexo g和hexo d更新一下就好啦

2. GitHub pages给的域名过长

​ pages里给的域名是根据个人账号的名字和库的名字来命名的,我的GitHub账号叫polo-0831,新建用于存放博客代码的库叫做polos-blog,于是pages自动生成了https://polo-0831.github.io/polos-blog.github.io/的域名。没错,这个域名太长太丑了,而且在博客内跳转地址时会出现问题。博客内的所有按钮所链接的网址都是GitHub上库内的文件,当你把鼠标放在“首页”这个按钮的时候,左下角会显示链接的网址如下图:

image-20211219160220211

可以看出,如果域名时那个又长又臭的域名的话,跳转的地址并不是库内的地址,会出现404报错。

解决方法:将库名字修改成与自己github账号名字相同,pages自动生成的网址便会自动缩短:PoLo Welcome! (polo-0831.github.io)

问题解决!


更新博客步骤

  1. 在博客目录下git bash,输入hexo new [模板] (标题)创建新文档和对应的文件夹(放图片),模板为hexo内置的三个文档模板,即md文件开头的信息框,在blog/scaffolds里可以查看,默认是post。

  2. 在博客文件夹父路径下打开git bash,输入hexo ghexo d更新上即可(PS:hexo g是hexo generate的意思,hexo d是hexo deploy的意思,我理解为即用hexo里的deploy工具将文件上传上去。教程内在配置config文件的时候也修改了deploy的定义,修改为git)


结语

​ 这是我在复习周匆忙写的文档,时间紧没有用心写。希望未来的文档能够越写越漂亮!


关于修改主题配置文件—-2022/6/25更新

资料补充:主题github库:liuyib/hexo-theme-stun: 🦄 An elegant theme for Hexo (github.com)

修改主题配置文件应在D:\Blog\source\ __data\stun.yml配置文件内修改,而不是stun主题内的与hexo配置文件重名的_config.yml,否则会出现部署之后博客没变化的情况。

关于原因可以查看我在作者github上的Issue:主页顶部背景图片无法显示 · Issue #271 · liuyib/hexo-theme-stun (github.com)

添加了站长管理工具—-2022/6/25更新

什么是站长管理工具?从功能上理解,就是把你的个人域名报备到搜素引擎里,让搜索引擎统计你的域名网站的数据,例如搜索次数、网站覆盖率等,并允许搜索引擎的爬虫程序爬到你。

谷歌站长管理工具:

image-20220625210024054

必应站长管理工具:image-20220625204426189

百度站长管理工具:

image-20220625211100626

修改博客主题Next—-2022/12/13更新

所参考的Next主题配置博客

配置:Hexo配置NexT主题教程 - 知乎 (zhihu.com)

内容设置:

Next主题美化_添加搜索功能、点击效果、背景、自定义博客图标、基础主题信息、社交信息、文章结束标志、阅读次数和访客数等等

Next添加评论功能

官方NexT 使用文档

比较优秀的博客配置文章:

Hexo 博客主题个性化 - BOB’S BLOG (itbob.cn)

解决github单线部署博客加载慢的问题

解决方法:国外部署github,国内部署gitee(本想用coding,但其已在2021年底停止静态网站部署功能)。另外,图片,js,css等可以使用免费 cdn 加速

gitee pages部署博客

使用JSDelivr加速Github、博客文件(尚未实现)

whois查询域名所属-中国万网 (aliyun.com)

使用cloudflare免费加速github page(已实践,尚未实现)

-------------本文结束感谢您的阅读-------------
钱乃身外之物,开心无价。