HEXO的尝试、记录与思考

程序员入门的第一步就是给自己搭建博客,今天我们也不能免俗,来试试用目前已经很成熟的工具搭建自己的静态页面博客。

关于静态页面和动态页面:静态页面并不需要服务器有处理数据的能力,数据放在服务器上可以随意访问。这样的页面比较简单,访问也很迅速。动态页面等有空了在开坑吧。

现在的程序员自然不用再手写HTML代码,目前已经有很多成熟的工具可以生成一整套博客页面。热度比较高的选择有HEXO、Jekyll等。本次我们来使用HEXO,因为我已经看到了许多基于该框架的博客,而且基于node.js,这个技术栈还是很热门的。

使用这类静态网页生成器的流程也很好理解:在你的个人电脑上安装这个工具、修改它的配置文件、工具使用你配置的文件执行流水线操作,并最终生成你想要的结果(在这里是一个静态的HTML页面)。这样我们的工作就被分为几步:安装,设置和使用。


先从安装开始踩坑吧。

基础设施

在本次的讨论中,假设你拥有一台非常干净的Ubuntu主机可供使用,请原谅我还是个新手,搞不懂node.js。我也并不想为了一个博客在我日常使用的电脑上装一大堆有的没的软件,保持工作环境整洁是很重要的。

那么现在连进你的主机,这里使用的是ubuntu-20.04LXC虚拟容器,运行在我的个人服务器上。这种容器占用低而且恢复也很方便,启用root账户随便造吧!

我在内网服务器中建立了一个新的容器用于演示,这个容器目前什么都没有

我在内网服务器中建立了一个新的容器用于演示,这个容器目前什么都没有

连进去以后,我们看到了一个及其干净的linux系统,什么都没有。首先来执行update命令,方便我们安装需要的各种工具。

1
sudo apt update

由于HEXO是基于node.js的工具,为了安装本次的主角,要先从支持环境装起。我们来安装nodejs。

麻烦的环境支持

node.js是一个拥有悠久历史和众多使用者的项目,所以其版本管理相对复杂,因为不同的项目对其版本有着不同要求。在这里我们虽然使用apt-get install命令可以直接获取一个nodejs,但其版本大概率不符合要求。

为了解决node.js版本的问题,隆重介绍:*Node Version Manager,简称*NVM**

使用这个工具,我们能够轻松管理本机安装和使用的node.js版本(至于这个工具国内会遇到的网络问题,我们再议)

安装NVM的命令相对简单:它使用一个脚本进行安装,脚本存储在GitHub上,以供用户随时下载。截止到我写下这些文字,NVM的最新版本号为0.39.5

1
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh | bash

如果终端卡住,那你多半是遇到了网络问题,每个人都应该拥有属于自己的梯子。执行完成后,重启终端、执行nvm -v试试。这时候终端应该会输出版本号,表示你已经成功安装nvm。

接下来用nvm来安装nodejs,直接执行 nvm install node 指令即可安装最新版本的nodejs,也可以将node替换成你想用的版本号。在这一套组合拳打完后,你终于拥有了属于自己的,(也许)版本合适的nodejs。

安装本体

正如之前所说,HEXO是一个基于node.js的工具,我浅薄的理解为是在这个框架下运行的程序。这时就要介绍node.js的包管理工具:*Node Package Manager,简称*NPM,**借用GPT的话来说就是:

npm是Node.js生态系统中一个非常重要的组成部分,它使开发者能够轻松地管理和分享JavaScript代码。

所以这里我们需要先行安装NPM,再用NPM安装HEXO。这个过程就相对简单也没什么坑,如果你和我一样使用Ubuntu,那么NPM安装命令如下:

1
apt-get install npm

安装好后执行

1
npm install -g hexo-cli

即可完成HEXO的安装。

这样HEXO就算是安装完了,在命令行使用 hexo 命令即可查阅使用方式。或者输入 hexo - v 查看所安装的版本(检查版本操作在Linux中常被用来检查一个程序是否正常安装)。接下来让我们看看如何使用这个工具。


HEXO的使用

创建博客文件夹

这部分其实没什么好说的,在命令行输入 hexo 就能看到这样的显示:

简单的使用方式

简单的使用方式

在其中我们只需要使用 hexo init 命令,这个命令可以在一个空文件夹中创建所需的目录结构,在这个文件夹中存放博客数据或是设置各项参数。

目录生成后看起来像这样:

Untitled

其中我们最需要关注的就是 _config.yml 文件,以及 source 文件夹

和你想的一样,config文件用于存放本网站相关的设置,source文件夹则是存放你博客文章的地方。每篇文章都会以 .md 文件的形式存在于该文件夹中,并最终渲染到成品博客网站中。

当然,HEXO对文章格式依然存在着一些要求,主要是其独特的文章标题格式,并不属于标准的markdown语法。

1
2
3
4
5
---
title: {{ title }}
date: {{ date }}
tags:
---

只要在文章开头添加该段描述,就能保证文章正确被渲染出来。相应的文章模板也被存放于scaffolds文件夹中,有需要也可以复制过去使用。

现在整理一下自己的文字,准备迎接一个新博客的诞生吧!

查看与渲染

HEXO提供了预览功能,能让你在正式生成博客前检查网页及文章的状态,以及文章是否被正确渲染。这条命令名没有被明显的标注出来,但在发布一个新的博客前,进行检查总是没错的。

1
hexo server

在博客文件夹所在的目录下运行该指令,这个指令会渲染你的配置文件及文章数据,并在本地端口展示出来。

现在你可以访问这个博客来看看效果了。

如果对博客还算是满意,下一步就是渲染它。使用generate命令就能完成这一点。

1
hexo generate

生成的博客会以静态网站的形式存放在 /public 文件夹中,此时这个网站离部署就差最后一步了!


部署静态博客

只是一个静态网站的话,因为其并不需要运算资源,服务端只做展示功能,所以目前网上有许多免费工具可供选择,它们都能成为你博客部署的第一步。

这里我们就是用github.io,因为github足够好用,也足够常用。也许每一位程序员都离不开它。

而相应的操作也足够简单,只需要你有一个github账号就行

在你的github账号中创建一个新的repo,名为 {your_user_name}.github.io ,这样这个repo中的web内容就会被自动更新到相应的域名上,让全世界所有人都能够方便的访问。举例来说,我的域名就是 maka314.github.io ,而github中也会存在着一个同名repo,存放着这个网页的资源。这个过程是自动的,并不需要你操作。

现在,把你的博客网站复制到repo中,创建这个博客第一次的,具有纪念意义的,独一无二的提交吧!

无论以什么眼光来看这个博客都没什么了不起的,但仍然让我兴奋

无论以什么眼光来看这个博客都没什么了不起的,但仍然让我兴奋


What`s next?

这是我第一次尝试使用NPM和NVM,也是对静态网站生成工具的初次探索。我知道这次探索远远没有做到完美,甚至做到好都算不上。

我没有探究配置文件中一些略显复杂选项背后的含义,也没有为我的博客设置一个漂亮的主题。这个博客只是我照本宣科搭起来的罢了。但是这仍是一次有意义的探索,并且我十分清楚下一步应该向哪个方向努力。

HEXO是个相当有趣的工具,但它对命令行门外汉来说仍然太复杂了。其对于node.js的依赖在国内也并不是一个好解决的问题,或者说:使用它仍然存在门槛。

降低工具的门槛是个很有趣的方向。HEXO的功能有限,配置文件也并没有长到不可理喻,直到现在也还是有一群充满热情的开发者为HEXO编写好看的主题。这样的工具值得更多用户。

有一天,等我更了解这个工具,掌握了更多开发技巧,我希望能为这款工具开发一个更低门槛,更少依赖,图形化的,面向普通用户的版本。相信这会是个不错的练习。

SSH现在是我最好的伙伴

Created: August 16, 2023 3:27 PM
Tags: 博客, 工作, 技术

事情起源于我对于远程开发的依赖,每次写代码或者运行程序都需要连接到我的开发服务器。tunnel并不是一个可靠的工具,而最实用的,始终是SSH

我相信许多人和我一样,正在使用vscode远程连接到自己的另一台电脑上进行工作。这样可以在某种程度上实现工作上云从而减轻对于手头终端的依赖。你不再需要背着一台沉重的电脑走来走去,可以在任何地方专注手头任务,在任何时候结束它并随便换一台电脑继续开始;另一个好处就是你也能不再考虑手头设备的性能,专注于它的续航、外观、键盘等等。在使用远程开发接近两个月后,我的结论是这么做只有好处,没有坏处,每个人都应该试试。

然而好的期望往往不能成真,远程开发也有它自己的问题。目前最困扰我的是每次连结SSH服务时,我总是需要手动输入密码,更可气的是当我身处异地,和服务器之间的链接并不总是那么稳定,每次网络断开或是切换工作目录我总是需要重新输入密码。这样的工作体验相当糟糕,你需要不断的输入那串可怕的密钥来证明你对这台服务器的所有权。特别是当我们在聚精会神的时候,一个不期而遇的打断要比意料之内的高延迟讨厌的多。

试想一下你被反复拦在门外。或每十分钟输入一次密码,即使你一直活跃在终端(这里本应该是ssh输入密码截图)

试想一下你被反复拦在门外。或每十分钟输入一次密码,即使你一直活跃在终端(这里本应该是ssh输入密码截图)

vscode利用一个配置文件来保存ssh信息,这个config文件被保存为用户home目录下的一个/.ssh/config文件,文件内容就像:

1
2
3
Host Myserver
HostName 192.168.199.72
User mingchen

这个config文件指定了一个ssh链接的别名,用户可以直接通过ssh Myserver命令来连接到服务器而不需要再指定IP和用户名。可惜的是我并不能在这个config文件中直接添加密码,这被认为是不安全的,谁会把密码明文放在一个文本文件中呢?(我真的想啊!)

幸运的是,这个配置文件依然支持其他身份验证方式,那就是密钥。通过在一个配置文件中添加类似IdentityFile ~/.ssh/id_rsa的内容,我们就可以指定一个私钥文件,从而实现自动身份验证。

搞明白这一点,我们就知道需要做什么。把密钥部署到服务器和客户端就行,步骤如下

  1. 生成一对密钥
  2. 在服务器端完成公钥配置
  3. 在本地config文件指定私钥文件路径

我使用的是Windows笔记本作为客户端,Ubuntu作为服务端。以下操作是我的实现步骤供你们参考:

密钥生成

在windows终端下,使用ssh-keygen命令就可以生成一对密钥。输入该命令后一直回车,默认的密钥生成位置就是你的用户目录下的.ssh文件夹内。

在默认设置下,公钥和私钥的文件名都会是id_rsa,公钥会带着.pub的后缀。

在默认设置下,公钥和私钥的文件名都会是id_rsa,公钥会带着.pub的后缀。

接下来就是把公钥配置到服务器上了

公钥配置

在Linux上,如果想要使用密钥登陆,则需要将公钥储存在用户主目录下的.ssh文件夹中的authorized_keys文件中,每个公钥一行,每行包括三个部分分别是:

  • Key Type: 密钥的类型,通常是 “ssh-rsa” 或 “ssh-ed25519”。
  • Key Data: 公钥的内容。
  • Comment: 注释,通常是用于标识此公钥的说明,例如用户名或用途。

如果打开id_rsa.pub文件,会发现生成的公钥就是这个格式

只要在需要登录的用户根目录下创建这个authorized_keys文件,再稍稍修改下权限就就好了,使用sudo chmod 600 authorized_keys,最后别忘了优雅的重启ssh服务service sshd restart

authorized_keys 文件权限: authorized_keys 文件应该具有600(rw——-)的权限,以确保只有所有者可以读写该文件。这是因为该文件包含了允许连接到服务器的公钥信息。

本地config文件配置

如果你在完成上面的两步后,试着登录ssh,可能就已经发现这台电脑和服务器之间不再需要密码了。Windows自带ssh工具可以直接读取你生成的私钥,这项功能也会影响到vscode。

但万一你很叛逆喜欢把私钥放在其它地方呢?就像我之前说的,config文件格式中可以加入一行来指定密钥。如果不想把密钥文件放在.ssh文件夹中,只需要

1
2
3
4
Host Myserver
HostName 192.168.199.72
User mingchen
IdentityFile ~/.ssh/id_rsa //这里仅做举例,请不要直接复制过去

完成了这一切之后,保存config文件,为自己泡上一杯咖啡。

无惧网络波动,优雅打开vscode连接自己的服务器,让身份认证不再是困扰。