通过 hexo+serverless 快速搭建并部署一个自己博客,小白也能搞定(一)

先看一下我的博客效果:https://codingmo.com,没有写一行代码,全都是一些简单的配置。

如果觉得还不错,接下来就从零开始介绍,照着做,差不多1个小时就可以搞定了。

创建站点项目

这是Hexo的官网:https://hexo.io/zh-cn/docs/,有基础的可直接参照官方文档来,然后跳到Serveless 部署部分,我这里就主要针对小白进行一些简单的介绍了。

  1. 本地 node 环境安装

    打开Node.js官网:https://nodejs.org/zh-cn/,选择最新的长期维护版下载,然后正常双击进行安装。

    安装完成之后,按住Win + X,选择PowerShell并打开,然后在当前命令行下输入npm -v回车,如果打印出了一个版本号,就说明Node.js安装成功了。

  2. Hexo 的安装

    在当前的命令行窗口输入npm install -g hexo-cli并回车,等待安装完成。

    1
    npm install -g hexo-cli
  3. 创建站点项目

    找一个你用来放站点项目的文件夹(或桌面),按住Shift并在空白处鼠标右键,在弹窗的菜单中点击在此处打开 PowerShell 窗口。并依次输入下面的命令:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    # 初始化
    hexo init my-site

    # 上面命令执行完之后,进入项目
    cd my-site

    # 安装依赖
    npm install

    # 运行
    npm run server

    这时候,你的站点项目就已经创建好了,在浏览器输入http://localhost:4000就可以看到你的站点页面了。这是hexo官方默认的站点,接下来就配置成自己喜欢的站点风格吧。

hexo 配置

如果你电脑上没有合适的编辑器,建议安装Visual Studio Code进行后续操作。直接上官网:https://code.visualstudio.com/点击下载并安装。

安装好了VS Code,在当前的命令行下输入:

1
code .

如果打开失败,就直接在当前项目文件夹my-site鼠标右键,选择通过 Code 打开

VS Code中,打开_config.yml文件,该文件就是当前站点的配置文件。

里面有很多配置信息,大家可以参照官方文档:https://hexo.io/zh-cn/docs/configuration进行自定义,顺便给大家看一下我的部分配置:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# Site
title: 末日码农 - 专注前端,记录生活
subtitle: 一个前端码农,会写一点代码
description: 专注前端,记录生活!大量的优质技术文章和干货分享,公众号@末日码农
keywords: Hexo, js, Nodejs, React, Vue, JavaScript, CSS3, html, 前端, 程序员, 码农
author: 颜漠笑年
language: zh-CN
timezone:

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: https://codingmo.com
root: /
permalink: :year:month:day/:id/
permalink_defaults:

除了Site下面的站点信息相关配置,大多数配置都可以保持默认就行。

然后就是主题的配置,我的站点选择的是Fluid主题,这是官方文档:https://hexo.fluid-dev.com/docs/,你也可以选择一款自己喜欢的主题,这是官方的主题列表:https://hexo.io/themes/。不过建议你上百度或谷歌上去搜索别人推荐的比较热门的主题,自己挑的话主题太多了,费时费力,而且主题参差不齐。

确定好主题之后,一般每个主题都有自己的配置文档介绍,我这里就根据我的主题来说一下吧。

  1. 安装主题
1
npm install npm install --save hexo-theme-fluid
  1. _config.yml文件中找到theme并配置fluid
1
2
3
4
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: fluid
  1. 在项目根目录下创建_config.fluid.yml文件,并将主题中_config.yml文件中的内容复制到该文件里。接下来的所有配置修改都应该在_config.fluid.yml文件中进行。

    注意:主题中的_config.yml文件位于node_modules\hexo-theme-fluid目录下

现在就可以根据fluid的官方文档进行个性化配置了,这里的配置项比较多,可以先全部保持默认,继续往下进行。

主题确定好了之后,重新运行npm run server命令,就可以看到效果了,现在你的站点就跟我的那个站点看起来风格差不多了。

关于写文章,Hexo都是基于MarkDown语法来的,如果不熟悉的话,就需要花点时间学习一下MarkDown语法,就能愉快的写自己的博客文章了。

最后,就可以部署上线了。

Github 部署

最简单的方法就是使用github的静态页面功能去部署了,但是对于小白的话就需要一定的Git基础。有需要的可以参考一下我17年写过的一篇文章《前端工具篇:浅谈Git和Github》:https://moohng.com/20170810/cl0albbhc00057wv28t0p5pti/

首先,在_config.yml配置文件中,配置github仓库信息(需要自己提前在github上建好,并将master分支开启Page功能):

1
2
3
4
5
6
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
type: git
branch: master
repo: git@github.com:moohng/moohng.github.io.git

我是将master作为静态页面,dev分支作为当前项目仓库,这是我的项目地址:https://github.com/moohng/moohng.github.io

要注意项目的名称,必须是moohng.github.io这种格式,最前面用你自己的github用户名替换,否则就不能以这个https://moohng.github.io作为你站点的域名了。

通过github作为博客站点的优势就是:自定义的域名不需要备案,而且还是完全免费的

但是唯一的缺点就是:国内的访问速度很慢,有时候可能甚至打不开

未完待续

篇幅有限,下一篇继续介绍serverless部署和自定义域名部分。

最后,感谢阅读!关注我的微信公众号《末日码农》,可获取更多技术知识~


通过 hexo+serverless 快速搭建并部署一个自己博客,小白也能搞定(一)
https://codingmo.com/article/20220304/44b4aa30c0db/
作者
颜漠笑年
发布于
2022年3月4日
许可协议