Day 4:透过 npm、Hexo 指令在本机端安装你的 Hexo 部落格

当前置必要安装工具用好後,就可以在本机搭建 Hexo 部落格啦!安装过程会使用到指令,所以我们要打开昨天安装的 Git 。如果你对指令没有很熟没关系,我会一步步说明。

下载 Hexo 套件包

要执行的指令为:

$npm install -g hexo-cli

npm 是一个内建於 Node.js 的套件管理系统,使用 JavaScript 所撰写,可以想像成是 play 商店以及 Apple Store 那样,将我们需要使用的套件(App)下载至本机使用。这个动作就是要下载 Hexo 套件回自己电脑,使电脑能够搭建 Hexo 部落格。

安装 Hexo

安装 Hexo

首先我们要建立一个资料夹,可以设定在你的桌面或是 C 槽或 D 槽。不过这个资料夹非常重要,因为往後部落格的资料以及部署、设定,都会利用此资料夹,所以请保存好喔~

我是在 C 槽建立一个 30blog 的资料夹,做为 Hexo 目录。建立好後,要使用指令指定这个目录。指令是这样执行的:

cd /c/30blog

开启後,会看到截图上的黄色字「~」变成我们刚刚设定的目录,就代表位置已经指定到这个目录。再来我们要初始化这个资料夹为 Hexo 用。指令是这样执行的:

hexo init

再来进行安装:

npm install

如此一来,安装就告一段落了。

搭建完成!看看自己的部落格

当你进行到这步时,恭喜你已经成功在自己的电脑上搭建好一个 Hexo 了。接下来有两个指令,将在你日後发表文章、编辑文章或页面以及样式时大量运用。

产生静态网页

上次提到 Hexo 是一个静态网页产生器,要理解它我们可以从理解 Hexo 的运作原理讲起。首先,我们可以看到目前 Hexo 目录的内容:

Hexo 目录

这些都是 Hexo 的程序档、编辑档,而 source 里面放置了文章、页面。但是这些编辑档都不是常见的 HTML,因此我们必须执行这个指令:

hexo g

产生 Hexo 静态网页

此时我们可以看到执行後,多了一个 public 目录,点击进去後,会发现里面有一些内容,这是 Hexo 刚搭建时会有的预设文章。

之後我们提到将网站部署到空间上时,就是会部署 public 内的内容上去,所以网友看到的就会是你产生出的静态网页。

Hexo 产生的静态网页目录

利用虚拟服务器在本机预览部落格

通常部署之前,我们就要先在本机检查好内容才会部署到空间上,此时 Hexo 本身就有提供虚拟服务器的功能,我们只需执行以下指令:

hexo s

执行代码後会出现以下讯息:

开启 Hexo 服务器

其中我们可以看到两个关键讯息:

  1. 网址部分,大家可以看到「http://localhost:4000」这串网址,是 Hexo 预设服务器网址以及埠号。
  2. 目前是开启虚拟服务器阶段,如果要要关闭或是因为需要输入指令而终止,点击 Ctrl+C 就可输入指令,但此时开设的服务器就会连不上。

Hexo 搭建完成

你的第一个 Hexo,就此成功搭建在自己的本机上啦!

如果埠号被占用怎麽办?

如果你因为其他需求,刚好已经使用了 4000 这个埠号该怎麽办呢?此时只要在原先的 hexo s 指令後加几个字:

hexo s -p 6789

可以看到原先执行环境的网址部号已经被改变罗!

指定埠号开启服务器

後记

当初在架设 Hexo 时有在 Hackmd 上做指令笔记,结果真的要打成文章时,整个失意 QQ 或甚至是当初并没有搞定其意思,虽然说现在也还没很懂所有指令的意思就是了 XD 但透过写文章以及参阅网路上各类资讯,再度让我重回记忆。所以写部落格真是一件非常高 CP 的事情啊!以下附上我参考的一些文章内容与资讯~

参考资料

本篇文章同步发布於我的部落格 Gui Blog


<<:  组译器与连结器 (下)

>>:  [Day 5] Reactive Programming - Java 9(Publisher、Subscribers)

# Day 7 Supporting PMUs on RISC-V platforms (三)

今天没意外的话,会是 Supporting PMUs on RISC-V platforms 的最後...

Spring Framework X Kotlin Day 30 Review

GitHub Repo https://github.com/b2etw/Spring-Kotlin...

Day 20 - 将 NEWS 後台储存资料提取後,送至前台渲染画面 (下) - News View Page InnerText 应用 - ASP.NET Web Forms C#

=x= 🌵 NEWS 前台 View 页面後端功能制作。 NEWS View 页面资料介绍 : 📌 ...

从链接/URL 下载在线影片的 5 种最佳方式

如今,YouTube、TikTok、Dailymotion 等在线网站越来越受欢迎,并吸引了全球大量...

【C++】Encryption and Decryption

在学习Encryption 跟Decryption前~ ASCII电脑编码系统是必须要知道的。 AS...