博客搭建指北

个人Blog的搭建避坑

因为网上的攻略过于老旧, 版本的更新迭代速度如此之快,导致如今再跟着搭建颇为费力, 笔者便另起炉灶把需要注意的坑写下以警示后来人

这里想说一下为什么要写博客:

学生为什么要在CSDN写博客？

虽然主体是学生,但是同样适用其他群体

程序员写博客的好处

虽然主体是程序员,但是同样适用其他群体

必要环境

• Git的安装+Node.js的安装+Hexo的安装
  • 非常推荐看官网是怎么安装的,不需要看任何博客说明,官网足够了
  • 如果硬是要看教程, 那么推荐这个大佬$\to$大佬[]
• 个性化主题的推荐:
  • metary网址
  • nexT网址
• 个人技能:
  • 因为博客文章基于 MarkDown, 所以 MarkDown是一定一定要会的,语法简单,建议看官网文档学习
  • MarkDown里面内嵌支持 HTML和 LaTex,所以有必要把后面两个的语法学习一下
    • HTML推荐看W3C的官网教程
    • LaTex应该在 MarkDown的官网文档里面有相应介绍

安装完成之后, hexo server命令看看能不能打开localhost:4000看到博客内容

整体框架介绍

这一部分便是DIY的重点,把里面的logo,图片,文字描述改成自己需要的,还可以装上很多插件丰富博客功能

先对整体目录文件有一个了解,可以自己点开看看里面的内容

博客根目录下的 .yml文件介绍

推荐看 Hexo官方的 readme.md

如果硬是要看教程, 那么推荐这个大佬教程$\to$夜法之书

主题目录下的 .yml文件介绍

推荐看主题下的 readme.md,非常详细,作者还是中国人,有中文文档

写博客

使用命令生成新文章

博客内容是统一放在 /source/_post文件目录下面,我们使用 hexo new post "博客标题"这个 hexo cli命令便可以在下面生成一份 .md文件

Hexo里面自带一份hello world, 可以看看里面的构成要素:

此处应有一份[图片],但是笔者懒,于是作罢

front matter说明

关于 front matter的介绍: 无论是 Hexo还是 matery的 readme都有详细说明,不再赘述

图片的引用

有个大坑, 建议学习别人的经验, 把图片放到图床上, 官方也从来没有修过这个问题, 本地图片的引用只能按照规定格式来, 具体原理是 hexo将 markdown生成 html静态网页时会按照固定 url引入,所以一切都要按照官网来.

部署

本地部署

本地部署官网应该有介绍, 非常详细, 不再赘述

一共也就那三个命令:

hexo cl && hexo g && hexo s

部署到GitHub

为什么要部署到GitHub上?

这样别人就可以通过 github.账号名称.io这个网址进行访问你的博客了, 要不然文件都在本地, 别人怎么看得到你的文章呢(搞云服务器内网穿透的别杠)

我的博客就可以通过这个访问 https://github.skddj.io

GitHub本身提供了 GitHub Page托管静态网站, 非常利于部署静态博客网站

此处官网也有详细介绍, 网上也有相关教程, 主要说一些需要注意的地方:

• 仓库的命名,必须是: GitHub账号名称.io 这样的格式
• ssh密钥生成,把公钥放到 GitHub上,网上说的很详细, 至于要提一嘴就是如果有人使用的 Linux系统, 碰巧又用了 Clash代理, 所有上网操作统一经过手动代理的端口,云端部署就会不断报错,Git日志显示拒绝, 那么就需要在 .ssh文件下的 config文件进行相应的配置了,具体操作可以看我这篇文章Ubuntu-git-ssh(网上是没有相关教程的,大坑)
• deploy在 yml文件下的配置, 不赘述, deploy插件的安装, 不赘述

然后就是经常用的操作:

本地 hexo cl && hexo g && hexo s调试看看有没有问题

没有问题就 hexo cl && hexo d -g 部署到 GitHub上去

多端部署

为什么要多端部署?

场景: 如果要换电脑写博客, 该怎么办?

• 可以把 hexo在的整个博客文件放到 GitHub上的私人仓库内,这样换电脑只需要把这个仓库 clone下来就可以继续写作了.当然,因为里面有各种密钥, 所以不要放到公共仓库上
• 有人说可以创建另外一个分支然后 push过去, 感觉没有放到另一个仓库方便, 其中的 git操作对小白也不友好,因此还是放到另外一个私人仓库方便

部署到Gitee上

为什么要部署到其他代码托管网站呢?GitHub不就够了吗?

• 因为众所周知的原因, 有时候国内不使用科学上网的话, 访问 GitHub不但慢, 而且甚至上不去,所有要在国内的 Gitee上或者 Coding上部署一下
  • (大坑,coding现在不支持 page托管,都转移到 tecent serverless上,腾讯收购 coding后把功能模块经常改动,现在已经没有 page托管)

需要实名认证,估计需要两天功夫, 建议提前注册准备

剩下的操作和 Github上的部署差不多, 唯一需要注意的就是需要实名认证, 可以提前先认证了

网上也有类似教程, 不赘述

个性化使用

域名的更改

教程: 直接看重点 Hexo+github pages搭建个人独立网站，绑定域名全教程

阿里云的万网上购买,便宜的域名10年甚至只需要200块人民币不到

至于为什么不买国外的域名, 因为国内的能够也需要 icp备案,然后将域名解析到 github.io那个域名上,这样访问你的域名也起到了访问github域名的作用,网上教程很详细

而且可以联动前面的 Gitee部署,将国内的访问解析到 Gitee page,国外的访问解析到 GitHub page.

我的域名: shiym.top

ICP备案

国内的 icp备案流程

CDN加速

不赘述

SEO优化

鲁迅说过: SEO做的好,引流跑不了

有个教程做的不错:hexo高阶教程：教你怎么让你的hexo博客在搜索引擎中排第一

分别让 Baidu和 Google收录你的网站,让更多的人(爬虫)看到你的文章

其中的需要用到将你的永久链接中的中文变成拼音或者hash值的插件,方便搜索引擎的爬虫爬到你的文章

RSS推送

用到了 webpushr这个插件, 有几个教程, 当然官网也有教程

至于目的,别人的博客写的很清楚, 可以给你带来更多的流量, 这种推送目前信噪比还比较高

Gulp压缩代码

你的文章中不论是 css还是 js充满了大量的空格,浪费了空间,线上资源比较宝贵,采用 gulp压缩代码可以节省流量

据说 GitHub Page每个月流量限定为100g,当然一般人也用不到这么多

文章还是这个: hexo高阶教程：教你怎么让你的hexo博客在搜索引擎中排第一

评论区插件

我用的是 lean cloud存储数据+valine无后端评论插件,matery主题的 yml文件注释里写的很清楚怎么操作

统一不推荐权限过高的 Gitalk和另外一个什么来着

评论可以使用 coolpusher推送提醒,网上教程较多,不赘述

GitHub CI/CD实现自动化部署

Github Action配合Hexo持续集成博客

Docker环境部署

略,看夜法之书的教程即可

加载动画修改

参考博客:斯莫笔记

在线聊天插件

使用的 tidio,教程看主题下的 _config.yml注释即可

mindmap优化

略

软技能类

如何写出好博客?吸引更多的流量?

【产品推广宝典】程序员推广产品的13个要点

博客插图推荐下载网站

Unsplash