一些用过就忘,再用再查的事情,应该留下记录。

教程背景

静态网站搭建,hexo 稳居热门前三,中文文档+丰富第三方,再配合GitHub Pages,成为很多人建站首选。

但官网的安装命令过于简洁,实际使用中,会让0基础的小白用户(比如一直用 WordPress 的我)完全看不懂,很不友好。

经过一个星期的多番尝试,3装3卸载,100%验证后,本教程在 windows 10 2004 保持有效。

如果你也不清楚什么是git,什么是npm,0基础,想学低成本搭建网站,本文把手教学。

如果您是程序员,可以忽略 / 莅临指导指出 bug,不胜感激。

步骤

1.下载安装基础运行程序。

1.1 Git

下载地址:https://nodejs.org/en/

1.2 Node.js

下载地址:https://git-scm.com/

2.运行 Git Bash 并切换淘宝镜像。

【可有可无的一步】

可理解为:让后面的下载速度更快。如果你本身访问外网速度理想,可不进行切换。

下方所有命令,都是在 Git Bash 这个命令行工具内完成,如果执行有问题,可以使用管理员身份运行。

全局切换命令:

npm config set registry http://registry.npm.taobao.org/

查看版本命令:

npm get registry

切回官方镜像:

npm config set registry http://www.npmjs.org

3.安装 hexo 程序

运行命令:

npm install -g hexo

查看版本:

hexo v

如显示多行版本信息如 hexo: 5.1.1等,安装成功。

4.创建 hexo 文件夹

hexo 文件夹,是未来博客运转的目标文件夹,写文、主题安装等等都在这里完成。

请在指定路径新建文件夹(英文名),右键空白处,选择 Git Bash here,输入指令:

hexo init

5.安装主题

现在这个是必须过程了,反正自带的主题也没人用不是么?

6.1 在 theme 文件夹下,建立你要使用的主题的同名文件夹,比如 theme/next

6.2 cd 到 theme 文件夹,或者直接在 theme 文件夹里右键运行 Git Bash。

6.3 输入获取主题的命令:

git clone https://github.com/theme-next/hexo-theme-next next

速度不会太快,等待安装进度结束。

6.修改配置信息:

打开安装文件夹下_config.yml 文件,修改 theme 后面的名字为你刚才安装的主题,比如 next。

7.部署 hexo

hexo g

8.启动 hexo 本地化预览

hexo s

9.访问本地网站地址:

http://localhost:4000

总结

hexo 的本地化安装到此为止。此时你已经可以正常预览网站。

接下来要学习的是:

  • 新建 markdown 文档写文章
  • 简单修改主题

进阶学习目标是:

  • 将静态网站部署至服务器(例如使用腾讯的 Cloudbase 工具上传)
  • 快速配置域名、SSL证书
  • 基础备案知识,让网站更健壮

后续文章将进行展开说明。