序章

  1. 为什么打算搭建博客?
    • 很多时候我看了一本书,心中突然冒出的一个想法,甚至是突然学到了一个东西却没有及时的记录他,等过段时间去回想书中的内容时就,书中的那些概念理论会一下子忘却了,变成了空谈的大道理。下次遇到相同的问题的时候明明之前有解决的但是脑子也是抽了一样只会Ctrl C+Ctrl V重复一次又一次。特别是时不时翻到之前写的垃圾Note把自己拉进坑了一次又一次,却懒得重新去修正。就会陷入我明明知道之前的是错的不够完善的,这次知道了,后面去回看还是会掉入以前挖的大坑中……于是就开始使用obsidian开始记录自己的阅读以及一些课堂Note,但是输入也只能是输入,为了后续能够更好的去完善所学的知识,不至于自我满足的状态,就搭建一个博客平台,来帮助我从obsidian里输出内容。以及记录些自身一些想法等。
  2. 博客的总体架构
    • 截止目前的话博客的整体结构是:采用于pages部署在github上,博客框架为hexo、加上github图床、配上一个域名解析。目前基本能够正常使用。

博客框架选择

  • 目前市面上有太多博客框架,主要分为两种类型:动态静态
    • 动态的:WordPress、halo、Typecho等。
      • 特点:依赖服务器和数据库支持。优点是方便、上手简单。
    • 静态的:hexo、hugo、VuePress、docsify等
      • 特点:采用markdown编写和渲染,无须依赖数据库,无后端,根据框架的不同上手难度不同。

个人建议

建议制作博客之前先决定好自己的需求来选择,都去了解一下,确定好需求再来选择搭建,另外一个博客要根据自己想法做成自己喜欢和能用的地步需要的是循循渐进。先知道博客框架的大概组成,那个文件是干什么的,这个文件夹里面放的是什么。后续再根据需求去扩展找主题啊!要扩展一些什么新东西啊!当然有些功能可能有部分主题作者可能已经内置在主题里面了方便后续扩展,或者你喜欢这个主题的UI但是他没有你需要添加的那种功能也不用怕,因为在Hexo这里一切功能想要的效果都可以后续通过插件和添加样式或者修改源代码来完成的。自由度相对其他生成类的博客框架来说是最高的。插件众多也避免了重复造轮子。

Hexo框架博客所需要的东西

  • 必须知识点:
    • node.js的环境配置、基本的HTML语法、YAML语法格式
    • 对文件路径的大概认识,知道什么是相对什么是绝对。
    • markdown语法的基本格式可参考Markdown 基本语法
  • 扩展知识点
    • 需要对互联网的域名解析有个大概的了解,知道什么是A记录、AAAA记录、CNAME记录等,知道CDN的原理。
    • 懂得git的基本命令,怎么拉取、提交、撤回。github action的基本概念和使用。
    • vercel的基本概念和使用
    • 搜索引擎网站收录的要求及配置
    • JavaScript的基本语法,后续如果想拓展主题功能或者更改页面添加什么的时候就需要
  • 需要准备的
    • 至少有其中一个的账号后续博客将会部署到上面:pages:可以理解为一个帮你托管静态应用的平台
      • github:国内访问较慢,有域名就快
      • gitee:国内访问正常。国外不行。后续扩展话不怎么适合。
      • gitlab:没用过不怎么了解。
      • —–分隔扩展(以下的除了cloudflare另外一个则需要github或者gitlab)——
      • cloudflare:可以直接将githubgitlab的博客部署上去,解决访问慢的问题,不过没这两个账号也可以。
      • vercel:一样国内访问慢,不过后续扩展会用到,不扩展不建议。
      • 帽子云:需要有github账号,目前较新的静态页面部署,访问速度较快。
      • webify:腾讯旗下的应用部署平台,国内速度快。有一定额度限制。
      • 等……
    • markdown编辑器喜欢的就行:
      • vscode:可以用的程度。
      • obsidian:markdown中的vscode,可简单可复杂。对自由度高的推荐。
      • Typora:主流的编辑器,想要简单的就推荐
      • 等…..
    • 可不用:
      • 域名:只要有了域名部署在哪里访问都快。
      • 图床:博客图片数量差不多的情况下,可以不外链图片,但是建议搞个。
        • 主流的:阿里云、七牛云、腾讯云等一些小型、免费图床托管。。。
        • 其他的:github图床。

环境基本配置

Liunx下环境配置

  1. 如果你是Liunx的话用你的包管理器下载gitnodejs,我这边使用的为Ubuntu
#安装
apt update
apt install git nodejs -y
#验证(能正常显示版本即可)
git --version
node -v

Windows下配置环境

Git配置

Git官网下载

  1. 根据系统架构选择,大部分默认64位,现在难道还有32位的电脑嘛
    Pasted-image-20241228022837
  2. 不清楚配置的除了安装路径外一路默认即可,然后点击完成。
    Pasted-image-20241228024049
  3. 打开命令行Win⌘ R 输入cmd,输入以下命令能正常显示版本信息证明安装完成。
git -v

Pasted-image-20241228024407

Node.js

Node.js官网下载

  1. 直接下载即可,现在默认即为22版本以上,不能低于14
    Pasted-image-20241228024757
  2. 不清楚配置的除了安装路径外一路默认即可,然后点击完成。
    Pasted-image-20241228025020
  3. 打开命令行Win⌘ R 输入cmd,输入以下命令能正常显示版本信息证明安装完成。
node -v

Pasted-image-20241228025132

Hexo

建议后续看一遍官方文档,毕竟这个才是一手资料,后续如果需要完善和部署中的大大小小问题大部分都能在文档里面找到答案。这里做个引路。

  1. 更换npm软件源,官方的在国外访问较慢。直接在阿里源华为等镜像站搜索npm获取最新。
#华为源
npm config set registry https://mirrors.huaweicloud.com/repository/npm/
npm cache clean -f

Pasted-image-20241228031413
2. 安装Hexo,并验证安装

#安装hexo
npm install -g hexo-cli
#验证安装
hexo -version

Pasted-image-20241228031558

创建博客站点

VsCdoe安装

  • 如果你有本身用的习惯的代码编辑器可以略过这一步,没有话建议使用VsCode这个万金油。只要你能想到的功能他都能通过插件实现。
  1. 官网下载
    Pasted-image-20241228032408
  2. 不清楚配置的除了安装路径和创建桌面快捷方式外一路默认即可,然后点击完成。
    Pasted-image-20241228032423
  3. 不熟悉英文的左边扩展搜索chinese可以看到中文扩展点击install即可,注意右下角的提示,点击changes language and restart重启打开即可
    Pasted-image-20241228032558
  4. 设置字体大小,个人习惯20,后续不合适可以回来更改
    Pasted-image-20241228032926

创建博客

  1. 找到个喜欢位置构建博客环境,点击上面的路径输入cmd,执行以下命令
#根据自己喜欢命名
hexo init myblog
#如果已经建立了存放的文件夹可以将`myblog`省略,则会直接在当前目录构建环境

Pasted-image-20241228033440
2. 用VsCode打开文件夹,选择刚刚构建的博客的文件夹,出现提示选择信任作者。
Pasted-image-20241228033917
3. 选择终端,新建终端。
Pasted-image-20241228034339
4. 执行以下命令,如果提示防火墙则允许。这部分和你在博客路径打开cmd效果一样的。

#构建相关环境,构建博客的时候已经构建了。如果没有node_xxx文件夹话必须构建
npm install
#预览博客,当命令只有这一条是s开头时可以简写
hexo server

Pasted-image-20241228034908
5. 按住Ctrl键点击http://localhost:4000/链接就可以看到博客已经创建成功了
Pasted-image-20241228035422