Hexo部署

Posted on Edited on In ,

主要参考： 个人博客搭建教程 | 爱扑bug的熊 (cuijiacai.com)

Step1 安装Node.js

官网下载安装软件并手动安装

Step2 安装Hexo

安装hexo

1
2
3
4
5
6
7
8
9
10
11
12
# 配置npm的国内镜像
npm config get registry # 查看原来的源
npm config set registry https://registry.npm.taobao.org # 修改为淘宝源
npm config get registry # 查看现在的源
# npm安装hexo
# 其中-g参数表示全局安装，没有这个参数就只在当前目录下安装，建议全局安装
npm install hexo-cli -g # 全局安装hexo命令行工具
# 创建hexo项目
hexo init "你的博客目录名称" # 目录名称不含空格的时候双引号可以省略
# 进入hexo项目并安装依赖
cd "博客目录"
npm install # 安装依赖

测试hexo

1
2
3
4
5
6
# 创建文章(markdown格式)
hexo new post "test" # 会在 source/_posts/ 目录下生成文件 ‘test.md’，打开编辑
# 生成html文件
hexo generate        # 生成静态HTML文件到 /public 文件夹中
# 启动项目
hexo server

运行结果

1663126035154

安装测试成功

Step3 配置Hexo

自行修改

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
# Site
title: Hexo  # 网站标题
subtitle:    # 网站副标题
description: # 网站描述
author: John Doe  # 作者
language:    # 语言
timezone:    # 网站时区, Hexo默认使用您电脑的时区

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child'
## and root as '/child/'
url: http://yoursite.com   # 你的站点Url
root: /                    # 站点的根目录
permalink: :year/:month/:day/:title/   # 文章的 永久链接 格式   
permalink_defaults:        # 永久链接中各部分的默认值

# Directory   
source_dir: source     # 资源文件夹，这个文件夹用来存放内容
public_dir: public     # 公共文件夹，这个文件夹用于存放生成的站点文件。
tag_dir: tags          # 标签文件夹     
archive_dir: archives  # 归档文件夹
category_dir: categories     # 分类文件夹
code_dir: downloads/code     # Include code 文件夹
i18n_dir: :lang              # 国际化（i18n）文件夹
skip_render:                 # 跳过指定文件的渲染，您可使用 glob 表达式来匹配路径。    

# Writing
new_post_name: :title.md  # 新文章的文件名称
default_layout: post      # 预设布局
titlecase: false          # 把标题转换为 title case
external_link: true       # 在新标签中打开链接
filename_case: 0          # 把文件名称转换为 (1) 小写或 (2) 大写
render_drafts: false      # 是否显示草稿
post_asset_folder: false  # 是否启动 Asset 文件夹
relative_link: false      # 把链接改为与根目录的相对位址    
future: true              # 显示未来的文章
highlight:                # 内容中代码块的设置    
  enable: true            # 开启代码块高亮
  line_number: true       # 显示行数
  auto_detect: false      # 如果未指定语言，则启用自动检测
  tab_replace:            # 用 n 个空格替换 tabs；如果值为空，则不会替换 tabs

# Category & Tag
default_category: uncategorized
category_map:       # 分类别名
tag_map:            # 标签别名

# Date / Time format
## Hexo uses Moment.js to parse and display date
## You can customize the date format as defined in
## http://momentjs.com/docs/#/displaying/format/
date_format: YYYY-MM-DD     # 日期格式
time_format: HH:mm:ss       # 时间格式    

# Pagination
## Set per_page to 0 to disable pagination
per_page: 10           # 分页数量
pagination_dir: page   # 分页目录

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: landscape   # 主题名称

# Deployment
## Docs: https://hexo.io/docs/deployment.html
#  部署部分的设置
deploy:     
  type: '' # 类型，常用的git

Step4 添加建站脚本

为了后续netlify建站方便，我们可以在package.json里面添加一个命令：

1
2
3
4
5
6
7
8
9
10
11
12

{
    // ......
    "scripts": {
        "build": "hexo generate",
        "clean": "hexo clean",
        "deploy": "hexo deploy",
        "server": "hexo server",
        "netlify": "npm run clean && npm run build" // 这一行为新加
    },
    // ......
}

Step5 github项目文件托管

1
2
3
4
5
6
7
cd "博客目录"
git init
git add .
git commit -m "my blog first commit"
git remote add origin "远端github仓库地址"
git branch -M main
git push -u origin main

注：如果之前是使用git clone下载源码的方式安装next主题的话，需要将next主题路径下的git相关文件删除，否则这里push时会将next视作另一个仓库作为链接上传至仓库

Step6 netlify建站

Netlify是一个国外的免费的提供静态网站部署服务的平台，能够将托管 GitHub，GitLab 等上的静态网站部署上线。至于我们为什么不使用github自带的gitpage，原因很简单，访问速度慢。此外，Netlify还有很多别的功能支持，这里不作剧透，可以自行探索。

注册登录https://app.netlify.com/后，选择使用github已有仓库来install，可以只选择想建站的仓库，不用勾选其他仓库。

到以下页面时，修改build command为

1
npm run netlify
1663135844851

配置成功后，如果部署成功，可以得到一个url，对应我们的博客；如果不成功可以检查日志查找原因

1663137924897

这个域名是netligy为你的网站分配的域名，如果希望修改成xxxx.netlify.app，就需要将你的部署网站的sitename修改为对应得xxxx

1663138396703

1663138407258

Step7 解析域名

如果希望将上述的xxxx.netlify.app解析至自己已有的域名上，需要进行如下操作

前往自己域名服务提供商处解析域名，我使用的是阿里的域名（记得提前实名备案）

1663139265764

然后再回到netlify网址上配置一下自己的用户域名，这样的话可以在国外获得netlify本身的CDN支持。

具体步骤见参考文章中图片过程，成功结果如下所示：

1663139423690

至此，不论是 WilsonBlog 还是 WilsonBlog (wilsongogo.top) 都可以用于访问博客网址了

Step8 Cloudflare加速

Netlify 虽然已经提供了 CDN 加速，但在使用过程中发现国内访问还是比较慢，Cloudflare 相对于国内的七牛云、阿里云等云服务商的 CDN 速度会慢一些，但是它有免费版本，而且最重要的是域名不用备案。

而且听说cloudflare有预防ddos的5s墙功能，因此选择试用Cloudflare

1.首先添加根域名至Cloudflare，然后选择免费套餐(仍拥有ddos防护功能)

2.随后在查找出的记录中寻找之前添加的CNAME类型，如未查到对应记录，可以手动添加（我这里使用了手动添加）

1663140020372

3.在域名服务商处修改dns解析服务器为cloudflare地址

1663140299075 1663140287649

Step9 配置https

现在netlify一般会自动配置好，也可以通过下图按钮使用自己的CA证书

1663140628517