0
点赞
收藏
分享

微信扫一扫

从零开始的 Hexo 生活(一)入门安装篇

影子喵喵喵 2022-03-17 阅读 69
node.jsnpm

文章目录


前言

Hexo 作为一款静态博客网站框架,是新手搭建属于自己的博客网站的不二之选。但是如果你只是按照相关教程快速地完成了一个网站的搭建,搭建完成时获得的成就感很快就会消散。了解搭建过程中的相关知识和原理,并用于提升自己的知识储备,才能让这种获得感长久,这篇文章的意义就在于此。


一、Hexo 是什么

Hexo 是一款基于 Node.js 的静态博客网站框架,依赖少且易于安装使用,可以很方便并且快速地生成静态网页,然后托管在 GitHub Pages、Netlify 和 Vercel 等上搭建个人博客网站。Hexo 的作者来自台湾,对于中文的支持很好,阅读相关文档也很方便。

Hexo Logo

Hexo 中文官网

1.什么是静态网站

既然有静态网站,与之相对的也有动态网站。静态网站往往没有数据库和后台,网站代码一经发布到网站服务器上后内容便不可修改,只能通过重新长传更改后的网站代码来更新网站。而动态网站不同,它可以根据用户的要求和选择而动态地改变网页内容,并且自动更新网站,还能通过后台实时监控网站的情况并作出响应。

2.为什么选择静态网站

动态网站的交互性和功能都很强大,但是搭建的过程很复杂,需要有一定的代码基础,还要了解数据库等相关知识,它往往是一些公司和企业的官网。对于只想搭建博客网站的个人来说,学习成本太高,所以选择静态网站,它上手简单,对于个人网站来说绰绰有余,同时维护成本也很低。

3.为什么选择 Hexo

虽然搭建静态网站相对于动态网站已经简单很多,但是还是要有 htmlcssjs 等前端开发的基础,而 Hexo 的出现又降低门槛,它可以把写好的 Markdown 文档渲染生成网页,你要做的只是配置好 Hexo 就行了。

Hexo 类似的工具还有 Jekyll 和 Hugo ,jekyll 是 GitHub 的亲儿子,而 Hugo 是采用 Go 语言编写的,但是从使用人数和博客主题数量来看,Hexo 更胜一筹,网上关于 Hexo 的介绍也更多,遇到问题也更好解决。

Jekyll LogoHugo Logo

二、Markdown 是什么

Markdown 是一种轻量级标记语言,它允许人们使用易读易写的纯文本格式编写文档,然后转换成有效的 XHTML(或 HTML)文档,简单来说,就是以 Markdown 格式编写的文档(.md 结尾)可以在特定工具下转换为 XHTML(或 HTML,即 .html 结尾)的文档,从而简化写复杂的 XHTML(或 HTML) 代码过程。

Markdown Logo

1.为什么要学 Markdown

你在 Hexo 上写的所有文章都是 Markdown 格式的,Hexo 可以把你写的这些 Markdown 文档(.md 结尾)批量转换成 XHTML(或 HTML,即 .html 结尾)的文档,然后渲染组成页面,再把页面组织构成网站。

2.怎么学 Markdown

Markdown 作为轻量级标记语言,学习起来难度较小,了解 Markdown 基本语法后多写写就能熟练掌握,可以查看 菜鸟教程 或者 马克飞象 的例子,网上其他的相关教程也很多,就不一一列举了。当你熟悉之后,进阶的话可以在 Markdown 文档中插入 HTML 语句实现更多功能和样式。

Markdown 编辑器的话使用 VSCode 或者 Typora、MarkText 等都行,甚至记事本也行(不过无法预览)。

三、如何使用 Hexo

1.前期准备

  • Node.js
  • npm

以前 js 只能运行在浏览器中,Node.js 出现之后,不管是服务器上,还是我们自己的的笔记本上,只要安装了 Node.js 就可以运行 js 代码。

Node.js Logo

Node.js 中文官网

npm 的全称是 Node Package Manager,是一个 Node.js 的包管理和分发工具,可以使用它安装和管理官方以及别人开发好的模块,并应用到你的项目中。

npm Logo

npm 官网

2.安装 Node.js

打开 Node.js 官网,找到 下载,选择 长期维护版 下载,下载完成后双击下载的 .msi 文件进行安装,可以更改安装位置到其他盘,其他选项默认即可,Node.js 安装完成后自带 npm

安装完成后,在 cmdpowershell 或者 Windows Terminal 等终端中输入

node -v

如果输出版本号即为安装成功

也可以查看 npm 版本

npm -v

3.安装 Hexo

查看 Hexo 中文官网 发现,只需要一个命令就可以安装 Hexo,它是通过 npm 安装的

由于 npm 的源服务器在国外,速度慢,可以使用 阿里云 npm 镜像站,终端输入

npm config set registry https://registry.npmmirror.com

查看换源是否成功

npm config get registry

镜像源配置好就可以安装 Hexo 了,输入

npm install hexo-cli -g

验证安装是否成功

hexo -v

输出版本号和其他基本信息即表明安装成功

4.初始化网站

可以查看 Hexo 官方文档 或者看我下面的介绍

任选位置新建一个空文件夹,初始化该文件夹

hexo init

等待完成,然后更新 npm 包的依赖

npm install

5.本地测试

Hexo 初始化完成后会有一个默认主题 landscape

依次输入以下指令,在本地运行

hexo clean
# 清除缓存,可用简略写法 hexo cl
hexo generate
# 生成静态页面,可用简略写法 hexo g
hexo server
# 本地运行,可用简略写法 hexo s

按住 Ctrl 并点击终端输出的 http://localhost:4000 链接可以跳转浏览器打开测试页面,或者在浏览器地址栏输入 http://localhost:4000 也可以打开测试页面

Hexo Landscape Logo

在终端按 CtrlC 可以中止运行

如果已经熟练 Hexo 的话,可以只使用一条测试运行指令

  • cmd
hexo cl && hexo g && hexo s
  • powershell
hexo cl ; hexo g ; hexo s

Hexo 搭建博客网站(二)基础配置篇

⏳ 更新中 ······


举报

相关推荐

从零开始的python学习生活

0 条评论