构建个人博客_Obsidian_github.io_hexo

1 初衷

很早就开始分享文档，以技术类的为主，一开始是 MSN，博客，随着平台的更替，后来又用了 CSDN，知乎，简书…… 再后来是 Obsidian，飞书，Notion，常常有以下困扰：

1.1 问题

  • 各平台格式不同，审核规则不同，需要花很多时间上传多个平台，文档更新成本也高。
  • 分类太简单，搜索困难，不能满足要求。
  • 虽然积累了一些积分和关注，但是平台更替，被黑，不可控。
  • 想表达的东西很多：技术文，书评，旅行，画画，其它作品，日常感受；长文与短文，文献与田野的不同风格；每个平台调性，受众不同，全放一起，显得很不专业。

1.2 优势

这么看来，自建平台相对来说更自由，更方便：

  • 租个每年几百块钱的服务器，或者先用个免费平台。
  • 从内容到数据迁移更自由，可利用工具切换平台，减少时间成本，一键分享/更新。
  • 构造一种介于“给自己看”和“给别人看”之间的状态，打通公/私分享内容。
  • 在自己的 blog 和 其它内容之间建立深度链接。
  • 设计自己的逻辑，做自己喜欢的分类和屏蔽规则，让不同类型的内容互不干扰。

1.3 劣势

但也存在一些问题：

  • 学习成本：虽然入门成本不高，但想做到自己满意，需要花很多时间。
  • 内容过多：当文章上千，待分享的内容大几百的情况下，有很多类别时，Layout很难做得好看，会引入整理和设计的时间成本。
  • 让更多人看到：写在公共网站上，写得好会被推荐，平台的属性和分类也会吸引更多读者；而自己做的网站相对难推，且有的免费站被百度搜索屏蔽掉了，只能申请自己的域名。
  • 建站成本：除了买域名，还需要做网站公安备案，也是费时费力。

总之，选择自建平台/公共平台，主要视情况而定，不过艺不压身，多学点东西，有更多选择总是没错的。

2 设计思路

2.1 选平台

最终的目标是可以省时省力，随时切换到各种服务器和平台。具体步骤如下：

  • 先找个免费的平台
    这里选用了 github.io，用法类似于 github 普通项目，可方便切换到任何历史版本。
  • 设计方便的切换方法
    为后期可方便地切换到一般的 Linux服务器，主要基于：Docker环境 + Python 后端工具 + JS 前端工具的架构。
    • Docker：便于切换平台；
    • Python：我对 Python 用着比较顺手，后面还可以加一些有意思的功能；
    • 前端：前端先期选用 Hexo，基于以下原因：
      • 既可以自己启动服务，也可以生成静态网页自动部署到已有的 Web 服务。
      • 无缝对接之前的 markdown 写作风格。
      • 插件多，且有很多网络 Theme 可选。

2.2 打通私人笔记和分享笔记

之前笔记写在 Obsidian中，主要使用 markdown 格式，只是文件头写得并不规范，导致转成 Html 后列表卡片显示不正常。这里使用简单的 Python 代码编辑所有文档的文件头。以保证文档正常显示。（非常简单，正在整理，后面会上传到 github 项目，或者做得更通用一些）

2.3 降低分享成本

  • 设计分享规则
    将笔记分为：分享、不分享 两个类别；不分享的包含一些还没写完的文档，模板，测试，以及某些不足为外人道的内容。如果大部分都可以分享，hexo 自带排除功能。所以只要用目录区分就可以了。如果有更进一步的要求，则需要一些程序或插件实现。
  • 快速部署到服务器
    Hexo支持部署功能，通过配置文件和一些简单脚本，即可实现：一键将 markdown 笔记分享/更新到博客。

2.4 设计展示

  • Hexo 默认 Theme 将展示分为：按标签分类、按日期分类、最近的文章。先实现基本功能，后期再通过插件扩展。
  • 选择喜欢的展示风格 Theme。

总之，前期架构使用了 Docker + github.io + Hexo 的组合，成本低扩展性高，具体方法下面逐一介绍。

3 github.io 建站

3.1 建立仓库

https://github.com/new

image.png

注意：repo name 需要填写：“用户名.github.io” 格式，只能使用你的用户名，也就是说每个 github 帐户只能建一个 github.io 的主页。

3.2 创建静态网页

$ git clone git@github.com:用户名/用户名.github.io.git
$ cd 用户名.github.io.git
$ echo 'hello world !!!' > index.html
$ git add index.html
$ git commit -m 'init'
$ git push origin master

提交后需要等一会儿，才能访问：https://用户名.github.io/，我大概等了两分钟。

4 Hexo 框架

Hexo 是一个简单、快速、强大的博客发布工具，支持 Markdown 格式，有众多优秀插件和主题。我一般使用Markdown语法编写文章，通过 Hexo 命令行工具生成静态网页，并通过 Hexo 部署到网站。

4.1 配置环境

安装 Hexo 之前先要安装 javascript 开发环境，因为怕麻烦，就直接使用了 Hexo 的 docker image 现成环境。具体版本用了轻量级且稳定的系统 alpine 版，整个镜像只有几十兆，其中还包含简单的 vi 编辑器。我的宿主机系统是 Ubuntu 22.04，具体操作如下：

$ docker pull taskbjorn/hexo:alpine-latest
$ sudo mkdir /exports/hexo_data -p # 数据存放在 docker 之外
$ sudo chmod 777 /exports/hexo_data
$ docker run -it --rm --name my_hexo_container --privileged=true -p 4000:4000 -v /exports/hexo_data:/home/hexo/.hexo taskbjorn/hexo:alpine-latest # 启动镜像

第一次运行时，数据安装到/home/hexo/.hexo目录，比较慢，再启就快了。
正常启动后，使用 localhost:4000 即可在本机访问博客，生成新内容时自动更新，无需重启服务。

从另一个终端进入 docker container，以使用命令操作 Hexo：

$ docker exec -it my_hexo_container sh

进入 docker 内部可以看到，当前用户为 hexo，在当前目录下已经建立好了项目文件。
其中包安装在 node_modules 目录下，markdown 等源数据在 source 目录下，生成的文件在 public 目录下，主要配置文件是_config.yml。

4.2 配置文件

_config.yml 是最基本的配置文件，至少需要设置其 site 部分：

title: '标题'
subtitle: '副标题'
description: '网站描述'
author: 作者
language: zh-Hans
timezone: 'Asia/Shanghai'

4.3 基本操作

$ hexo cl # hexo clean 清除缓存
$ hexo g # hexo generate 生成静态网页
$ hexo d # hexo deploy 部署
$ hexo s # hexo server 启动服务预览，由于docker已经启动了服务，无需此操作

4.4 Markdown规范

通过 markdown 生成的网页，如果不设置文件头，则列表中只能显示文件创建日期：

因此，至少需要设置 title 才能正常显示，一般设置 title, author, date, tags，Obsidian 的 hexo 模板如下：

---
title: <% tp.file.title %>
author: xieyan0811
date: <% tp.file.creation_date() %>
updated: <% tp.file.last_modified_date() %>
tags:
---

4.5 部署博客到 github.io

4.5.1 配置 github 免密环境

$ git config --global user.email 你的邮箱
$ git config --global user.name 你的用户名
$ ssh-keygen -t rsa -C 你的邮箱 # 一路回车

如果提示找不到 ssh-keygen，可能是 docker 环境中未安装该软件，由于安装的是 alpine 环境，需要用 root 权限登入，才能安装软件（建议另起一终端操作）：

$ docker exec -u=root -it my_hexo_container sh # 以root方式登入
# apk add openssh # 安装 openssh 工具集

将 /home/hexo/.ssh/id_rsa.pub 内容加入 github，具体方法是：
https://github.com/settings/keys add ssh key

设置好后，查看能否正常使用：

$ ssh git@github.com  # 正常结果形如: You've successfully authenticated

4.5.2 配置文件

修改配置文件_config.yml，设置部署服务

deploy:type: 'git'repo: git@github.com:用户名/用户名.github.io # 注意这里不是http地址 branch: master

4.5.3 部署

$ npm install hexo-deployer-git # 安装 hexo 的 git 插件
$ hexo g # 生成静态网页
$ hexo d # 部署到 github.io

正常执行后，可以看到 public 目录内容被更新到 github.io 主页，内容也不多，只有 demo 时不到1M。

4.6 显示图片

Hexo 支持多种显示图片的方法，比如图床，上传图片等，这里介绍最简单的方法：

4.6.1 安装插件

$ npm install hexo-asset-image
$ npm install hexo-renderer-marked

4.6.2 配置文件

保持_config.yml配置文件 中 post_asset_folder: false 不变，加入 marked 设置：

post_asset_folder: false
marked:prependRoot: truepostAsset: true
  • 我在 Obsidian 中的图片都放在 attachments/ 目录下，将此目录复制到 Hexo 项目的 source 目录中，即：source/attachments/xx.png
  • hexo g 重新生成后，图片正常显示
  • 注意图片较少时，建议使用该方法，图片很多时，github项目也变得很“重”，建议使用图床。

4.7 更换主题

建议设置一个常用的主题，比如next，遇到问题也好查资料。
官网主题见：https://hexo.io/themes/

  • 安装主题
npm install hexo-theme-next # 安装在node_modules/ 目录下
cp node_modules/hexo-theme-next/_config.yml _config.next.yml # 复制主题配置文件
  • 修改配置：在_config.yml中， 修改：theme: next
  • 重新生成后，即可看到新主题

4.8 调试

  • 查看软件版本
hexo -v
  • 查看详细 debug 信息
hexo g --debug # 加 --debug 参数
  • 忽略一些文章
    修改_config.yml，修改后注意先清缓存再生成，否则设置可能不生效。
skip_render: ['in_progress/**/*']

5 参考

Hexo + Obsidian + Git 完美的博客部署与编辑方案
搭建个人博客 — Hexo+Markdown+Github Pages
如何让Hexo不渲染某些文件
hexo相对路径图片显示
hexo博客如何插入图片
搭建自己的 github.io 博客
在github.io上写博客

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/110367.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

uniapp 开发小程序，封装一个方法，让图片使用线上地址

uniapp 开发小程序，封装一个方法，让图片使用线上地址

1.在main.js文件中&#xff0c;添加以下代码&#xff1a; 复制使用&#xff1a; // 图片使用网络地址 Vue.prototype.localImgSrc function(img){//项目的地址域名&#xff0c;例如百度return "https://baidu.cn/static/index/images/" img; }2.在页面中直接使用&…
阅读更多...
Python怎么解决性能问题？

Python怎么解决性能问题？

Python的性能问题可以通过以下一些方法来解决或改善&#xff1a; 使用更高效的算法和数据结构&#xff1a; 选择适当的数据结构和算法可以显著提升代码的性能。了解不同算法的时间复杂度和空间复杂度&#xff0c;选择最适合问题的解决方案。 优化代码逻辑&#xff1a; 仔细审查…
阅读更多...
Zenity 简介

Zenity 简介

什么使 Zenity Zenity 是一个开源的命令行工具&#xff0c;它提供了一种简单的方式来创建图形化的用户界面&#xff08;GUI&#xff09;对话框&#xff0c;以与用户进行交互。它基于 GTK 库&#xff0c;可以在 Linux 和其他 UNIX-like 系统上使用。 Zenity 可以通过命令行或脚…
阅读更多...
服务器数据恢复-服务器RAID6硬盘故障离线的数据恢复案例

服务器数据恢复-服务器RAID6硬盘故障离线的数据恢复案例

服务器数据恢复环境&#xff1a; 服务器中有一组由6块磁盘组建的RAID6磁盘阵列。服务器作为WEB服务器使用&#xff0c;上面运行了MYSQL数据库以及存放了网站代码和其他数据文件。 服务器故障&#xff1a; 在服务器运行过程中该raid6阵列中有两块磁盘先后离线&#xff0c;但是管…
阅读更多...
【高等数学基础知识篇】——导数与微分

【高等数学基础知识篇】——导数与微分

本文仅用于个人学习记录&#xff0c;使用的教材为汤家凤老师的《高等数学辅导讲义》。本文无任何盈利或者赚取个人声望的目的&#xff0c;如有侵权&#xff0c;请联系删除&#xff01; 文章目录 一、导数与微分的基本概念1.1 导数的基本概念1.2 微分的基本概念1.3 连续、可导、…
阅读更多...
【腾讯云 TDSQL-C Serverless 产品测评】- 云原生时代的TDSQL-C MySQL数据库技术实践

【腾讯云 TDSQL-C Serverless 产品测评】- 云原生时代的TDSQL-C MySQL数据库技术实践

一、活动介绍&#xff1a; “腾讯云 TDSQL-C 产品测评活动”是由腾讯云联合 CSDN 推出的针对数据库产品测评及产品体验活动&#xff0c;本次活动主要面向 TDSQL-C Serverless版本&#xff0c;初步的产品体验或针对TDSQL-C产品的自动弹性能力、自动启停能力、兼容性、安全、并发…
阅读更多...
经典卷积网络

经典卷积网络

目录 一、经典神经网络出现的时间线​编辑 二、LeNet 三、AlexNet 四、VGGNet 五、InceptionNet 六、ResNet 总结&#xff1a; 一、经典神经网络出现的时间线 二、LeNet 背景&#xff1a;LeNet由Yann LeCun于1998年提出&#xff0c;卷积网络开篇之作。 解释&#xff1…
阅读更多...
如何恢复删除的微信聊天记录？这3个方法分享给你

如何恢复删除的微信聊天记录？这3个方法分享给你

“卸载微信后发现聊天记录被清空”、“手滑不小心误删了聊天记录”。大家是否遇到过上述的情况&#xff1f;丢失微信聊天记录可是件麻烦事&#xff0c;因为微信里保存着大量重要的图片、视频、文档等数据。那么&#xff0c;如何恢复删除的微信聊天记录&#xff1f;我们有3种好用…
阅读更多...
EV代码签名证书是什么？

EV代码签名证书是什么？

在数字世界中&#xff0c;很多软件和应用都需要进行代码签名&#xff0c;以确保其来源可靠和安全&#xff0c;EV代码签名证书恰好都能做到&#xff0c;那么EV代码签名证书是什么&#xff1f;它有什么功能特点呢&#xff1f;下面的内容可以给到答案。 EV代码签名证书是什么&…
阅读更多...
跳跃游戏 II【贪心算法】

跳跃游戏 II【贪心算法】

跳跃游戏 II class Solution {public int jump(int[] nums) {int cur 0;//当前最大覆盖路径int next 0;//下一步的最大覆盖路径int res 0;//存放结果&#xff0c;到达终点时最少的跳跃步数for (int i 0; i < nums.length; i) {//遍历数组&#xff0c;以给出数组以一个…
阅读更多...
数据库集群的简单了解

数据库集群的简单了解

Update 关于操作的日志 1.0 redo log 读一次写一次 一共2次, 不安全 注意redo log是顺写 而file是随机 所以Mysql做出类似HDFS的操作 行为日志和数据分离&#xff0c;但是不同的是&#xff0c;Mysql在内存中操作修改&#xff0c;如果不出事故&#xff0c;由内存中的行为来直接…
阅读更多...
3D模型转换工具HOOPS Exchange助力打造虚拟现实应用程序

3D模型转换工具HOOPS Exchange助力打造虚拟现实应用程序

挑战&#xff1a; 支持使用各种 CAD 系统和 CAD 文件格式的客户群向可视化硬件提供快速、准确的数据加载提供对详细模型信息的访问&#xff0c;同时确保高帧率性能 解决方案&#xff1a; HOOPS Exchange领先的CAD数据转换工具包 结果&#xff1a; 确保支持来自领先工程软件…
阅读更多...
Verilog 实现超声波测距

Verilog 实现超声波测距

Verilog 实现超声波测距 教学视频&#xff1a; https://www.bilibili.com/video/BV1Ve411x75W?p33&spm_id_frompageDriver&vd_source19ae31dff4056e52d2729a4ca212602b 超声波测距原理 参考资料&#xff1a;STM32的超声波测距程序_超声波测距stm32程序_VaderZhang的…
阅读更多...
C# WPF监听USB插入拨出

C# WPF监听USB插入拨出

可以全部监听。好用 private void FormF100WriteCortexLicense_Load(object sender, EventArgs e){this.Text this.Text " " FT_Tools.Program.version;USB USBWatcher new USB();USBWatcher.AddUSBEventWatcher(USBEventHandler, USBEventHandler, new TimeSpa…
阅读更多...
【2023钉钉杯复赛】A题 智能手机用户监测数据分析 Python代码分析

【2023钉钉杯复赛】A题 智能手机用户监测数据分析 Python代码分析

【2023钉钉杯复赛】A题 智能手机用户监测数据分析 Python代码分析 1 题目 一、问题背景 近年来&#xff0c;随着智能手机的产生&#xff0c;发展到爆炸式的普及增长&#xff0c;不仅推动了中 国智能手机市场的发展和扩大&#xff0c;还快速的促进手机软件的开发。近年中国智能…
阅读更多...
Zblog博客网站搭建与上线发布：在Windows环境下利用cpolar内网穿透实现公网访问的指引

Zblog博客网站搭建与上线发布：在Windows环境下利用cpolar内网穿透实现公网访问的指引

文章目录 1. 前言2. Z-blog网站搭建2.1 XAMPP环境设置2.2 Z-blog安装2.3 Z-blog网页测试2.4 Cpolar安装和注册 3. 本地网页发布3.1. Cpolar云端设置3.2 Cpolar本地设置 4. 公网访问测试5. 结语 1. 前言 想要成为一个合格的技术宅或程序员&#xff0c;自己搭建网站制作网页是绕…
阅读更多...
操作系统真题

操作系统真题

操作系统真题 考点前驱图真题分页存储管理索引文件结构分段存储管理进程的状态进程的同步和互斥 考点 考试只会考察选择题 前驱图真题 c 这是常考题型 b 分页存储管理 将程序分页 --逻辑地址 将内存分为页框&#xff08;物理块&#xff09; --物理地址 程序页的大小和页框的大小…
阅读更多...
海康威视相机-LINUX SDK 开发

海康威视相机-LINUX SDK 开发

硬件与环境 相机&#xff1a; MV-CS020-10GC 系统&#xff1a;UBUNTU 22.04 语言&#xff1a;C 工具&#xff1a;cmake 海康官网下载SDK 运行下面的命令进行安装 sudo dpkg -i MVSXXX.deb安装完成后从在/opt/MVS 路径下就有了相关的库&#xff0c;实际上我们开发的时候只需要…
阅读更多...
火绒能一键修复所有dll缺失吗？教你快速修复dll文件

火绒能一键修复所有dll缺失吗？教你快速修复dll文件

关于dll文件的缺少&#xff0c;其实大家应该都是不陌生的吧&#xff0c;毕竟只要是经常使用电脑的人&#xff0c;那么它就一定碰到过各种各样的dll文件缺失&#xff0c;因为很多程序都是需要dll文件来支撑的&#xff0c;如果dll文件丢失了&#xff0c;那么一些程序就会启动不了…
阅读更多...
Python基础学习第三天：Python语法

Python基础学习第三天：Python语法

执行 Python 语法 正如我们在上一节中学习到的&#xff0c;可以直接在命令行中编写执行 Python 的语法&#xff1a; >>> print("Hello, World!") Hello, World!或者通过在服务器上创建 python 文件&#xff0c;使用 .py 文件扩展名&#xff0c;并在命令行…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发