shuguang's blog

环境决定基础,选择决定价值,努力决定方向。

博客搭建指南

  • 基于 HexoGitHub Pages 博客搭建指南,并使用 Git 进行版本控制。

#前言

  • 最近一直感觉自己已经被异化的得很严重了,学习本来应该是基于环境和自身需要的自发行为,但是如今却一直让我感觉很痛苦。

  • 人与动物的最大区别是:人的学习依靠一种象征体系(主动),而不是一套新的生理反应(被动)。

  • 人固然需要正反馈满足情绪的需要,这是学习一切开始的动力基础,然后更重要的是由此建立一套自律系统(我倾向于称之为情绪管理系统,也可以叫行为控制系统

  • 人不可能学完所有知识,也不可能一次学好所有知识,之前的学习行为消耗了太多热情,这也是写博客的初衷


#GitHub Pages 和 Hexo & 原理简介

  • GitHub Pages

    • 关于GitHub Pages

      • GitHub Pages是一项静态站点托管服务,它直接从 GitHub 上的仓库获取 HTML、CSS 和 JavaScript 文件,(可选)通过构建过程运行文件,让我们可以在 GitHub 仓库里托管和发布自己的网站

    • 域名和GitHub Pages

      • GitHub Pages

        • GitHub 只为每个帐户创建一个用户或组织站点(也就是username|organization.github.io,需先创建仓库username.github.io);但是账户的项目站点可以有多个(也就是子路径可以有多个,如:username|organization.github.io

      • 自定义域名

        • GitHub Pages支持自定义域, 可以去域名商 GoDaddyNamesilo购买。

        • 购买的域名只是一个网址,由DNS服务器(需要去DNS服务商注册DNS服务)与 GitHub Pages关联(也就是站点username.github.io

  • Hexo

    • 关于Hexo

      • Hexo是一个快速、简洁且高效的静态博客框架,它基于 Node.js 运行,可以将 Markdown(或其他渲染引擎)文档解析渲染成静态的 HTML 网页。

    • Next主题

      • Next是Hexo项目下的一个主题模板,提供可高度定制的页面外观。

  • Hexo + GitHub 发布文章原理

    • 在本地撰写 Markdown 格式文章后,通过 Hexo 解析文档,渲染生成具有主题样式的 HTML 静态网页,再推送到 GitHub 的仓库上,再由 GitHub 获取仓库的文件发布到站点。

#1. 环境搭建

  • 技术选择

    • 使用Hexo + GitHub
    • 使用Next作为Hexo主题
    • 使用GitHub Pages托管和发布网站
    • 使用Git进行版本控制[可选]

  • 具体步骤


#2. 熟悉常用操作


#3. 博客优化

  • 背景

    • 确认任务的可执行性
    • 权衡价值判断和具体用途
    • 根据布局和内容确定优化部分
    • 逐步优化已确定设计和内容
    • 将难以实现内容摒弃或加入待完成计划

  • 模板优化

    • 界面美化
    • 彩色标签
    • 自定义404页面
    • 菜单栏站点地图
    • 侧边栏RSS
    • Hexo 插件
      • 文章单词统计(wordcount)
      • 本地搜索(Local Search)
      • 评论系统
      • 图片预览
      • 脚注
      • 更换Markdown渲染引擎
    • 绑定自定义域名(可选

  • 性能优化

    • SEO 优化(网站推广)
      • 让搜索引擎收录你的站点
      • 优化description、keyword和title
      • 优化站点的URL
      • 优化相关链接,外链自动添加nofollow
      • 丰富站点内容
      • 关于使用子域名还是子目录
    • 网站预加载JS脚本
    • 文章压缩插件
    • 优化图片加载
      • 图片无损压缩
    • 图床工具
      • jsDelivr + GitHub + PicGo

  • 使用自定义 swig 模板渲染

    • 默认情况下 Markdown 文件中的 Front-matter 中指定layout: "books"时,意味着 hexo 会根据该文件的路由寻找文件名为books的swig模板文件(即books.swig)来渲染该Markdown文件。
  • 具体流程


#4. 扩展其他项目站点

  • 主页

    • 使用 Vitepress + Github Pages 搭建主页站点,主要做内容聚合。

  • 代理工具

  • AI工具

    • 搭建在线和离线AI模型。

  • API文档生成

    • 使用 Mkdocs 生成文档。

#5. 后续补充

  • 更换图床

    • Github 作为一个代码托管平台,用来托管图片并不是很道德,但又不希望购买服务器来搭建图床。

  • 使用ShareX

    • pass

  • 远程VSCode

    • pass